/* ======== GLOBAL STYLES & VARIABLES (Dark Theme v5 - Grid View) ======== */
:root {
    --primary-color: #00AEEF;
    --primary-hover: #008fbf;
    --dark-bg: #121B28;
    --card-bg: #1A2637;
    --text-color-primary: #E1E9F5;
    --text-color-secondary: #fff;
    --text-muted: #6c757d;
    --border-color: #2a3b52;
    --border-radius: 12px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --whatsapp-color: #25D366;
    --whatsapp-hover: #1DAE52;
    --font-family: 'Montserrat', sans-serif;
    --text-color-light: rgba(235, 235, 235, 0.8);
    --light-bg: #1A2637;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-family); color: var(--text-color-primary); line-height: 1.7; background-color: var(--dark-bg); }
body.nav-open { overflow: hidden; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
a { text-decoration: none; color: var(--primary-color); transition: color 0.3s; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ======== ЗАГОЛОВКИ ТА СЕКЦІЇ ======== */
.section-title { font-size: 2.8rem; text-align: center; margin-bottom: 60px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-color-secondary); }
.section-padded { padding: 100px 0; position: relative; background-color: var(--dark-bg); }
.section-padded::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../imgs/dna_pattern_dark.png'); background-repeat: repeat; background-position: center; opacity: 0.1; z-index: 1; }
.section-padded > .container { position: relative; z-index: 2; }

/* ======== РОЗДІЛЬНИКИ ======== */
.section-divider { border: none; border-top: 1px solid var(--border-color); margin: 80px 0; }
.fancy-divider { height: 1px; background: linear-gradient(to right, transparent, var(--border-color), transparent); margin: 80px 0; }

/* ======== КНОПКИ ======== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 8px; font-weight: 700; font-size: 1rem; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; border: none; cursor: pointer; text-transform: uppercase; width: auto; text-align: center; }
.btn-primary { background-color: var(--primary-color); color: #fff; }
.btn-primary:hover { background-color: var(--primary-hover); color: #fff; transform: scale(1.02); box-shadow: 0 4px 20px rgba(0, 174, 239, 0.4); }
.btn-primary:active { background-color: var(--primary-hover); color: #fff; transform: scale(0.98); box-shadow: none; }
.btn-secondary { background-color: transparent; color: var(--text-color-light); border: 2px solid var(--border-color); width: 100%; }
.btn-secondary:hover { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* ======== PRELOADER ======== */
.preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--dark-bg); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.8s ease-out, visibility 0.8s ease-out; }
.preloader.hidden { opacity: 0; visibility: hidden; }
.preloader-logo { display: flex; align-items: center; gap: 12px; animation: pulse 1.5s infinite ease-in-out; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* ======== HEADER ======== */
.header {background-color: rgba(26, 38, 55, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 15px 0; position: fixed; width: 100%; top: 0; z-index: 1000; border-bottom: 1px solid var(--border-color); transition: padding 0.3s ease, box-shadow 0.3s ease; }
.header.scrolled { padding: 10px 0; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); }
.nav { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-icon-new { width: 40px; height: 40px; position: relative; }
.logo-icon-new::before, .logo-icon-new::after { content: ''; position: absolute; background-color: var(--primary-color); transition: all 0.3s ease; }
.logo-icon-new::before { width: 100%; height: 8px; border-radius: 4px; bottom: 0; left: 0; }
.logo-icon-new::after { width: 8px; height: 100%; border-radius: 4px; bottom: 0; left: 0; }
.logo-text { font-size: 1.8rem; font-weight: 800; color: var(--text-color-secondary); }
.nav-list { display: flex; gap: 35px; }
.nav-link { color: var(--text-muted); font-weight: 600; position: relative; padding-bottom: 5px; transition: color 0.3s ease; }
.nav-link:hover { color: var(--text-color-secondary); }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: var(--primary-color); transition: width 0.3s ease; }
.nav-link:hover::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 15px; }
.nav-icon-btn { background: none; border: none; cursor: pointer; font-size: 1.2rem; color: var(--text-muted); transition: color 0.3s ease; }
.nav-icon-btn:hover { color: var(--primary-color); }
.hamburger { display: none; background: none; border: none; cursor: pointer; z-index: 1002; }
.hamburger-box { width: 30px; height: 24px; display: inline-block; position: relative; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 30px; height: 3px; background-color: var(--text-color-secondary); border-radius: 3px; position: absolute; transition: transform 0.3s ease, background-color 0.3s ease; }
.hamburger-inner { display: block; top: 50%; transform: translateY(-50%); }
.hamburger-inner::before, .hamburger-inner::after { content: ''; display: block; }
.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }
body.nav-open .hamburger-inner { background-color: transparent; }
body.nav-open .hamburger-inner::before { top: 0; transform: rotate(45deg); background-color: var(--text-color-primary); }
body.nav-open .hamburger-inner::after { bottom: 0; transform: rotate(-45deg); background-color: var(--text-color-primary); }

/* ======== HERO SECTION ======== */
.hero-main { position: relative; min-height: 100svh; height: 100svh; display: flex; align-items: center; padding-top: 80px; overflow: hidden; }
.hero-main__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../imgs/fone.jpg'); background-size: cover; background-position: center; }
.hero-main__bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(18, 27, 40, 0.6); backdrop-filter: blur(5px); }
.hero-main__content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
}
.hero-main__title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; color: var(--text-color-secondary); margin-bottom: 20px; letter-spacing: -0.02em; }
.hero-main__subtitle { font-size: 1.3rem; margin-bottom: 40px; font-weight: 400; line-height: 1.8; color: var(--text-color-primary); }
.hero-main .btn-primary i { transition: transform 0.3s ease; }
.hero-main .btn-primary:hover i { transform: translateX(5px); }

/* ======== FEATURES SECTION (Переваги) ======== */
.features-grid-small { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.feature-card-small { display: flex; align-items: center; gap: 20px; background-color: rgba(26, 38, 55, 0.7); backdrop-filter: blur(8px); border: 1px solid var(--border-color); padding: 25px; border-radius: var(--border-radius); transition: all 0.3s ease; }
.feature-card-small:hover { transform: translateY(-5px); border-color: var(--primary-color); }
.feature-card-small i { font-size: 2.5rem; color: var(--primary-color); }
.feature-card-small .trust-bar-text h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 5px; color: var(--text-color-secondary); }
.feature-card-small .trust-bar-text p { font-size: 0.9rem; color: var(--text-muted); }

/* ======== CATEGORIES SECTION ======== */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.category-card { display: block; position: relative; border-radius: var(--border-radius); overflow: hidden; border: 1px solid var(--border-color); padding: 35px 30px; background-color: rgba(26, 38, 55, 0.7); backdrop-filter: blur(8px); box-shadow: var(--shadow); transition: all 0.3s ease; }
.category-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); border-color: var(--primary-color); background-color: rgba(26, 38, 55, 0.9); }
.category-card__img, .category-card__overlay { display: none; }
.category-card__title { font-size: 1.5rem; font-weight: 700; color: var(--text-color-secondary); }
.category-card__description { font-size: 0.9rem; color: var(--text-muted); margin-top: 15px; line-height: 1.6; }

/* ======== PRODUCTS SECTION (Головна сторінка) ======== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }

/* ЗАГАЛЬНІ СТИЛІ КАРТКИ (для Головної та Каталогу на моб/планшеті) */
.product-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; height: 100%; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); }
.product-card__image-link { display: block; position: relative; background-color: #fff; padding: 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.product-card__tag { position: absolute; top: 15px; left: 15px; background-color: var(--primary-color); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; z-index: 2; }
.product-card__img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; display: block; transition: transform 0.3s ease; }
.product-card:hover .product-card__img { transform: scale(1.05); }
.product-card__info { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.product-card__title { font-size: 1.1rem; font-weight: 600; color: var(--text-color-primary); margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 2.4em; line-height: 1.2em; }
.product-card__title:hover { color: var(--primary-color); }
.product-card__category { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 15px; }
.product-card__price { font-size: 1.4rem; font-weight: 700; color: var(--text-color-secondary); margin-bottom: 20px; margin-top: auto; }
.product-card .btn-secondary { margin-top: 0; color: var(--primary-color); border-color: var(--primary-color); }
.product-card .btn-secondary:hover { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* ======== BRANDS SECTION ======== */
.brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px; align-items: center; }
.brand-logo { text-align: center; }
.brand-logo img { max-width: 150px; opacity: 0.4; transition: opacity 0.3s ease, filter 0.3s ease; filter: grayscale(100%); }
.brand-logo:hover img { opacity: 1; filter: grayscale(0%); }

/* ======== CTA SECTION ======== */
.cta-section { padding: 100px 0; background-color: var(--dark-bg); background-image: linear-gradient(rgba(18, 27, 40, 0.8), rgba(18, 27, 40, 0.8)), url('https://images.unsplash.com/photo-1530497610245-94d3c16cda28?q=80&w=1974&auto-format&fit=crop'); background-size: cover; background-position: center; background-attachment: fixed; }
.cta-content { max-width: 600px; margin: 0 auto; text-align: center; }
.cta-title { font-size: 2.5rem; font-weight: 800; color: #fff; margin-bottom: 20px; }
.cta-text { font-size: 1.1rem; color: var(--text-color-light); margin-bottom: 30px; }

/* ======== FOOTER ======== */
.footer { background-color: var(--dark-bg); color: var(--text-color-light); padding: 80px 0 30px 0; border-top: 5px solid var(--primary-color); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 60px; }
.footer-column .logo .logo-text { color: #fff; }
.footer-about-text { color: var(--text-muted); line-height: 1.8; margin-top: 20px; margin-bottom: 25px; }
.footer-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 25px; color: var(--text-color-light); }
.footer-links li, .footer-contacts li { margin-bottom: 15px; }
.footer-links a, .footer-contacts a, .footer-contacts span { color: var(--text-muted); transition: color 0.3s ease, padding-left 0.3s ease; display: inline-block; }
.footer-links a:hover { color: var(--primary-color); padding-left: 5px; }
.footer-contacts li { display: flex; align-items: center; gap: 15px; }
.footer-contacts a:hover { color: var(--primary-color); }
.footer-social { display: flex; gap: 20px; }
.footer-social a { color: var(--text-muted); font-size: 1.5rem; transition: all 0.3s ease; }
.footer-social a:hover { color: var(--primary-color); transform: scale(1.2) translateY(-5px); }
.copyright { text-align: center; padding-top: 30px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.9rem; }

/* ======== АНІМАЦІЇ ======== */
.anim-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: var(--delay, 0s); }
.anim-on-scroll.in-view { opacity: 1; transform: translateY(0); }

/* ======== АДАПТИВНІСТЬ ======== */
@media (max-width: 992px) { /* Планшети */
    .nav-list {
        position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
        background-color: rgba(26, 38, 55, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column; align-items: center; justify-content: center; gap: 35px;
        transition: right 0.4s ease-in-out; z-index: 1001; padding-top: 70px;
    }
    .nav-list.nav-open { right: 0; }
    .nav-link { font-size: 1.5rem; color: var(--text-color-primary); }
    .hamburger { display: block; z-index: 1002; }
    body.nav-open .hamburger-inner::before, body.nav-open .hamburger-inner::after { background-color: var(--text-color-primary); }
    body.nav-open .nav-actions .nav-icon-btn { display: none; }
    .hero-main__content { text-align: center; padding: 0 15px; }
    .section-title { font-size: 2.2rem; margin-bottom: 40px; }
    .features-grid-small { grid-template-columns: repeat(2, 1fr); }
    .category-grid { grid-template-columns: 1fr; }
    .catalog-layout { grid-template-columns: 1fr; }
    .catalog-layout > .catalog-sidebar { border-right: none; padding-right: 25px; }
    /* Перетворюємо Grid View (3 колонки) на Grid View (2 колонки) */
    .catalog-product-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    .btn-filter-toggle { display: inline-flex; }
    .catalog-sidebar {
        position: fixed;
        top: 0;
        left: -320px;
        width: 320px;
        height: 100vh;
        z-index: 1002;
        padding: 20px;
        overflow-y: auto;
        transition: transform 0.4s ease;
        box-shadow: 10px 0 30px rgba(0,0,0,0.1);
        border-radius: 0;
        background: var(--card-bg);
        /* Скидаємо sticky для мобільного меню */
        position: fixed;
        align-self: auto;
    }
    .catalog-sidebar.is-open { transform: translateX(320px); }
    .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
    .sidebar-header h3 { font-size: 1.5rem; color: var(--text-color-secondary); }
    .sidebar-close { font-size: 2rem; color: var(--text-muted); background: none; border: none; cursor: pointer; }
    .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 1001; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
    .sidebar-overlay.is-open { opacity: 1; visibility: visible; }
    body.sidebar-open { overflow: hidden; }
}

@media (max-width: 768px) { /* Мобільні */
    .section-padded { padding: 60px 0; }
    .features-grid-small { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: 1fr; }
    .brands-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { text-align: center; }
    .footer-column .logo, .footer-social, .footer-contacts li { justify-content: center; }
    /* Grid View (2 колонки) для каталогу */
    .catalog-product-list { grid-template-columns: 1fr 1fr; gap: 15px; }
    /* Адаптуємо картку для моб. */
    .product-list-item__info { padding: 15px; }
    .product-list-item__title { font-size: 1rem; min-height: 2.2em; }
    .product-list-item__category { font-size: 0.8rem; margin-bottom: 10px; }
    .product-list-item__price { font-size: 1.2rem; margin-bottom: 15px; }
    .product-list-item .btn-secondary { font-size: 0.9rem; padding: 10px; }
    .product-list-item__actions { padding: 0 15px 15px 15px; }

    .page-header { padding: 90px 0 30px 0; }
    .page-title { font-size: 2.2rem; }
    .catalog-toolbar { flex-direction: column; gap: 20px; align-items: stretch; }
    .catalog-sorting { justify-content: space-between; }
}

/* ======== КНОПКА В ХЕДЕРІ ======== */
.btn-header-call { background-color: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); padding: 8px 16px; font-size: 0.9rem; }
.btn-header-call i { margin-right: 8px; }
.btn-header-call:hover { background-color: var(--primary-color); color: #fff; transform: none; box-shadow: none; }
.nav-link-mobile-cta { display: none; }

/* ======== СТОРІНКА ТОВАРУ ======== */
.breadcrumbs { margin-bottom: 30px; font-size: 0.9rem; color: var(--text-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin: 0 10px; color: var(--border-color); }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--primary-color); }
.product-detail-layout--enhanced { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; }
.product-gallery__main { border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; margin-bottom: 15px; background: #fff; }
.product-gallery__main img { width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block; cursor: zoom-in; }
.product-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 15px; }
.thumb-item { border: 2px solid var(--border-color); border-radius: 8px; overflow: hidden; cursor: pointer; opacity: 0.7; transition: all 0.3s ease; background: #fff; }
.thumb-item.active, .thumb-item:hover { border-color: var(--primary-color); opacity: 1; }
.lightbox-hidden { display: none; }
.product-info-main .product-tag { background-color: var(--primary-color); color: #fff; padding: 5px 12px; border-radius: 6px; font-size: 0.9rem; font-weight: 700; display: inline-block; margin-bottom: 15px; }
.product-detail-title { font-size: 2.8rem; font-weight: 800; color: var(--text-color-secondary); margin-bottom: 15px; }
.product-meta-info { display: flex; gap: 20px; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px; }
.product-status.in-stock { color: #28a745; font-weight: 600; }
.product-status i { margin-right: 5px; }
.product-price-detail { font-size: 3rem; font-weight: 800; color: var(--text-color-secondary); margin-bottom: 25px; }
.product-key-specs { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 30px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 20px 0; }
.key-spec { display: flex; align-items: center; gap: 10px; background: var(--dark-bg); padding: 8px 15px; border-radius: 6px; font-size: 0.9rem; border: 1px solid var(--border-color); }
.key-spec i { color: var(--primary-color); }
.key-spec span { color: var(--text-color-primary); }
.key-spec strong { color: var(--text-color-secondary); }
.product-short-description { font-size: 1.1rem; line-height: 1.8; color: var(--text-muted); margin-bottom: 30px; }
.product-actions-new--enhanced { background: var(--dark-bg); border-radius: var(--border-radius); padding: 30px; border: 1px solid var(--border-color); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.product-actions-new .cta-title { font-size: 1.2rem; font-weight: 700; color: var(--text-color-primary); margin-bottom: 20px; text-align: center; }
.product-actions-new .btn { width: 100%; margin-bottom: 15px; font-size: 1.1rem; padding: 16px; }
.product-actions-new .btn:last-child { margin-bottom: 0; }
.btn-whatsapp { background-color: var(--whatsapp-color); color: #fff; }
.btn-whatsapp:hover { background-color: var(--whatsapp-hover); color: #fff; }
.product-trust-snippet { margin-top: 30px; display: flex; justify-content: space-around; gap: 15px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 0.9rem; }
.trust-item i { color: var(--primary-color); font-size: 1.2rem; }
.product-tabs--enhanced { background: transparent; border: none; border-radius: 0; overflow: visible; }
.tabs-nav--enhanced { display: flex; gap: 10px; border-bottom: 1px solid var(--border-color); margin-bottom: 40px; background: transparent; }
.tab-link { background: transparent; border: none; font-family: var(--font-family); font-size: 1.1rem; font-weight: 600; padding: 15px 25px; cursor: pointer; color: var(--text-muted); position: relative; bottom: -1px; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; transition: all 0.3s ease; }
.tab-link.active, .tab-link:hover { color: var(--text-color-secondary); background: var(--card-bg); border-bottom-color: var(--primary-color); }
.tab-pane { display: none; line-height: 1.8; padding: 0; }
.tab-pane.active { display: block; animation: fadeIn 0.5s ease-out; }
.tab-pane h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; margin-top: 10px; color: var(--text-color-secondary); }
.tab-pane p, .tab-pane ul { margin-bottom: 20px; }
.tab-pane .advantages-list { list-style: none; }
.tab-pane .advantages-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 1.1rem; }
.tab-pane .advantages-list i { color: var(--primary-color); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.specs-table { width: 100%; max-width: 800px; border-collapse: collapse; }
.specs-table tr { border-bottom: 1px solid var(--border-color); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table td { padding: 15px 10px; }
.specs-table td:first-child { font-weight: 600; color: var(--text-color-primary); width: 30%; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--border-radius); }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.photo-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.gallery-img { display: block; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow); }
.gallery-img img { width: 100%; display: block; }

@media (max-width: 992px) {
    .btn-header-call { display: none; }
    .nav-link-mobile-cta { display: block; margin-top: 30px; }
    .product-detail-layout--enhanced { grid-template-columns: 1fr; gap: 40px; }
    .product-detail-title { font-size: 2rem; }
    .product-price-detail { font-size: 2.5rem; }
    .tabs-nav--enhanced { flex-wrap: wrap; gap: 5px; }
    .tab-link { font-size: 1rem; padding: 12px 18px; }
}
@media (max-width: 768px) {
    .photo-grid-2 { grid-template-columns: 1fr; }
    .specs-table td { display: block; padding: 8px 0; }
    .specs-table tr { padding: 15px 0; }
    .specs-table td:first-child { width: 100%; }
}

/* ======== LIGHTBOX ======== */
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(18, 27, 40, 0.95); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox__image { max-width: 90%; max-height: 80%; border-radius: var(--border-radius); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); transform: scale(0.8); transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
.lightbox.active .lightbox__image { transform: scale(1); }
.lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; cursor: pointer; font-size: 2.5rem; transition: background-color 0.3s; }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__close { top: 20px; right: 20px; border-radius: 50%; width: 50px; height: 50px; line-height: 50px; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); padding: 10px 15px; border-radius: 8px; }
.lightbox__prev { left: 20px; }
.lightbox__next { right: 20px; }

/* ======== ФОРМИ ======== */
.form-input, .form-select { width: 100%; padding: 12px 16px; border: 1px solid var(--border-color); background-color: var(--dark-bg); color: var(--text-color-primary); border-radius: 8px; font-size: 1rem; font-family: var(--font-family); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus, .form-select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.2); background-color: var(--dark-bg); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; padding-right: 2.5rem; }
.btn-secondary-link { background: none; border: none; color: var(--text-muted); text-decoration: underline; cursor: pointer; font-size: 0.9rem; padding: 10px; }
.btn-secondary-link:hover { color: var(--primary-color); }
.reset-filters-btn.active { color: var(--primary-color); font-weight: 600; }

/* ======== ЗАГОЛОВОК СТОРІНКИ ======== */
.page-header { padding: 140px 0 60px 0; background-color: var(--dark-bg); color: #fff; position: relative; border-bottom: 1px solid var(--border-color); }
.page-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../imgs/dna_pattern_dark.png'); background-repeat: repeat; background-position: center; opacity: 0.1; z-index: 1; }
.page-header .container { position: relative; z-index: 2; }
.page-title { font-size: 3rem; font-weight: 800; margin-bottom: 10px; }
.page-header .breadcrumbs { color: var(--text-muted); }
.page-header .breadcrumbs a { color: var(--text-muted); }
.page-header .breadcrumbs a:hover { color: #fff; }
.page-header .breadcrumbs li:not(:last-child)::after { color: var(--text-muted); opacity: 0.5; }

/* ======== КАТАЛОГ (GRID VIEW) ======== */
.catalog-section { /* Фон вже встановлено через .section-padded */ }

/*
  ТУТ БУВ .catalog-toolbar, ВІН ПЕРЕЇХАВ НИЖЧЕ
  У БЛОК "ДОПОВНЕННЯ"
*/

/* ОСНОВНИЙ ЛЕЙАУТ: 280px (фільтри) + 1fr (контент) */
.catalog-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
}

/*
  ЦЕЙ СТИЛЬ БУВ ЗМІНЕНИЙ:
  Прибрано border-right та padding-right,
  бо сайдбар тепер - це "липка" колонка
*/
.catalog-layout > .catalog-sidebar {
    /* border-right: 1px solid var(--border-color); */
    /* padding-right: 40px; */
}

/* НОВЕ: Стилі для Grid View контейнера (Десктоп) */
.catalog-product-list {
    display: grid;
    /* 3 колонки для десктопа */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* НОВЕ: Стилі для .product-list-item (Вигляд "Картка") */
.product-list-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease, gap 0.3s ease, flex-direction 0.3s ease; /* Додано transition */
    padding: 0;
    gap: 0;
}
.product-list-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
.product-list-item__image-link {
    width: 100%;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    border-radius: 0;
    position: relative; /* Для тегу */
    transition: width 0.3s ease, padding 0.3s ease, border-radius 0.3s ease, border-bottom 0.3s ease; /* Додано transition */
}
.product-list-item__image-link .product-card__tag {
    top: 15px;
    left: 15px;
}
.product-list-item__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: contain;
    transition: height 0.3s ease, aspect-ratio 0.3s ease; /* Додано transition */
}
.product-list-item__info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    transition: padding 0.3s ease, flex-grow 0.3s ease; /* Додано transition */
}
.product-list-item__title {
    font-size: 1.1rem;
    font-weight: 600; /* Змінено з 700 для консистентності */
    color: var(--text-color-primary);
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.4em; /* 2 рядки */
    line-height: 1.2em;
    transition: font-size 0.3s ease, min-height 0.3s ease; /* Додано transition */
}
.product-list-item__title:hover { color: var(--primary-color); }
.product-list-item__category {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 15px;
}
.product-list-item__description {
    display: none; /* Опис приховано у картці */
    transition: display 0.3s ease; /* Додано transition */
    font-size: 0.95rem;
    color: var(--text-color-primary);
    line-height: 1.6;
}
.product-list-item__actions {
    width: auto;
    padding: 0 20px 20px 20px;
    margin-top: auto;
    text-align: left;
    align-items: stretch; /* Розтягуємо кнопку */
    transition: width 0.3s ease, padding 0.3s ease, margin-top 0.3s ease, align-items 0.3s ease; /* Додано transition */
}
.product-list-item__price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color-secondary);
    margin-bottom: 15px;
    text-align: left;
    transition: font-size 0.3s ease, text-align 0.3s ease; /* Додано transition */
}
.product-list-item .btn-secondary {
    width: 100%;
    padding: 14px 28px;
    color: var(--primary-color);
    border-color: var(--primary-color);
    transition: width 0.3s ease, padding 0.3s ease; /* Додано transition */
}
.product-list-item .btn-secondary:hover {
    background-color: var(--primary-color);
    color: #fff;
}


.catalog-sidebar {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--shadow);
    align-self: flex-start;
    border: 1px solid var(--border-color);

    /* Новий "Липкий" Сайдбар */
    position: sticky;
    top: 100px; /* Висота хедера + відступ */
}
.sidebar-header { display: none; }
.filter-group { border-bottom: 1px solid var(--border-color); padding: 20px 0; }
.filter-group:first-child { padding-top: 0; }
.filter-group:last-child { border-bottom: none; padding-bottom: 0; }
.filter-group-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--text-color-secondary); }
.filter-group-title::after { content: '\f077'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.9rem; transition: transform 0.3s ease; }
.filter-group-title:not(.active)::after { transform: rotate(180deg); }
.filter-group-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, opacity 0.3s ease; opacity: 0; }
.filter-group-content.active, .filter-group-content[style] { max-height: 1000px; opacity: 1; }
.filter-list { display: flex; flex-direction: column; gap: 10px; max-height: 250px; overflow-y: auto; padding-right: 10px; }
.filter-list::-webkit-scrollbar { width: 6px; }
.filter-list::-webkit-scrollbar-track { background: var(--dark-bg); border-radius: 3px; }
.filter-list::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 3px; }
.filter-list::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }
.category-filter-list a { display: block; padding: 5px; color: var(--text-color-primary); font-weight: 500; border-radius: 6px; }
.category-filter-list a:hover { background: var(--dark-bg); color: var(--primary-color); }
.category-filter-list a.active { font-weight: 700; color: var(--primary-color); }
.checkbox-filter-list label { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text-color-primary); }
.checkbox-filter-list input[type="checkbox"] { width: 1.2em; height: 1.2em; accent-color: var(--primary-color); }
.price-filter-inputs { display: flex; align-items: center; gap: 10px; }
.price-filter-inputs span { color: var(--text-muted); }
.price-filter-inputs .form-input { text-align: center; }
.price-filter-inputs .form-input.price-input { padding: 10px 8px; }
.price-filter-inputs input::-webkit-outer-spin-button, .price-filter-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-filter-inputs input[type=number] { -moz-appearance: textfield; }
.filter-actions { margin-top: 25px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.no-results-message { text-align: center; padding: 60px 20px; background: var(--card-bg); border: 1px dashed var(--border-color); border-radius: var(--border-radius); color: var(--text-muted); width: 100%;}
.no-results-message i { font-size: 3rem; margin-bottom: 20px; opacity: 0.5; }
.no-results-message h4 { font-size: 1.5rem; color: var(--text-color-primary); margin-bottom: 10px; }
.no-results-message p { margin-bottom: 20px; }
.pagination { margin-top: 60px; }
.pagination ul { display: flex; justify-content: center; gap: 10px; }
.page-link { display: block; padding: 10px 16px; min-width: 40px; text-align: center; color: var(--text-muted); font-weight: 600; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; transition: all 0.3s ease; }
.page-link:not(.disabled):hover { border-color: var(--primary-color); color: var(--primary-color); background: var(--dark-bg); }
.page-link.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.page-link.disabled { color: var(--border-color); cursor: not-allowed; opacity: 0.3; }

/* ======== СТОРІНКА КОНТАКТІВ ======== */
.contact-section { /* Фон вже встановлено через .section-padded */ }
.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; }
.contact-info-block { margin-bottom: 40px; }
.contact-info-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 25px; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; display: inline-block; color: var(--text-color-secondary); }
.contact-list { display: flex; flex-direction: column; gap: 25px; }
.contact-list li { display: flex; align-items: flex-start; gap: 20px; }
.contact-list i { font-size: 1.5rem; color: var(--primary-color); margin-top: 5px; width: 25px; text-align: center; }
.contact-list-text { display: flex; flex-direction: column; }
.contact-list-text span { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 5px; }
.contact-list-text a, .contact-list-text strong { font-size: 1.1rem; font-weight: 600; color: var(--text-color-primary); }
.contact-list-text a:hover { color: var(--primary-color); }
.contact-form-wrapper { background: var(--card-bg); border-radius: var(--border-radius); padding: 40px; border: 1px solid var(--border-color); }
.contact-form .form-group { margin-bottom: 25px; }
.contact-form label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--text-color-primary); }
.contact-form .form-input { background: var(--dark-bg); }
.contact-form textarea.form-input { resize: vertical; }
.map-container { border-top: 1px solid var(--border-color); line-height: 0; }
.map-container iframe { filter: invert(90%) grayscale(100%); }

@media (max-width: 992px) {
    .contact-layout { grid-template-columns: 1fr; gap: 40px; }
    .contact-form-wrapper { padding: 30px; }
}

/* ======== СТОРІНКА ПРО НАС ======== */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.feature-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 40px 30px; text-align: center; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); }
.feature-card__icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; background-color: rgba(0, 174, 239, 0.1); width: 70px; height: 70px; line-height: 70px; border-radius: 50%; display: inline-block; }
.feature-card__title { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; color: var(--text-color-secondary); }
.feature-card p { color: var(--text-muted); line-height: 1.8; }
.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; position: relative; }
.process-step:not(:last-child)::after { content: ''; position: absolute; top: 55px; left: 100%; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(to right, var(--primary-color) 50%, var(--border-color) 50%); background-size: 200% 100%; background-position: 100% 0; transition: background-position 0.5s ease; }
.process-step.in-view::after { background-position: 0 0; }
.process-step { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 30px; text-align: center; position: relative; }
.process-step__number { position: absolute; top: 15px; right: 20px; font-size: 3rem; font-weight: 800; color: var(--dark-bg); opacity: 0.5; }
.process-step__icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; background-color: rgba(0, 174, 239, 0.1); width: 70px; height: 70px; line-height: 70px; border-radius: 50%; display: inline-block; position: relative; }
.process-step__title { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; color: var(--text-color-secondary); }
.process-step p { color: var(--text-muted); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; justify-content: center; }
.team-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; text-align: center; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.team-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); }
.team-card__img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; filter: grayscale(100%); transition: filter 0.3s ease; }
.team-card:hover .team-card__img { filter: grayscale(0%); }
.team-card__info { padding: 25px; }
.team-card__name { font-size: 1.3rem; font-weight: 700; margin-bottom: 5px; color: var(--text-color-secondary); }
.team-card__title { color: var(--primary-color); font-weight: 600; }
.cta-buttons-container { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.btn-secondary-outline { background-color: transparent; color: #fff; border: 2px solid #fff; padding: 14px 28px; }
.btn-secondary-outline:hover { background-color: #fff; color: var(--dark-bg); }

@media (max-width: 992px) {
    .process-step:not(:last-child)::after { display: none; }
}

/* ======== ТЕКСТОВІ СТОРІНКИ ======== */
.text-content-wrapper { max-width: 800px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 40px; box-shadow: var(--shadow); }
.text-content-wrapper h2 { font-size: 1.8rem; font-weight: 700; color: var(--text-color-secondary); margin-top: 40px; margin-bottom: 20px; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; }
.text-content-wrapper h2:first-child { margin-top: 0; }
.text-content-wrapper p { font-size: 1rem; line-height: 1.8; color: var(--text-color-primary); margin-bottom: 20px; }
.text-content-wrapper ul { list-style: none; padding-left: 0; margin-bottom: 20px; }
.text-content-wrapper ul li { display: flex; align-items: flex-start; gap: 15px; font-size: 1rem; line-height: 1.7; margin-bottom: 15px; }
.text-content-wrapper ul li i { color: var(--primary-color); font-size: 1.2rem; margin-top: 4px; }

@media (max-width: 768px) {
    .text-content-wrapper { padding: 30px; }
    .text-content-wrapper h2 { font-size: 1.5rem; }
}

/* ======== СТОРІНКА ДЯКУЄМО ======== */
.thank-you-page-wrapper { background-color: var(--dark-bg); position: relative; min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.thank-you-page-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../imgs/dna_pattern_dark.png'); background-repeat: repeat; background-position: center; opacity: 0.1; z-index: 1; }
.thank-you-page-wrapper .container { position: relative; z-index: 2; }
.thank-you-box-new { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 50px 40px; box-shadow: var(--shadow); max-width: 650px; margin: 0 auto; }
.thank-you-box-new .fa-check-circle { font-size: 5rem; color: #28a745; margin-bottom: 25px; }
.thank-you-box-new h1 { font-size: 2.5rem; font-weight: 800; color: var(--text-color-secondary); margin-bottom: 20px; }
.thank-you-box-new p { font-size: 1.1rem; line-height: 1.8; color: var(--text-muted); margin-bottom: 15px; }
.thank-you-box-new .small-text { font-size: 1rem; margin-bottom: 30px; color: var(--text-muted); }
.thank-you-cta { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.btn-secondary-outline-dark { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 8px; font-weight: 700; font-size: 1rem; transition: all 0.3s ease; cursor: pointer; text-transform: uppercase; width: auto; text-align: center; background-color: transparent; color: var(--text-color-primary); border: 2px solid var(--border-color); }
.btn-secondary-outline-dark:hover { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* ======== КАТАЛОГ (GRID VIEW) - ДОПОВНЕННЯ ======== */

/* Новий Тулбар */
.catalog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap; /* Для мобільних */
    gap: 20px;
}
.catalog-toolbar__left,
.catalog-toolbar__right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.catalog-product-count {
    color: var(--text-color-primary);
    font-weight: 600;
}

/* Перемикач виду (Grid/List) */
.catalog-view-toggle {
    display: flex;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.view-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.view-btn:hover {
    color: var(--text-color-secondary);
}
.view-btn.active {
    background: var(--primary-color);
    color: #fff;
}
.view-btn:first-child {
    border-right: 1px solid var(--border-color);
}

/* Новий блок "Активні фільтри" */
.filter-group--active .filter-group-content {
    /* Робимо активним за замовчуванням */
    max-height: 1000px;
    opacity: 1;
}
.active-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color-primary);
    font-size: 0.9rem;
    padding: 5px 10px;
    border-radius: 6px;
}
.active-filter-tag i {
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.3s;
}
.active-filter-tag i:hover {
    color: #e74c3c; /* Колір небезпеки */
}

/* Прибираємо дублюючу кнопку "Скинути" */
.filter-actions .reset-filters-btn {
    display: none; /* Ми перенесли її нагору */
}

/* ======== КАТАЛОГ (LIST VIEW) - НОВІ СТИЛІ ======== */

/* Стилі для контейнера у режимі "List" */
.catalog-product-list.list-view {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Відступ між рядками */
}

/* Стилі для карточки товару у режимі "List" */
.catalog-product-list.list-view .product-list-item {
    display: flex;
    flex-direction: row; /* Головна відмінність */
    gap: 25px;
    padding: 20px;
    height: auto; /* Висота автоматична */
}
.catalog-product-list.list-view .product-list-item:hover {
    transform: none; /* Прибираємо підйом */
    box-shadow: var(--shadow);
    border-color: var(--primary-hover);
}

/* Зображення у режимі "List" */
.catalog-product-list.list-view .product-list-item__image-link {
    width: 200px; /* Фіксована ширина */
    flex-shrink: 0;
    padding: 10px; /* Менший падінг */
    border-radius: 8px;
    border-bottom: none; /* Прибираємо бордер */
}
.catalog-product-list.list-view .product-list-item__img {
    height: 100%;
    aspect-ratio: 1/1; /* Зберігаємо квадрат */
}
.catalog-product-list.list-view .product-list-item__image-link .product-card__tag {
    top: 10px; left: 10px;
}

/* Інфо у режимі "List" */
.catalog-product-list.list-view .product-list-item__info {
    padding: 0;
    flex-grow: 1;
}
.catalog-product-list.list-view .product-list-item__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color-secondary);
    min-height: 0;
}
.catalog-product-list.list-view .product-list-item__description {
    display: -webkit-box; /* Показуємо опис */
    font-size: 0.95rem;
    color: var(--text-color-primary);
    line-height: 1.6;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Секція дій у режимі "List" */
.catalog-product-list.list-view .product-list-item__actions {
    width: 200px; /* Фіксована ширина */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Вирівнювання по правому краю */
    justify-content: space-between;
    padding: 0;
    margin: 0;
}
.catalog-product-list.list-view .product-list-item__price {
    font-size: 1.5rem;
    text-align: right;
    margin-bottom: 15px;
}
.catalog-product-list.list-view .product-list-item .btn-secondary {
    width: auto; /* Кнопка займає власну ширину */
    padding: 12px 24px;
}


/* Адаптивність для нового тулбару */
@media (max-width: 992px) {
    .catalog-toolbar__left .catalog-product-count {
        display: none; /* Ховаємо лічильник на планшетах, де є кнопка "Фільтри" */
    }
}

@media (max-width: 768px) {
    .catalog-toolbar__right {
        justify-content: space-between;
    }
    .catalog-toolbar__left {
         /* Кнопка "Фільтри" буде на всю ширину */
    }
    .btn-filter-toggle {
        width: 100%;
    }
    .catalog-view-toggle {
        /* Займає доступне місце */
    }
    .catalog-sorting label {
        display: none; /* Ховаємо label сортування */
    }
    .catalog-sorting .form-select {
        flex-grow: 1;
    }

    /* У режимі "List" на мобілках, робимо його схожим на картку */
    .catalog-product-list.list-view .product-list-item {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }
    .catalog-product-list.list-view .product-list-item__image-link {
        width: 100%;
        padding: 20px;
        border-radius: 0;
        border-bottom: 1px solid var(--border-color);
    }
    .catalog-product-list.list-view .product-list-item__info {
        padding: 15px;
    }
     .catalog-product-list.list-view .product-list-item__description {
        display: none; /* Знову ховаємо опис */
     }
    .catalog-product-list.list-view .product-list-item__actions {
        width: auto;
        padding: 0 15px 15px 15px;
        align-items: stretch;
    }
    .catalog-product-list.list-view .product-list-item__price {
        text-align: left;
    }
    .catalog-product-list.list-view .product-list-item .btn-secondary {
        width: 100%;
    }
}
/* ======== 1. ПОЛІРУВАННЯ ФІЛЬТРІВ (Desktop + Mobile) ======== */

.active-filter-tag {
    /* Плавна анімація появи */
    animation: tag-appear 0.3s ease-out;
    /* Додаємо hover-ефект на сам тег, а не тільки на іконку */
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.active-filter-tag:hover {
    background-color: var(--dark-bg);
    border-color: #e74c3c; /* Колір небезпеки */
}
.active-filter-tag:hover i {
    color: #e74c3c;
}

/* Анімація появи тегу */
@keyframes tag-appear {
    from {
        transform: scale(0.8) translateX(-10px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateX(0px);
        opacity: 1;
    }
}

/* Кнопка "Скинути все" - робимо її помітною, коли вона активна */
.reset-filters-btn {
    opacity: 0.5; /* За замовчуванням - неактивна */
    transition: opacity 0.3s ease, color 0.3s ease;
}
.reset-filters-btn.active {
    opacity: 1;
    color: var(--primary-color) !important;
    font-weight: 700;
    text-decoration: none;
}
.reset-filters-btn.active:hover {
    color: var(--primary-hover) !important;
}

/* ======== 2. РЕДИЗАЙН МОБІЛЬНОЇ ВЕРСІЇ (UX-FIX) ======== */

@media (max-width: 768px) {
    /* 2.1. Ховаємо перемикач Grid/List. На мобілках 1 колонка. */
    .catalog-view-toggle {
        display: none;
    }

    /* 2.2. ЗМІНЮЄМО СІТКУ: 1 КОЛОНКА ЗАМІСТЬ 2-х */
    /* Це головний UX-фікс: робить картки великими і читабельними */
    .catalog-product-list,
    .catalog-product-list.list-view {
        grid-template-columns: 1fr; /* ЗАВЖДИ 1 колонка */
        display: grid; /* Переконуємось, що це grid */
        gap: 20px;
    }

    /* 2.3. Покращуємо вигляд 1-колонкової картки */
    .product-list-item,
    .catalog-product-list.list-view .product-list-item {
        /* Повертаємо до вертикальної картки */
        flex-direction: column;
        gap: 0;
        padding: 0;
        height: 100%; /* Дозволяємо картці бути високою */
    }

    .product-list-item__image-link,
    .catalog-product-list.list-view .product-list-item__image-link {
        width: 100%;
        padding: 20px;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        height: auto; /* Дозволяємо зображенню дихати */
    }

    .product-list-item__img,
    .catalog-product-list.list-view .product-list-item__img {
            height: auto;
            aspect-ratio: 1.2/1; /* Трохи ширше, ніж 1/1, для огляду */
            object-fit: contain;
    }

    .product-list-item__info,
    .catalog-product-list.list-view .product-list-item__info {
        padding: 20px; /* Більше "повітря" */
        padding-bottom: 10px;
    }

    .product-list-item__title,
    .catalog-product-list.list-view .product-list-item__title {
        font-size: 1.1rem; /* Більший шрифт */
        font-weight: 700;
        color: var(--text-color-secondary);
        min-height: 0; /* Скидаємо обмеження */
    }

    .product-list-item__category {
        margin-bottom: 10px;
    }

    /* 2.4. Показуємо опис на мобільному (у 1-колонковому вигляді це добре) */
    .product-list-item__description,
    .catalog-product-list.list-view .product-list-item__description {
            display: -webkit-box; /* Показуємо опис! */
            font-size: 0.95rem;
            line-height: 1.6;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 15px;
    }

    .product-list-item__actions,
    .catalog-product-list.list-view .product-list-item__actions {
        width: auto;
        padding: 0 20px 20px 20px; /* Більше "повітря" */
        margin-top: auto; /* Притискає донизу */
        align-items: stretch; /* Кнопка на 100% */
        display: block; /* Перебиваємо flex з list-view */
        flex-direction: column; /* Виправляємо напрямок */
        align-items: stretch; /* Розтягуємо */
    }

    .product-list-item__price,
    .catalog-product-list.list-view .product-list-item__price {
        font-size: 1.5rem; /* Велика, жирна ціна */
        text-align: left; /* Вирівнюємо по-людськи */
        margin-bottom: 20px;
    }

    .product-list-item .btn-secondary,
    .catalog-product-list.list-view .product-list-item .btn-secondary {
        width: 100%;
        font-size: 1rem; /* Велика, жирна кнопка */
        padding: 14px;
    }
}

/* ======== HOTFIX: Виправлення каталогу на Планшетах + Телефонах ======== */

@media (max-width: 992px) {

    /* 1. Головний фікс:
       Перетворюємо десктопну сітку (280px + 1fr) на ОДНУ колонку.
       Це змусить `.catalog-content` (з товарами) зайняти 100% ширини.
    */
    .catalog-layout {
        grid-template-columns: 1fr;
    }

    /* 2. Повністю ховаємо десктопний сайдбар з потоку.
       Тепер він - 'position: fixed' і не буде нічого штовхати.
       Він буде з'являтися тільки по кліку на кнопку "ФІЛЬТРИ".
    */
    .catalog-sidebar {
        position: fixed;
        top: 0;
        left: -320px; /* Повністю схований за екраном */
        width: 320px;
        height: 100vh;
        z-index: 1002;
        padding: 20px;
        overflow-y: auto;
        transition: transform 0.4s ease;
        box-shadow: 10px 0 30px rgba(0,0,0,0.1);
        border-radius: 0;
        background: var(--card-bg);
        align-self: auto; /* Скидаємо sticky */
    }

    /* 3. Показуємо сайдбар, коли він потрібен (JS додає цей клас) */
    .catalog-sidebar.is-open {
        transform: translateX(320px);
    }

    /* 4. Прибираємо будь-які десктопні відступи, що могли залишитись */
    .catalog-layout > .catalog-sidebar {
        border-right: none;
        padding-right: 0;
    }
}

/* Цей блок з минулого разу ми залишаємо,
   він робить картки красивими на телефонах (менше 768px)
*/
@media (max-width: 768px) {
    /* Ховаємо перемикач Grid/List. На мобілках 1 колонка. */
    .catalog-view-toggle {
        display: none;
    }

    /* ЗМІНЮЄМО СІТКУ: 1 КОЛОНКА ЗАМІСТЬ 2-х */
    .catalog-product-list,
    .catalog-product-list.list-view {
        grid-template-columns: 1fr; /* ЗАВЖДИ 1 колонка */
        display: grid;
        gap: 20px;
    }

    /* Покращуємо вигляд 1-колонкової картки */
    .product-list-item,
    .catalog-product-list.list-view .product-list-item {
        flex-direction: column;
        gap: 0;
        padding: 0;
        height: 100%;
    }

    .product-list-item__image-link,
    .catalog-product-list.list-view .product-list-item__image-link {
        width: 100%;
        padding: 20px;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        height: auto;
    }

    .product-list-item__img,
    .catalog-product-list.list-view .product-list-item__img {
            height: auto;
            aspect-ratio: 1.2/1;
            object-fit: contain;
    }

    .product-list-item__info,
    .catalog-product-list.list-view .product-list-item__info {
        padding: 20px;
        padding-bottom: 10px;
    }

    .product-list-item__title,
    .catalog-product-list.list-view .product-list-item__title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-color-secondary);
        min-height: 0;
    }

    .product-list-item__category {
        margin-bottom: 10px;
    }

    /* Показуємо опис на мобільному */
    .product-list-item__description,
    .catalog-product-list.list-view .product-list-item__description {
            display: -webkit-box;
            font-size: 0.95rem;
            line-height: 1.6;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 15px;
    }

    .product-list-item__actions,
    .catalog-product-list.list-view .product-list-item__actions {
        width: auto;
        padding: 0 20px 20px 20px;
        margin-top: auto;
        display: block;
        flex-direction: column;
        align-items: stretch;
    }

    .product-list-item__price,
    .catalog-product-list.list-view .product-list-item__price {
        font-size: 1.5rem;
        text-align: left;
        margin-bottom: 20px;
    }

    .product-list-item .btn-secondary,
    .catalog-product-list.list-view .product-list-item .btn-secondary {
        width: 100%;
        font-size: 1rem;
        padding: 14px;
    }
}
/* ======== HOTFIX: Ширина мобільного сайдбару та Баг Аккордеону ======== */

/* 1. Виправлення логіки анімації аккордеону (для нового JS) */
/* Тепер анімація базується на класі .active, а не на [style] */
.filter-group-content.active {
    max-height: 1000px; /* Висота для відкриття */
    opacity: 1;
}

/* 2. Розширення мобільного сайдбару (для екранів < 992px) */
@media (max-width: 992px) {
    .catalog-sidebar {
        width: 90vw; /* Було 320px */
        max-width: 360px; /* Обмеження, щоб не був занадто широким */
        left: -370px; /* Ховаємо (з запасом) */
        /* padding: 20px; - цей стиль вже є і він коректний */
    }

    .catalog-sidebar.is-open {
        transform: translateX(370px); /* Висуваємо на ту ж величину */
    }
}

/* 3. Окреме правило для ДУЖЕ вузьких екранів (< 370px) */
@media (max-width: 370px) {
    .catalog-sidebar {
        width: 100vw; /* На всю ширину */
        max-width: none; /* Скидаємо обмеження */
        left: -100vw; /* Ховаємо на 100% ширини */
    }
    .catalog-sidebar.is-open {
        transform: translateX(100vw); /* Висуваєaмо на 100% ширини */
    }
}

/* ======== HOTFIX 2: Відступи в мобільному сайдбарі ======== */

@media (max-width: 992px) {
    .catalog-sidebar {
        /* Ось головний фікс:
          Ми додаємо відступи (padding) до САМОГО сайдбару.
          Тепер .filter-group, .price-filter-inputs та .btn,
          які мають width: 100%, будуть красиво
          обмежені цими відступами.
        */
        padding: 40px 25px 25px 25px; /* Було 20px */

        /* Також виправляємо логіку ширини, щоб вона була стабільною */
        width: 90vw;
        max-width: 380px; /* Трохи ширше для комфорту */
        left: -390px; /* Ховаємо (з запасом) */
    }

    .catalog-sidebar.is-open {
        transform: translateX(390px); /* Висуваємо на ту ж величину */
    }

    /* Налаштовуємо внутрішні відступи груп */
    .catalog-sidebar .filter-group {
        padding: 20px 0;
    }

    /* Окремо прибираємо відступ у першої групи (Активні фільтри) */
    .catalog-sidebar .filter-group:first-child {
        padding-top: 0;
    }

    /* Заголовок "Фільтри" у моб. сайдбарі */
    .sidebar-header {
        padding-bottom: 20px;
        margin-bottom: 25px;
    }
}
@media (max-width: 992px) {
    /* Основний лейаут: 1 колонка */
    .catalog-layout {
        grid-template-columns: 1fr;
    }

    /* Сайдбар: стає мобільним (виїжджає) */
    .catalog-sidebar {
        position: fixed;
        top: 0;
        left: -390px; /* Ширина + запас */
        width: 90vw;
        max-width: 380px; /* Ширше */
        height: 100vh;
        z-index: 1002;
        padding: 0; /* **ОСЬ ФІКС ВІДСТУПІВ** - Падінг тепер на внутрішніх елементах */
        overflow-y: auto;
        transition: transform 0.4s ease;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
        border-radius: 0;
        border: none; /* Прибираємо десктопний бордер */
        align-self: auto; /* Скидаємо sticky */
        background: var(--card-bg); /* Додано фон */
    }

    .catalog-sidebar.is-open {
        transform: translateX(390px); /* Ширина + запас */
    }

    /* Мобільний заголовок сайдбару */
    .sidebar-header {
        display: flex; /* Показуємо */
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0; /* **ОСЬ ФІКС ВІДСТУПІВ** - Прибрано нижній відступ */
        border-bottom: 1px solid var(--border-color);
        padding: 20px 25px; /* Додано падінги */
        position: sticky; /* Липкий заголовок */
        top: 0;
        background: var(--card-bg); /* Фон для липкості */
        z-index: 1; /* Поверх контенту */
    }

    .sidebar-header h3 {
        font-size: 1.5rem;
        color: var(--text-color-secondary);
        margin-bottom: 0;
    }

    /* Прибрано margin */
    .sidebar-close {
        font-size: 2rem;
        color: var(--text-muted);
        background: none;
        border: none;
        cursor: pointer;
    }

    /* Оверлей */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        z-index: 1001;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    .sidebar-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* Кнопка "Фільтри" */
    .btn-filter-toggle {
        display: inline-flex;
    }

    .catalog-toolbar__left .catalog-product-count {
        display: none;
    }

    /* Ховаємо лічильник */
    /* **ОСЬ ФІКС ВІДСТУПІВ** - Падінг тепер тут, а не на сайдбарі */
    .catalog-sidebar .filter-group {
        padding: 20px 25px; /* Додано бічні падінги */
        border-bottom: 1px solid var(--border-color); /* Відновлено бордер */
    }

    .catalog-sidebar .filter-group:first-child {
        padding-top: 20px;
    }

    /* Відступ для першого */
    .catalog-sidebar .filter-group:last-of-type {
        border-bottom: none;
        padding-bottom: 20px;
    }

    /* Відступ для останнього */
    .catalog-sidebar .filter-actions {
        padding: 0 25px 25px 25px;
    }

    /* Падінг для кнопки */
    /* Список товарів: 2 колонки */
    .catalog-product-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    /* Тулбар: стає вертикальним */
    .catalog-toolbar { flex-direction: column; align-items: stretch; }
    .catalog-toolbar__right { justify-content: space-between; }
    .btn-filter-toggle { width: 100%; }
    .catalog-view-toggle { display: none; } /* Ховаємо Grid/List */
    .catalog-sorting label { display: none; }
    .catalog-sorting .form-select { flex-grow: 1; }

    /* Список товарів: 1 колонка */
    .catalog-product-list,
    .catalog-product-list.list-view {
        grid-template-columns: 1fr;
        display: grid; /* Важливо для скидання flex */
        gap: 20px;
    }

    /* Картка товару: стає великою і детальною */
    .product-list-item,
    .catalog-product-list.list-view .product-list-item {
        flex-direction: column; gap: 0; padding: 0; height: 100%;
    }
    .product-list-item__image-link,
    .catalog-product-list.list-view .product-list-item__image-link {
        width: 100%; padding: 20px; border-bottom: 1px solid var(--border-color); border-radius: 0; height: auto;
    }
    .product-list-item__img,
    .catalog-product-list.list-view .product-list-item__img {
        height: auto; aspect-ratio: 1.2/1; object-fit: contain;
    }
    .product-list-item__info,
    .catalog-product-list.list-view .product-list-item__info {
        padding: 20px; padding-bottom: 10px;
    }
    .product-list-item__title,
    .catalog-product-list.list-view .product-list-item__title {
        font-size: 1.1rem; font-weight: 700; color: var(--text-color-secondary); min-height: 0;
    }
    .product-list-item__category { margin-bottom: 10px; }
    .product-list-item__description,
    .catalog-product-list.list-view .product-list-item__description {
        display: -webkit-box; font-size: 0.95rem; line-height: 1.6; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 15px;
    }
    .product-list-item__actions,
    .catalog-product-list.list-view .product-list-item__actions {
        width: auto; padding: 0 20px 20px 20px; margin-top: auto; display: block; flex-direction: column; align-items: stretch;
    }
    .product-list-item__price,
    .catalog-product-list.list-view .product-list-item__price {
        font-size: 1.5rem; text-align: left; margin-bottom: 20px;
    }
    .product-list-item .btn-secondary,
    .catalog-product-list.list-view .product-list-item .btn-secondary {
        width: 100%; font-size: 1rem; padding: 14px;
    }
}
@media (max-width: 390px) {
    .catalog-sidebar {
        width: 100vw; max-width: none; left: -100vw;
    }
    .catalog-sidebar.is-open {
        transform: translateX(100vw);
    }
    /* Додаткові падінги для дуже вузьких */
     .catalog-sidebar .filter-group {
         padding: 20px 15px;
    }
     .sidebar-header { padding: 20px 15px; }
     .catalog-sidebar .filter-actions { padding: 0 15px 25px 15px; }
}
/* ======== PRODUCT DETAIL PAGE - FINAL PERFECTIONIST DESIGN (MOBILE FIRST) ======== */

/* ======== PRODUCT DETAIL PAGE - FINAL PERFECTIONIST V4 REVISED (MOBILE FIRST) ======== */

/* --- Загальні стилі сторінки --- */
.product-detail-page { }

/* **ФІКС ХЛІБНИХ КРИХТ:** Збільшуємо відступ зверху на мобільних */
@media (max-width: 768px) {
    .product-detail-page.section-padded {
        padding-top: 110px; /* Було 60px, має вистачити під хедер + крихти */
    }
    .breadcrumbs {
        margin-bottom: 25px; /* Трохи менший відступ під крихтами */
    }
}

/* --- Основний блок товару --- */
.product-detail-main-final { display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 50px; }

/* Галерея */
.product-gallery-final { position: relative; width: 100%; }
.product-gallery__main-final { border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; margin-bottom: 10px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.product-gallery__main-final img { width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block; cursor: zoom-in; }
.product-gallery__thumbs-final { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.thumb-item-final { border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: 0.7; transition: all 0.3s ease; background: var(--card-bg); aspect-ratio: 1/1; padding: 3px; }
.thumb-item-final img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 4px; background: #fff; }
.thumb-item-final.active, .thumb-item-final:hover { border-color: var(--primary-color); opacity: 1; }
.thumb-item-final.placeholder-thumb img { opacity: 0.5; }

/* Інформація про товар */
.product-info-final { display: flex; flex-direction: column; }
.product-info-final .product-tag { align-self: flex-start; margin-bottom: 12px; font-size: 0.85rem; padding: 4px 10px; background-color: var(--primary-color); color: #fff; border-radius: 6px; font-weight: 700;}
.product-title-final { font-size: 1.8rem; font-weight: 800; color: var(--text-color-secondary); margin-bottom: 15px; line-height: 1.35; }
.product-info-final .product-meta-info { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 20px; font-size: 0.9rem; color: var(--text-muted);}
.product-info-final .product-status { font-weight: 600; display: inline-flex; align-items: center;}
.product-info-final .product-status.in-stock { color: #2ecc71; }
.product-info-final .product-status.out-of-stock { color: #e74c3c; }
.product-info-final .product-status i { margin-right: 6px; font-size: 1.1em;}
.product-info-final .product-sku { color: var(--text-muted); }

/* Ключові характеристики */
.product-key-specs--final { margin: 25px 0; padding: 25px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.product-key-specs--final .key-specs-title { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 18px; }
.product-key-specs--final ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.product-key-specs--final li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; }
.product-key-specs--final li i { color: var(--primary-color); width: 20px; text-align: center; font-size: 1.1em; flex-shrink: 0; }
.product-key-specs--final li span { color: var(--text-color-primary); line-height: 1.4; }
.product-key-specs--final li strong { color: var(--text-color-secondary); font-weight: 600; margin-left: 5px; }

/* Короткий опис */
.product-short-description-final { font-size: 0.95rem; line-height: 1.7; color: var(--text-color-primary); margin-bottom: 25px; }

/* Ціна */
.product-price-final { font-size: 2.5rem; font-weight: 800; color: var(--primary-color); margin-bottom: 25px; display: flex; align-items: baseline; justify-content: center; }
.product-price-final span { font-size: 1.2rem; font-weight: 600; margin-left: 8px; color: var(--text-color-secondary);}

/* CTA Блок */
.product-actions-final { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 20px; margin-bottom: 25px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.product-actions-final .cta-title { font-size: 1rem; font-weight: 700; color: var(--text-color-secondary); margin-bottom: 8px; text-align: center; }
.product-actions-final .btn { width: 100%; font-size: 0.95rem; padding: 13px 20px; text-transform: none; font-weight: 700; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 10px;}
.product-actions-final .btn i { font-size: 1.1em; }
.btn-primary-final { background-color: var(--primary-color); color: #fff; border: 2px solid var(--primary-color);}
.btn-primary-final:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); transform: scale(1.02); box-shadow: 0 4px 15px rgba(0, 174, 239, 0.3); }
.btn-whatsapp-final { background-color: var(--whatsapp-color); color: #fff; border: 2px solid var(--whatsapp-color);}
.btn-whatsapp-final:hover { background-color: var(--whatsapp-hover); border-color: var(--whatsapp-hover); transform: scale(1.02); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); }

/* Блок довіри */
.product-trust-final { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; border-top: 1px solid var(--border-color); padding-top: 25px; }
.product-trust-final .trust-item { display: flex; align-items: center; font-size: 0.9rem; gap: 10px; color: var(--text-muted);}
.product-trust-final .trust-item i { font-size: 1.2rem; color: var(--primary-color); width: 22px; text-align: center; flex-shrink: 0;}

/* --- Таби (Новий дизайн V2, Mobile) --- */
.product-tabs-final { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--shadow); margin-top: 50px; overflow: hidden; }
/* Навігація табів (виглядає як кнопки) */
.tabs-nav-final { display: flex; flex-wrap: wrap; padding: 10px 10px 0 10px; /* Відступи навколо кнопок */ border-bottom: 1px solid var(--border-color); gap: 8px; /* Відступ між кнопками */}
.product-tabs-final .tab-link {
    flex-grow: 1; /* Кнопки займають рівну ширину */
    flex-basis: auto; /* Дозволяє перенос */
    background: var(--dark-bg); /* Фон неактивної кнопки */
    border: 1px solid var(--border-color);
    border-bottom: none; /* Прибираємо нижню межу */
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem; /* Трохи менший шрифт */
    padding: 12px 10px; /* Падінги кнопки */
    margin: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
    text-align: center;
    border-radius: 8px 8px 0 0; /* Скруглення тільки зверху */
    margin-bottom: -1px; /* Накладання на лінію */
}
.product-tabs-final .tab-link:hover { background-color: rgba(255, 255, 255, 0.05); color: var(--text-color-light); }
.product-tabs-final .tab-link.active {
    background: var(--card-bg); /* Фон активної співпадає з фоном контенту */
    color: var(--text-color-secondary);
    border-color: var(--border-color); /* Колір рамки */
    border-bottom-color: var(--card-bg); /* "Вирізаємо" нижню рамку */
    font-weight: 700;
    position: relative;
    z-index: 1; /* Активна кнопка поверх лінії */
}

/* Контент табів (Mobile) */
.tabs-content-final { padding: 30px; }
.tabs-content-final .tab-pane { padding: 0; line-height: 1.7; }
.tabs-content-final .tab-pane h3 { font-size: 1.4rem; font-weight: 700; color: var(--text-color-secondary); margin-bottom: 15px; margin-top: 25px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;}
.tabs-content-final .tab-pane h3:first-child, .tabs-content-final .tab-pane h4:first-child { margin-top: 0; }
.tabs-content-final .tab-pane h4 { font-size: 1.1rem; font-weight: 700; color: var(--text-color-light); margin: 20px 0 10px 0;}
.tabs-content-final .tab-pane p { color: var(--text-color-primary); margin-bottom: 15px; font-size: 0.9rem;}
.tabs-content-final .tab-pane ul.advantages-list { list-style: none; padding: 0; margin: 20px 0; }
.tabs-content-final .tab-pane ul.advantages-list li { display: grid; grid-template-columns: 20px 1fr; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-size: 0.9rem; color: var(--text-color-primary); }
.tabs-content-final .tab-pane ul.advantages-list i { color: var(--primary-color); margin-top: 4px; font-size: 1em; grid-column: 1 / 2; text-align: center; }
.tabs-content-final .tab-pane ul.advantages-list strong { color: var(--text-color-secondary); font-weight: 600; margin-right: 5px;}

/* Таблиця характеристик (Mobile) */
.specs-table-final { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem;}
.specs-table-final tr { border-bottom: 1px solid var(--border-color); }
.specs-table-final tr:last-child { border-bottom: none; }
.specs-table-final td { display: block; width: 100% !important; padding: 9px 0; vertical-align: top; }
.specs-table-final tr { padding: 12px 0; display: block; }
.specs-table-final td:first-child { font-weight: 700; color: var(--text-muted); margin-bottom: 3px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px;}

/* Медіа в табах (Mobile) */
.tabs-content-final .video-container { margin-bottom: 25px; border-radius: var(--border-radius); overflow: hidden;}
.tabs-content-final .photo-grid-2 { margin-top: 15px; grid-template-columns: 1fr; gap: 15px;}
.tabs-content-final .gallery-img { border-radius: var(--border-radius); box-shadow: 0 4px 10px rgba(0,0,0,0.1);}

/* --- Адаптивність (Планшет min-width: 768px) --- */
@media (min-width: 768px) {
    .product-detail-main-final { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; }
    .product-gallery-final { position: sticky; top: 100px; }
    .product-title-final { font-size: 2.1rem; }
    .product-key-specs--final ul { grid-template-columns: 1fr 1fr; }
    .product-key-specs--final li { font-size: 0.95rem; }
    .product-short-description-final { font-size: 1rem;}
    .product-price-final { font-size: 2.6rem; }
    .product-actions-final { padding: 25px; }
    .product-trust-final { flex-direction: row; justify-content: space-between; align-items: center;}
    .product-trust-final .trust-item { font-size: 0.9rem;}

    /* Таби */
    .tabs-nav-final { flex-wrap: nowrap; padding: 0 30px; gap: 0; /* Прибираємо gap */}
    .product-tabs-final .tab-link { font-size: 1rem; padding: 16px 20px; /* Падінги для вигляду кнопки */ margin-right: 0; flex-grow: 0; border: 1px solid transparent; border-bottom: none;} /* Додаємо рамку для hover */
    .product-tabs-final .tab-link.active { border-color: var(--border-color); border-bottom-color: var(--card-bg); }
    .product-tabs-final .tab-link:hover:not(.active) { background-color: rgba(255, 255, 255, 0.05); border-color: var(--border-color); border-bottom-color: rgba(255, 255, 255, 0.05);}
    .tabs-content-final { padding: 40px; }
    .tabs-content-final .tab-pane h3 { font-size: 1.6rem; }
    .tabs-content-final .tab-pane p { font-size: 0.95rem;}
    .tabs-content-final .tab-pane ul.advantages-list li { font-size: 0.95rem; }
    .specs-table-final { font-size: 0.95rem;}
    .specs-table-final td { display: table-cell; width: auto !important; padding: 15px 10px; }
    .specs-table-final tr { padding: 0; display: table-row;}
    .specs-table-final td:first-child { width: 40%; margin-bottom: 0; font-size: 0.95rem; text-transform: none; letter-spacing: 0;}
    .tabs-content-final .photo-grid-2 { grid-template-columns: 1fr 1fr; gap: 20px;}
}

/* --- Адаптивність (Десктоп min-width: 992px) --- */
@media (min-width: 992px) {
    .product-detail-main-final { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 60px; }
    .product-gallery__thumbs-final { gap: 12px; }
    .thumb-item-final { border-width: 2px; border-radius: 8px;}
    .product-title-final { font-size: 2.5rem; }
    .product-key-specs--final ul { gap: 14px 25px; }
    .product-price-final { font-size: 3.2rem; }
    .product-actions-final { padding: 30px; gap: 15px;}
    .product-actions-final .btn { font-size: 1rem; padding: 16px 25px;}

    /* Таби */
    .tabs-nav-final { padding: 0 40px; }
    .product-tabs-final .tab-link { font-size: 1.1rem; padding: 18px 25px;}
    .tabs-content-final { padding: 50px 60px; }
    .tabs-content-final .tab-pane h3 { font-size: 1.8rem; }
    .tabs-content-final .tab-pane p { font-size: 1rem;}
    .tabs-content-final .tab-pane ul.advantages-list li { font-size: 1rem; }
    .specs-table-final td:first-child { width: 35%; }
}
/* ======== PRODUCT DETAIL PAGE - ADVANTAGES LIST AS CARDS ======== */

/* --- Стилі для списку переваг (тепер як контейнер для карток) --- */
.tabs-content-final .tab-pane ul.advantages-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 10px 0; /* Відступи навколо блоку карток */
    display: grid; /* Використовуємо grid для карток */
    grid-template-columns: 1fr; /* Одна колонка на мобільному */
    gap: 15px; /* Відступ між картками */
}

/* Стиль окремої картки переваги (li) */
.tabs-content-final .tab-pane ul.advantages-list li {
    display: flex; /* Використовуємо flex для іконки та тексту */
    align-items: flex-start;
    gap: 15px; /* Відступ між іконкою та текстовим блоком */
    background-color: var(--dark-bg); /* Фон картки, трохи темніший */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 18px; /* Внутрішні відступи картки */
    margin: 0; /* Скидаємо зовнішні відступи */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tabs-content-final .tab-pane ul.advantages-list li:hover {
    /* transform: translateY(-3px); */ /* Легкий підйом при ховері (опціонально) */
    /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); */
}


/* Іконка переваги */
.tabs-content-final .tab-pane ul.advantages-list i {
    color: var(--primary-color);
    font-size: 1.3rem; /* Трохи більша іконка */
    margin-top: 2px; /* Точне вирівнювання іконки */
    flex-shrink: 0; /* Іконка не стискається */
    width: 22px; /* Фіксована ширина для вирівнювання */
    text-align: center;
}

/* Контейнер для тексту (Назва + Опис) */
.tabs-content-final .tab-pane ul.advantages-list .advantage-text {
     display: flex;
     flex-direction: column; /* Назва над описом */
     gap: 5px; /* Відступ між назвою та описом */
}

/* Назва переваги */
.tabs-content-final .tab-pane ul.advantages-list strong {
    color: var(--text-color-secondary);
    font-weight: 700;
    font-size: 1rem; /* Розмір назви */
    line-height: 1.4;
    margin: 0; /* Скидаємо відступи */
    display: inline; /* Щоб не розривати рядок, якщо немає опису */
}

/* Опис переваги (текст після strong) */
/* Використовуємо новий span у HTML для кращого контролю */
.tabs-content-final .tab-pane ul.advantages-list .advantage-description {
     display: block;
     color: var(--text-muted);
     font-size: 0.9rem;
     line-height: 1.6;
}

/* --- Адаптивність для карток переваг --- */

/* Планшет */
@media (min-width: 768px) {
    .tabs-content-final .tab-pane ul.advantages-list {
        grid-template-columns: 1fr 1fr; /* Дві колонки карток */
        gap: 20px;
    }
     .tabs-content-final .tab-pane ul.advantages-list li {
        padding: 20px;
    }
     .tabs-content-final .tab-pane ul.advantages-list strong {
        font-size: 1.05rem;
    }
     .tabs-content-final .tab-pane ul.advantages-list .advantage-description {
         font-size: 0.95rem;
     }
}

/* Десктоп */
@media (min-width: 992px) {
    .tabs-content-final .tab-pane ul.advantages-list {
        /* Можна залишити 2 колонки або повернути 1 для більшої деталізації */
         /* grid-template-columns: 1fr; */
    }
    .tabs-content-final .tab-pane ul.advantages-list li {
        padding: 22px;
        gap: 18px;
    }
    .tabs-content-final .tab-pane ul.advantages-list i {
       font-size: 1.4rem;
    }
     .tabs-content-final .tab-pane ul.advantages-list strong {
        font-size: 1.1rem;
    }
}
/* ======== STICKY FOOTER (Липкий футер) ======== */

/* 1. Робимо body гнучким контейнером, що займає мінімум 100% висоти екрану */
body {
    display: flex;
    flex-direction: column; /* Елементи (header, main, footer) йдуть зверху вниз */
    min-height: 100vh; /* Мінімальна висота = висота вікна перегляду */
}

main {
    flex-grow: 1;
}

/* ======== CONTACTS PAGE HEADER CENTERING ======== */

/* Центруємо весь контент всередині .page-header */
.page-header .container {
    text-align: center; /* Центрує текст (h1, p) */
}

/* Стилі для підзаголовка (раніше були inline) */
.page-header .page-subtitle {
    color: var(--text-muted);
    font-size: 1.1rem; /* Трохи менший шрифт */
    max-width: 650px; /* Обмежуємо ширину */
    margin: 15px auto 0; /* Відступ зверху + авто-відступи по боках для центрування */
    line-height: 1.7;
}

/* Центруємо хлібні крихти (раніше були inline) */
.page-header .breadcrumbs {
    justify-content: center; /* Центрує елементи ol по горизонталі */
    margin-top: 25px; /* Збільшений відступ зверху */
}

/* Додаткове правило для списку ol всередині breadcrumbs */
.page-header .breadcrumbs ol {
    justify-content: center; /* Гарантує центрування li */
    padding-left: 0; /* Скидаємо можливий лівий падінг */
}

/* Адаптивність для заголовка */
@media (max-width: 768px) {
    .page-header .page-subtitle {
        font-size: 1rem;
    }
     .page-header .breadcrumbs {
        margin-top: 20px;
    }
}

/* ======== CONTACTS PAGE INFO BLOCK CENTERING (MOBILE) ======== */

@media (max-width: 768px) {
    /* Центруємо заголовок блоку контактів */
    .contact-info .contact-info-title {
        display: block; /* Робимо блоковим для центрування тексту */
        text-align: center;
        border-bottom: none; /* Прибираємо підкреслення */
        margin-bottom: 20px; /* Трохи менший відступ */
        padding-bottom: 0;
    }
     /* Додаємо лінію під заголовком */
    .contact-info .contact-info-title::after {
        content: '';
        display: block;
        width: 60px; /* Ширина лінії */
        height: 2px;
        background-color: var(--primary-color);
        margin: 8px auto 0; /* Відступ зверху + центрування лінії */
    }


    /* Центруємо елементи списку контактів */
    .contact-list li {
        flex-direction: column; /* Іконка над текстом */
        align-items: center; /* Центруємо все по горизонталі */
        text-align: center; /* Центруємо текст */
        gap: 10px; /* Відступ між іконкою та текстом */
    }

    .contact-list i {
        margin-top: 0; /* Скидаємо верхній відступ іконки */
        font-size: 1.8rem; /* Трохи більша іконка */
    }

    .contact-list-text span {
         font-size: 0.85rem; /* Менший підпис */
         margin-bottom: 3px;
    }
     .contact-list-text a, .contact-list-text strong {
         font-size: 1rem; /* Стандартний розмір тексту */
    }

    /* Відступи між блоками */
    .contact-info-block {
        margin-bottom: 35px;
    }
}

/* ======== INFO PAGES STYLING (Delivery, Policy, etc.) ======== */

/* Загальний контейнер для контенту інфо-сторінок */
.info-page-section .container {
    max-width: 900px; /* Обмежуємо ширину для кращої читабельності */
}

/* Можлива розкладка (на майбутнє, якщо буде сайдбар) - поки 1 колонка */
.info-page-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px; /* Відступ між картками */
}

/* Стиль окремої інформаційної картки */
.info-section-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 30px; /* Внутрішні відступи */
    box-shadow: var(--shadow);
    /* anim-on-scroll вже є в HTML */
}

/* Заголовок всередині картки */
.info-section-card h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-color-secondary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color); /* Лінія під заголовком */
    display: flex; /* Для іконки */
    align-items: center;
    gap: 12px; /* Відступ між іконкою та текстом */
}
.info-section-card h2 i {
    color: var(--primary-color);
    font-size: 1.1em; /* Трохи більша іконка */
}


/* Текст параграфів */
.info-section-card p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-color-primary);
    margin-bottom: 18px;
}
.info-section-card p strong {
    color: var(--text-color-light); /* Світліший акцент */
    font-weight: 600;
}

/* Стиль списків */
.info-list {
    list-style: none;
    padding-left: 5px; /* Невеликий відступ зліва */
    margin: 20px 0 10px 0;
}

.info-list li {
    display: flex;
    align-items: flex-start; /* Вирівнювання по верху */
    gap: 12px; /* Відступ між іконкою та текстом */
    margin-bottom: 15px; /* Відступ між пунктами */
    font-size: 0.95rem; /* Трохи менший шрифт списку */
    line-height: 1.7;
    color: var(--text-color-primary);
}

.info-list li i.fa-check-circle {
    color: var(--primary-color);
    font-size: 1.1rem; /* Розмір іконки */
    margin-top: 4px; /* Вирівнювання іконки */
    flex-shrink: 0;
}

.info-list li strong {
    color: var(--text-color-secondary); /* Акцент на жирному тексті */
    font-weight: 600;
    margin-right: 5px;
}

/* Адаптивність для інфо-сторінок */
@media (max-width: 768px) {
    .info-section-card {
        padding: 25px; /* Менші відступи на моб */
    }
    .info-section-card h2 {
        font-size: 1.4rem;
        gap: 10px;
    }
    .info-section-card p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    .info-list li {
        font-size: 0.9rem;
        gap: 10px;
        margin-bottom: 12px;
    }
    .info-list li i.fa-check-circle {
        font-size: 1rem;
        margin-top: 3px;
    }
}

/* --- Стилі для .page-header на цих сторінках (включаючи контакти) --- */
/* Центруємо весь контент всередині .page-header */
.page-header .container { text-align: center; }
/* Підзаголовок */
.page-header .page-subtitle { color: var(--text-muted); font-size: 1.1rem; max-width: 700px; margin: 15px auto 0; line-height: 1.7; }
/* Хлібні крихти */
.page-header .breadcrumbs { justify-content: center; margin-top: 25px; }
.page-header .breadcrumbs ol { justify-content: center; padding-left: 0; }

@media (max-width: 768px) {
    .page-header .page-subtitle { font-size: 1rem; }
    .page-header .breadcrumbs { margin-top: 20px; }
}
/* --- Кінець стилів для .page-header --- */

/* ======== ABOUT US PAGE STYLING ======== */

/* --- Page Header Specifics --- */
.page-header.about-header {
    /* Додаємо фонове зображення-заглушку, якщо потрібно */
    /* background-image: linear-gradient(rgba(18, 27, 40, 0.85), rgba(18, 27, 40, 0.85)), url('https://via.placeholder.com/1920x600/1A2637/FFFFFF?text=High-Tech+Medical'); */
    background-size: cover;
    background-position: center center;
    padding: 160px 0 80px 0; /* Збільшені відступи */
}
/* Стилі для .page-title, .page-subtitle, .breadcrumbs вже є (з попередніх кроків) */

/* --- Секція зі світлим фоном --- */
.bg-light {
    background-color: var(--light-bg);
}

/* --- Секція "Чому нам довіряють" --- */
/* Стилі .features-grid та .feature-card вже є */
.features-grid {
     margin-top: 10px; /* Невеликий відступ під заголовком */
}

/* --- Секція "Наш підхід до роботи" --- */
.process-steps {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 1 колонка на моб */
    gap: 30px;
    position: relative;
    margin-top: 10px;
}
.process-step {
    background: var(--card-bg); /* Темніший фон для контрасту з .bg-light */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 30px 25px; /* Падінги */
    text-align: center;
    position: relative;
    overflow: hidden; /* Щоб номер не вилазив */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.process-step:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow);
}
.process-step__number {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--dark-bg); /* Дуже темний, майже невидимий */
    opacity: 0.3;
    line-height: 1;
    z-index: 1;
}
.process-step__icon {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    background-color: rgba(0, 174, 239, 0.1);
    width: 65px;
    height: 65px;
    line-height: 65px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    z-index: 2;
}
.process-step__title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-color-secondary);
    position: relative;
    z-index: 2;
}
.process-step p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* --- Секція "Наша команда експертів" --- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Адаптивна сітка */
    gap: 30px;
    margin-top: 10px;
}
.team-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}
.team-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block; /* Забирає зайвий відступ знизу */
    /* filter: grayscale(100%); */ /* Можна додати ефект ч/б */
    /* transition: filter 0.3s ease; */
}
/* .team-card:hover .team-card__img { filter: grayscale(0%); } */
.team-card__info {
    padding: 25px 20px;
}
.team-card__name {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-color-secondary);
}
.team-card__title {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
}

/* --- Секція "Документи та Сертифікати" --- */
.centered-subtitle { /* Клас для центрування підзаголовків */
    text-align: center;
    max-width: 700px;
    margin: -30px auto 40px auto; /* Негативний відступ зверху */
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}
.centered-grid { /* Клас для центрування сітки */
    max-width: 900px; /* Обмежуємо ширину */
    margin: 0 auto; /* Центруємо */
}
/* Стилі для .photo-grid-2 та .gallery-img вже є */

/* --- Секція CTA --- */
/* Стилі .cta-section, .cta-content, .cta-title, .cta-text, .cta-buttons-container, .btn-secondary-outline вже є */


/* --- Адаптивність для "Про нас" --- */

@media (min-width: 576px) {
    /* Підхід до роботи: 2 колонки */
    .process-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
     /* Підхід до роботи: 4 колонки */
    .process-steps { grid-template-columns: repeat(4, 1fr); }
    .process-step { padding: 35px 25px; }

    /* Команда: Відступи */
    .team-grid { gap: 40px; }

    /* Документи */
    .centered-subtitle { font-size: 1.15rem; }
}

/* ======== HOMEPAGE POLISHING ======== */

/* --- Hero Section --- */
.hero-main { min-height: 85vh; /* Трохи менша висота */}
.hero-main__content {
    /* Стилі для контейнера тексту, якщо потрібно */
    max-width: 650px; /* Трохи вужче */
}
.hero-main__subtitle {
    color: var(--text-color-primary); /* Явніший колір */
    font-size: 1.2rem; /* Трохи менший шрифт */
    line-height: 1.7;
    margin-bottom: 35px; /* Менший відступ */
}

/* --- Features Bar --- */
/* Стилі .features-grid-small та .feature-card-small вже мають бути */

/* --- Categories Section --- */
/* Стилі .category-grid та .category-card вже мають бути */

/* --- Popular Products Section --- */
.product-card__tag { /* Загальні стилі тега */
    /* Стилі вже є, можна додати/змінити */
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
}
/* Специфічні стилі для різних тегів (приклад) */
.product-card__tag.tag-new { background-color: var(--primary-color); }
.product-card__tag.tag-exclusive { background-color: #9b59b6; } /* Фіолетовий */
.product-card__tag.tag-sale { background-color: #e74c3c; } /* Червоний */
.product-card__tag.tag-top { background-color: #f39c12; } /* Помаранчевий */

/* --- Brands Section --- */
.brands-grid {
    gap: 25px;
}
.brand-logo img {
    max-width: 140px;
    opacity: 1;
    filter: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.brand-logo:hover img {
    opacity: 0.85; /* Легкий ефект приглушення */
    transform: scale(1.03); /* Трохи збільшуємо */
}

/* --- CTA Section --- */
/* Стилі .cta-section, .cta-content, etc. вже є */

/* --- Animation Delays --- */
/* Якщо використовуєте data-атрибут */
[data-anim-delay] {
    transition-delay: var(--anim-delay, 0s); /* Використовуємо змінну */
}

/* --- Responsive Adjustments for Homepage --- */
@media (max-width: 768px) {
    .hero-main { min-height: 70vh; }
    .hero-main__title {
        font-size: 2.3rem; /* 🚀 ВИПРАВЛЕНО: Прибираємо clamp, щоб уникнути обрізки */
        line-height: 1.3;
    }
    .hero-main__subtitle {
        font-size: 1.05rem; /* 🚀 ВИПРАВЛЕНО: Трохи менший шрифт */
        line-height: 1.6;
    }
    .hero-main .btn-primary {
        padding: 14px 24px; /* 🚀 ДОДАНО: Менші відступи на кнопці */
        font-size: 0.95rem; /* 🚀 ДОДАНО: Менший шрифт на кнопці */
    }

    .features-grid-small { grid-template-columns: repeat(2, 1fr); gap: 20px;} /* 2 колонки */
    .feature-card-small { padding: 20px; }

    .category-grid { grid-template-columns: 1fr; gap: 20px;} /* 1 колонка */

    .product-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;} /* Адаптивні картки товарів */

    .brands-grid { grid-template-columns: repeat(2, 1fr); gap: 20px;} /* 2 колонки брендів */
}

@media (max-width: 576px) {
     .features-grid-small { grid-template-columns: 1fr; } /* 1 колонка */
     .brands-grid { grid-template-columns: repeat(2, 1fr); } /* Залишаємо 2 колонки */
}

/* ======== HOMEPAGE - BENEFITS & INSTALLMENT SECTIONS ======== */

/* --- Секція Переваг --- */
.benefits-section {
    /* Фон вже заданий через bg-light */
}
.benefits-section .section-title,
.benefits-section .section-subtitle {
     /* Колір успадковується від .bg-light (якщо він темний, текст буде світлим) */
     /* Або можна задати явно */
     color: var(--text-color-secondary); /* Світлий текст на темному фоні */
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Адаптивна сітка */
    gap: 25px; /* Відступ */
    margin-top: 10px;
}

.benefit-card {
    background: var(--card-bg); /* Темніший фон */
    border: 1px solid var(--border-color);
    padding: 35px 25px; /* Падінги */
    border-radius: var(--border-radius);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-8px); /* Більший підйом */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.benefit-icon {
    font-size: 2.3rem; /* Трохи менша іконка */
    color: var(--primary-color);
    margin-bottom: 20px;
    background-color: rgba(0, 174, 239, 0.1);
    width: 65px;
    height: 65px;
    line-height: 65px;
    border-radius: 50%;
    display: inline-block;
    transition: transform 0.3s ease;
}

.benefit-card:hover .benefit-icon {
    transform: rotate(10deg) scale(1.1);
}

.benefit-title {
    font-size: 1.25rem; /* Розмір заголовка картки */
    color: var(--text-color-secondary); /* Світлий колір */
    margin-bottom: 10px;
    font-weight: 700;
}
.benefit-title .counter { /* Стиль для лічильника */
     font-weight: 800; /* Жирніший */
     color: var(--primary-color);
}


.benefit-card p {
    color: var(--text-muted); /* Сірий текст */
    font-size: 0.9rem; /* Трохи менший */
    line-height: 1.6;
}

/* --- Секція Оплати Частинами --- */
.installment-plan-section {
    background-color: var(--dark-bg); /* Темний фон */
    color: var(--text-color-light); /* Світлий текст */
}

.installment-plan__content {
    display: flex; /* Flex для розташування */
    flex-direction: column; /* Вертикально на моб */
    align-items: center; /* Центрування */
    gap: 30px; /* Відступ */
    text-align: center; /* Центрування тексту */
}

.installment-plan__text {
    max-width: 700px; /* Обмеження ширини тексту */
}

.installment-plan__text .section-title {
    text-align: center; /* Центрування заголовка */
    margin-bottom: 15px;
    color: var(--text-color-secondary); /* Світлий колір */
}

.installment-plan__text p {
    color: var(--text-muted); /* Сірий текст */
    font-size: 1.05rem; /* Трохи більший */
    line-height: 1.7;
}

.installment-plan__logos {
    display: flex;
    gap: 20px; /* Відступ між лого */
    flex-wrap: wrap; /* Перенос на моб */
    justify-content: center; /* Центрування лого */
    align-items: center;
}

.installment-plan__logos img {
    height: 45px; /* Менша висота лого */
    max-width: 100px; /* Обмеження ширини */
    filter: grayscale(100%) brightness(1.5); /* Сірі та світліші */
    transition: filter 0.3s ease, transform 0.3s ease;
    opacity: 0.7;
}

.installment-plan__logos img:hover {
    filter: grayscale(0%) brightness(1); /* Повертаємо колір при ховері */
    transform: scale(1.05);
    opacity: 1;
}


/* Адаптивність для нових секцій */
@media (min-width: 768px) {
    .installment-plan__content {
        flex-direction: row; /* Горизонтально на планшеті */
        text-align: left; /* Текст зліва */
        gap: 40px;
    }
     .installment-plan__text .section-title {
        text-align: left; /* Заголовок зліва */
    }
     .installment-plan__logos {
        gap: 25px;
        flex-shrink: 0; /* Щоб лого не стискались */
    }
    .installment-plan__logos img {
        height: 50px;
        max-width: 110px;
    }
}

@media (min-width: 992px) {
     .installment-plan__content { gap: 60px; }
     .installment-plan__logos { gap: 30px; }
     .installment-plan__logos img { height: 55px; max-width: 120px; }
}
/* ======== HOMEPAGE - BENEFITS & INSTALLMENT SECTIONS (FINAL MINIMAL BACKGROUNDS) ======== */

/* --- Секція Переваг (Benefits) --- */
.benefits-section {
    padding: 100px 0 60px;
    color: var(--text-color-light);

    /* **ФІКС ФОНУ:** Використовуємо суцільний темний колір (var(--secondary-blue) або var(--dark-bg)) */
    background-color: var(--card-bg); /* Використовуємо колір картки для легкого виділення */
    background-image: none; /* ВИДАЛЯЄМО ГРАДІЄНТИ */
}

.benefits-section .section-title { color: var(--text-color-secondary); }
.benefits-section .section-subtitle { color: var(--text-muted); font-size: 1.05rem; max-width: 700px; margin: 0 auto 50px auto; }

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 25px;
}

.benefit-card {
    background: rgba(26, 38, 55, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid var(--border-color);
    padding: 35px 25px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);
}

.benefit-icon {
    font-size: 2.3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    background-color: rgba(0, 174, 239, 0.15);
    width: 65px;
    height: 65px;
    line-height: 65px;
    border-radius: 50%;
    display: inline-block;
}

.benefit-title {
    font-size: 1.2rem;
    color: var(--text-color-secondary);
    font-weight: 700;
    line-height: 1.3;
    min-height: 3.25em;
    margin-bottom: 10px;
}
.benefit-title .counter {
     font-weight: 800;
     color: var(--primary-color);
}

.benefit-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }

/* --- Секція Оплати Частинами (Installment Plan) --- */
.installment-plan-section {
    padding: 60px 0 100px;
    /* **ФІКС ФОНУ:** Використовуємо основний темний колір */
    background-color: var(--dark-bg);
    background-image: none; /* ВИДАЛЯЄМО ГРАДІЄНТИ */
    color: var(--text-color-light);
}

.installment-plan__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    text-align: left;
}

.installment-plan__text { max-width: 60%; }
.installment-plan__text .section-title {
    text-align: left;
    margin-bottom: 15px;
    color: var(--text-color-secondary);
    font-size: 2.5rem;
    line-height: 1.2;
}

.installment-plan__text p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; }

.installment-plan__logos {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.installment-plan__logos img {
    height: 40px;
    max-width: 130px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.9;
}


/* --- Секція Бренди (Brands Section) --- */
/* Стилі Brands Section вже мають бути у вашому основному CSS,
   але ми додамо фікс, якщо він використовує background-image */
.brands-section {
    background-color: var(--dark-bg);
    background-image: none; /* Гарантуємо, що тут немає візерунків */
}


/* --- Адаптивність (Mobile Fixes) --- */
@media (max-width: 768px) {
    .benefits-grid { grid-template-columns: 1fr; gap: 20px; }
    .benefit-title { min-height: auto; }

    .installment-plan__content { flex-direction: column; text-align: center; gap: 30px; }
    .installment-plan__text .section-title { text-align: center; font-size: 2rem; }
    .installment-plan__logos { justify-content: center; }
    .installment-plan-section { padding: 40px 0 60px; }
}

@media (min-width: 992px) {
     .installment-plan__logos { gap: 40px; }
     .installment-plan__logos img { height: 50px; max-width: 150px; }
}
/* ======== CATALOG PAGE - FINAL PERFECTIONIST V3 (MOBILE FIRST) ======== */

/* --- Toolbar Enhancements --- */
.catalog-toolbar--with-search {
    display: grid; /* Grid для кращого контролю */
    grid-template-areas: /* Схема для мобільного */
        "search search"
        "filters results"
        "view sort";
    gap: 15px 20px;
    align-items: center;
    margin-bottom: 35px;
}
.catalog-toolbar__left { grid-area: search; }
.catalog-toolbar__center { grid-area: filters; display: flex; align-items: center; gap: 15px;}
.catalog-toolbar__right { grid-area: view-sort; display: flex; align-items: center; justify-content: flex-end; gap: 15px;} /* Перейменовано для ясності */
.catalog-product-count { grid-area: results; text-align: right; color: var(--text-muted); font-size: 0.9rem;}
.catalog-sorting { grid-area: sort; }
.catalog-view-toggle { grid-area: view; }

/* Поле пошуку */
.catalog-search {
    position: relative;
    width: 100%;
}
.search-input {
    padding-right: 45px; /* Місце для кнопки */
    background-color: var(--card-bg); /* Фон поля */
    border-color: var(--border-color);
}
.search-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    padding: 8px 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}
.search-button:hover { color: var(--primary-color); }

/* Кнопка Фільтри */
.btn-filter-toggle { display: inline-flex; width: auto; padding: 10px 15px; font-size: 0.9rem;} /* Завжди видима */
.filter-count-badge { font-weight: 600; color: var(--primary-color); margin-left: 5px; display: none; /* JS покаже */}

/* Адаптивність тулбару */
@media (min-width: 768px) {
    .catalog-toolbar--with-search {
        grid-template-areas: /* Схема для планшета */
            "search search filters results"
            "search search view sort";
        grid-template-columns: 1fr auto auto auto;
        gap: 15px 25px;
    }
    .catalog-toolbar__left { grid-area: search; }
    .catalog-toolbar__center { grid-area: filters-results; display: flex; align-items: center; gap: 20px; grid-column: 3 / 5;} /* Об'єднуємо */
     .catalog-product-count { grid-area: unset; text-align: left;} /* Повертаємо ліворуч */
    .catalog-toolbar__right { grid-area: view-sort; grid-column: 3 / 5; justify-content: flex-end;}
    .btn-filter-toggle { display: inline-flex; } /* Показуємо на планшеті */
}
@media (min-width: 992px) {
    .catalog-toolbar--with-search {
        grid-template-areas: "filters search results view sort"; /* Схема для десктопа */
        grid-template-columns: auto 1fr auto auto auto; /* Авто ширина для фільтрів */
        gap: 15px 30px;
    }
    .catalog-toolbar__left { grid-area: search; }
    .catalog-toolbar__center { grid-area: filters; } /* Тільки кнопка фільтрів */
     .catalog-product-count { grid-area: results; text-align: left;}
    .catalog-toolbar__right { grid-area: view-sort; }
    .btn-filter-toggle { display: none; } /* Ховаємо кнопку на десктопі */
}


/* --- Mobile Sidebar Fixes --- */
@media (max-width: 992px) {
    /* **ФІКС СКРОЛУ:** Обмежуємо висоту та додаємо прокрутку + overscroll */
    .catalog-sidebar {
        display: flex; /* Flex для відокремлення кнопки Apply */
        flex-direction: column;
        height: 100vh; /* Висота завжди 100% */
        padding: 0; /* Забираємо загальний падінг */
        overflow: hidden; /* Забороняємо скрол самого сайдбару */
    }
    .sidebar-header {
        flex-shrink: 0; /* Заголовок не стискається */
         padding: 15px 20px; /* Трохи менші падінги */
         margin-bottom: 0;
         position: static; /* Не липкий */
    }

    /* **НОВЕ:** Обгортка для скролу контенту фільтрів */
    .sidebar-content {
        flex-grow: 1; /* Займає весь доступний простір */
        overflow-y: auto; /* Дозволяємо скрол тільки тут */
        padding: 20px; /* Внутрішні відступи для контенту */
        overscroll-behavior: contain; /* Забороняємо скрол фону */
        -webkit-overflow-scrolling: touch; /* Плавний скрол на iOS */
    }
    .sidebar-content .filter-group { padding: 15px 0; } /* Вертикальні відступи всередині */
    .sidebar-content .filter-group:first-child { padding-top: 0; }
    .sidebar-content .filter-group:last-of-type { border-bottom: none; padding-bottom: 10px;}

    /* **ФІКС КНОПКИ APPLY:** */
    .filter-actions {
        flex-shrink: 0; /* Кнопка не стискається */
        padding: 15px 20px; /* Відступи навколо кнопки */
        border-top: 1px solid var(--border-color); /* Лінія над кнопкою */
        background: var(--card-bg); /* Фон, щоб контент не просвічував */
        margin-top: 0; /* Скидаємо зовнішній відступ */
    }
}
@media (max-width: 390px) {
    .sidebar-header { padding: 15px; }
    .sidebar-content { padding: 15px; }
    .filter-actions { padding: 15px; }
}

/* --- Інші фікси --- */
.price-filter-inputs span { color: var(--text-muted); padding: 0 5px; } /* Додано клас та відступи для тире */
/* Стилі для .active-filter-tag, .reset-filters-btn, .pagination залишаються як були */

/* ======== CATALOG PAGE - FINAL PERFECTIONIST V3 (MOBILE FIRST) [ВИПРАВЛЕНО] ======== */

/* --- Виправлення структури тулбару --- */
.catalog-toolbar--with-search {
    display: grid;
    /* Оновлена сітка для мобільних пристроїв */
    grid-template-areas:
        "left"
        "center"
        "right";
    gap: 15px; /* Єдиний відступ */
    align-items: center;
    margin-bottom: 35px;
}

/* 1. Пошук (залишається як є) */
.catalog-toolbar__left { grid-area: left; }
.catalog-search { position: relative; width: 100%; }
.search-input {
    padding-right: 45px;
    background-color: var(--card-bg);
    border-color: var(--border-color);
}
.search-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    padding: 8px 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}
.search-button:hover { color: var(--primary-color); }

/* 2. "Фільтри" та "Знайдено" (використовуємо flex для вирівнювання) */
.catalog-toolbar__center {
    grid-area: center;
    display: flex;
    align-items: center;
    justify-content: space-between; /* <-- Головний фікс */
    gap: 15px;
}
.btn-filter-toggle {
    display: inline-flex;
    width: auto;
    padding: 10px 15px;
    font-size: 0.9rem;
}
.filter-count-badge {
    font-weight: 600;
    color: var(--primary-color);
    margin-left: 5px;
    display: none; /* JS покаже */
}
.catalog-product-count {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: right; /* Вирівнювання тексту */
}

/* 3. "Вид" та "Сортування" (також використовуємо flex) */
.catalog-toolbar__right {
    grid-area: right;
    display: flex;
    align-items: center;
    justify-content: space-between; /* <-- Головний фікс */
    gap: 15px;
}

/* --- Адаптивність тулбару --- */

/* Планшети */
@media (min-width: 768px) {
    .catalog-toolbar--with-search {
        /* Дві колонки: Пошук | Центр і Праворуч */
        grid-template-areas:
            "left left"
            "center right";
        grid-template-columns: 1fr auto; /* Пошук займає вільне місце */
        gap: 20px 25px;
    }
    .catalog-toolbar__right {
        justify-content: flex-end; /* Кнопки справа */
        gap: 20px; /* Збільшуємо відступ */
    }
}

/* Десктоп (як на вашому скріншоті) */
@media (min-width: 992px) {
    .catalog-toolbar--with-search {
        /* Одна лінія: [Знайдено] [Пошук] [Вид + Сортування] */
        grid-template-areas: "center left right";
        grid-template-columns: auto 1fr auto; /* [auto] [1fr] [auto] */
        gap: 15px 30px;
    }

    .catalog-toolbar__center {
        justify-content: flex-start; /* "Знайдено" зліва */
    }
    .btn-filter-toggle {
        display: none; /* Ховаємо кнопку "Фільтри" на десктопі */
    }

    .catalog-toolbar__right {
        justify-content: flex-end;
        gap: 20px;
    }
}

/* ======== ПОКРАЩЕННЯ ПАНЕЛІ ФІЛЬТРІВ (ТІЛЬКИ ДЛЯ МОБІЛЬНИХ) ======== */

@media (max-width: 767px) {

    /* 1. Перетворюємо весь тулбар на єдину "картку" */
    .catalog-toolbar--with-search {
        background: var(--card-bg); /* Фон як у картки товару */
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: 15px; /* Внутрішні відступи */
        gap: 15px; /* Відступ між трьома grid-рядами (пошук, центр, сортування) */
        margin-bottom: 30px;
    }

    /* 2. Пошук (ряд "left") - робимо поле пошуку контрастнішим */
    .catalog-search .search-input {
        background-color: var(--dark-bg); /* Темніший фон, щоб контрастувати з карткою */
    }

    /* 3. Ряд "center" (Фільтри + Знайдено) - групуємо їх разом */
    .catalog-toolbar__center {
        display: flex;
        flex-direction: column; /* Ставимо елементи один під одним */
        align-items: center; /* Вирівнюємо по центру */
        gap: 10px; /* Відступ між кнопкою та текстом */
    }

    .btn-filter-toggle {
        width: 100%; /* Кнопка "ФІЛЬТРИ" на всю ширину */
        justify-content: center; /* Текст кнопки по центру */
        font-size: 1rem; /* Більший шрифт */
        padding: 12px;
        background-color: var(--primary-color); /* Робимо її головною */
        color: #fff;
        border: none;
    }

    .catalog-product-count {
        width: 100%; /* Текст "Знайдено" теж на 100% */
        text-align: center; /* І центруємо його */
    }

    /* 4. Ряд "right" (Сортування) */
    .catalog-toolbar__right {
        display: block; /* Скидаємо flex, щоб сортування було на 100% */
    }

    .catalog-sorting {
        width: 100%; /* Сортування на всю ширину */
    }

    .catalog-sorting .form-select {
        width: 100%;
    }

    /* Ховаємо label, він не потрібен на мобільному */
    .catalog-sorting label {
         display: none;
    }
}

/* ======== ФІНАЛЬНЕ ПОЛІРУВАННЯ КАТАЛОГУ (MOBILE-ONLY) ======== */

@media (max-width: 767px) {

    /* --- 1. Полірування верхньої "картки" керування --- */

    /* Робимо картку ще чистішою: прибираємо зайві відступи між рядами */
    .catalog-toolbar--with-search {
        gap: 12px; /* Трохи менше місця між пошуком, фільтрами та сортуванням */
        padding: 12px;
    }

    /* Ряд "center" (Фільтри + Знайдено) - робимо з них сітку 50/50 */
    .catalog-toolbar__center {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Дві колонки однакової ширини */
        gap: 10px;
        align-items: center; /* Вирівнюємо по центру вертикально */

        /* Скидаємо старі стилі, якщо вони є */
        flex-direction: row;
    }

    /* Кнопка "ФІЛЬТРИ" тепер займає першу колонку */
    .btn-filter-toggle {
        width: 100%; /* На 100% своєї колонки */
        background-color: var(--dark-bg); /* Повертаємо стильний темний фон */
        color: var(--text-color-primary);
        border: 1px solid var(--border-color);
        font-size: 0.95rem;
    }

    .btn-filter-toggle:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

    /* Текст "Знайдено" займає другу колонку */
    .catalog-product-count {
        width: 100%; /* На 100% своєї колонки */
        text-align: right; /* Вирівнюємо по правому краю (виглядає чистіше) */
        font-size: 0.9rem;
        color: var(--text-muted);
    }

    /* Ряд "right" (Сортування) - просто прибираємо зайвий відступ зверху */
    .catalog-toolbar__right {
        padding-top: 5px; /* Невеликий відступ, щоб візуально відокремити сортування */
        border-top: 1px solid var(--border-color); /* Лінія-роздільник */
    }

    /* --- 2. Полірування карток товару (Ваше прохання) --- */

    /* Ми не додаємо нову рамку, а робимо існуючу помітнішою
       і гарантуємо наявність тіні */
    .catalog-product-list .product-list-item {
        /* Робимо рамку трішки світлішою, щоб вона була помітна на темному фоні */
        border: 1px solid rgba(108, 117, 125, 0.25);

        /* Гарантуємо, що тінь (яка вже є в :root) застосовується */
        box-shadow: var(--shadow);

        /* Плавний перехід для будь-яких дій */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* Додамо легкий ефект при натисканні на картку на мобільному */
    .catalog-product-list .product-list-item:active {
        transform: scale(0.98);
        box-shadow: none; /* Ховаємо тінь при натисканні */
    }
}
/* ======== ФІНАЛЬНЕ ПОЛІРУВАННЯ КАТАЛОГУ (MOBILE-ONLY) v2 ======== */

@media (max-width: 767px) {

    /* --- 1. Полірування верхньої "картки" керування --- */

    .catalog-toolbar--with-search {
        gap: 12px;
        padding: 12px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 30px;
    }

    .catalog-search .search-input {
        background-color: var(--dark-bg);
    }

    /* === ОСНОВНЕ ВИПРАВЛЕННЯ ТУТ === */
    /* Ряд "center" (Фільтри + Знайдено) - тепер на одній лінії */
    .catalog-toolbar__center {
        display: flex; /* Використовуємо flex */
        flex-direction: row; /* В один ряд */
        justify-content: space-between; /* Розносимо по краях */
        align-items: center; /* Вирівнюємо по центру */
        gap: 10px;

        /* Скидаємо grid, якщо він був */
        display: flex;
    }

    /* Кнопка "ФІЛЬТРИ" - займає авто-ширину */
    .btn-filter-toggle {
        width: auto; /* Ширина по контенту */
        background-color: var(--dark-bg);
        color: var(--text-color-primary);
        border: 1px solid var(--border-color);
        font-size: 0.95rem;
        padding: 10px 15px; /* Комфортний падінг */
    }

    .btn-filter-toggle:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

    /* Текст "Знайдено" - займає авто-ширину */
    .catalog-product-count {
        width: auto; /* Ширина по контенту */
        text-align: right; /* Вирівнювання по правому краю */
        font-size: 0.9rem;
        color: var(--text-muted);
        flex-shrink: 0; /* Забороняємо тексту стискатися */
    }
    /* === КІНЕЦЬ ОСНОВНОГО ВИПРАВЛЕННЯ === */


    /* Ряд "right" (Сортування) - залишаємо, як є */
    .catalog-toolbar__right {
        padding-top: 5px;
        border-top: 1px solid var(--border-color);
    }

    /* --- 2. Полірування карток товару (Залишаємо) --- */

    .catalog-product-list .product-list-item {
        border: 1px solid rgba(108, 117, 125, 0.25);
        box-shadow: var(--shadow);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .catalog-product-list .product-list-item:active {
        transform: scale(0.98);
        box-shadow: none;
    }
}

/* ======== "ІДЕАЛЬНА" СТОРІНКА ТОВАРУ (Полірування) ======== */

/* 1. Анімація плавного завантаження сторінки */
@keyframes fadeInOnLoad {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Застосовуємо анімацію до головних блоків з затримкою */
.product-gallery-final,
.product-info-final,
.product-tabs-final {
    animation: fadeInOnLoad 0.6s ease-out backwards;
}

.product-info-final { animation-delay: 0.1s; }
.product-tabs-final { animation-delay: 0.2s; }


/* 2. "Картка" для всієї інформаційної колонки */
.product-info-final {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: var(--shadow);
}

/* 3. Прибираємо стиль "картка-в-картці" з блоку CTA */
.product-actions-final {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 15px 0; /* Змінюємо падінг, щоб він був тільки зверху/знизу */
    margin-bottom: 15px;
}

/* 4. Додаємо преміальний hover-ефект кнопкам CTA */
.product-actions-final .btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 5. Анімація для Плавних Табів */
.tabs-content-final .tab-pane {
    display: block; /* Має бути block, щоб opacity працював */
    opacity: 0;
    max-height: 0; /* Анімуємо висоту для плавного "випадання" */
    transform: translateY(10px);
    overflow: hidden;
    transition: opacity 0.4s ease-out, max-height 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s;
    visibility: hidden; /* Ховаємо повністю, коли не активний */
}

.tabs-content-final .tab-pane.active {
    opacity: 1;
    max-height: 5000px; /* Велика висота, щоб вміст вліз */
    transform: translateY(0);
    visibility: visible;
    overflow: visible; /* Показуємо контент */
}

/* 6. Анімація для Плавної Галереї */
#main-product-image {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}
/* Клас, який ми будемо додавати через JS */
#main-product-image.fading-out {
    opacity: 0;
}

/* ======== "ІДЕАЛЬНА" СТОРІНКА ТОВАРУ (Фінальне полірування) ======== */

/* 1. Рамка/фон для мініатюр (Ваше прохання) */
.product-gallery__thumbs-final {
    background: var(--card-bg); /* Фон, як у картки */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px; /* Внутрішні відступи для "рамки" */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Легка тінь */
}

/* 2. Преміальний вигляд "Ключових параметрів" */
.product-key-specs--final {
    margin: 20px 0;
    padding: 25px 0;
}
.product-key-specs--final ul {
    /* Перетворюємо на сітку "таблеток" */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Адаптивні колонки */
    gap: 10px; /* Відступ між "таблетками" */
}

.product-key-specs--final li {
    background: var(--dark-bg); /* Фон "таблетки" */
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Скруглення */
    padding: 10px 12px; /* Внутрішні відступи */
    gap: 12px;
    font-size: 0.9rem; /* Трохи менший шрифт для компактності */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-key-specs--final li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border-color: var(--primary-color);
}

.product-key-specs--final li i {
    font-size: 1em; /* Іконка в розмір тексту */
}

.product-key-specs--final li span {
    line-height: 1.5;
}

/* 3. Покращена читабельність опису та ціни */
.product-short-description-final {
    font-size: 1.05rem; /* Трохи більший шрифт */
    line-height: 1.8; /* Більший міжрядковий інтервал */
    color: var(--text-color-primary); /* Робимо текст яскравішим */
    margin-bottom: 25px;
}

.product-price-final {
    font-size: 3rem; /* Збільшуємо ціну */
    /* Легка тінь, щоб "відірвати" ціну від фону */
    text-shadow: 0 0 15px rgba(0, 174, 239, 0.3);
}

/* 4. Полірування "хлібних крихт" */
.breadcrumbs {
    margin-bottom: 25px;
    font-size: 0.95rem; /* Трохи більші */
}
.breadcrumbs li:not(:last-child)::after {
    margin: 0 12px; /* Більше "повітря" */
}

/* 5. Полірування блоку "Довіри" */
.product-trust-final .trust-item {
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 15px;
    transition: border-color 0.3s ease;
}
.product-trust-final .trust-item:hover {
    border-color: var(--primary-color);
}

/* Застосовуємо анімацію до головних блоків з затримкою */
.product-detail-left-col, /* ОНОВЛЕНО */
.product-info-final,
.product-tabs-final {
    animation: fadeInOnLoad 0.6s ease-out backwards;
}
/* ======== "ІДЕАЛЬНА" СТОРІНКА ТОВАРУ (Блок Кредиту) ======== */

/* 1. Обгортка для лівої колонки */
.product-detail-left-col {
    /* Цей блок групує галерею та кредит */
    display: flex;
    flex-direction: column;
    gap: 25px; /* Відступ між галереєю та блоком кредиту */
}

/* 2. Новий блок про кредит */
.product-installment-info {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--shadow);
    text-align: center;
    /* Анімація появи буде успадкована від .product-detail-left-col */
}

.installment-info-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color-secondary);
    margin-bottom: 10px;
}

.installment-info-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 300px; /* Обмежуємо ширину тексту */
    margin-left: auto;
    margin-right: auto;
}

.installment-info-logos {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.installment-info-logos img {
    height: 35px; /* Висота лого */
    max-width: 110px;
    filter: grayscale(100%) brightness(1.5);
    opacity: 0.7;
}

/* 3. Оновлення сітки (для вирівнювання колонок) */
@media (min-width: 768px) {
    .product-detail-main-final {
        /* Вирівнюємо колонки по верху */
        align-items: flex-start;
    }
}

/* --- Адаптивність (Планшет min-width: 768px) --- */
@media (min-width: 768px) {
    .product-detail-main-final {
        /* **ОНОВЛЕНО:** Використовуємо grid-areas для керування 2-колонковим лейаутом */
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        grid-template-areas:
            "gallery info"
            "credit  info"; /* "credit" займе місце під "gallery", "info" розтягнеться */
        gap: 40px 40px;
        align-items: flex-start;
    }

    /* **НОВЕ:** Призначаємо "території" нашим блокам */
    .product-gallery-final {
        grid-area: gallery;
    }

    .product-info-final {
        grid-area: info;
    }

    .product-installment-info {
        grid-area: credit;
    }
}

/* Застосовуємо анімацію до головних блоків з затримкою */
.product-gallery-final,
.product-info-final,
.product-installment-info,
.product-tabs-final {
    animation: fadeInOnLoad 0.6s ease-out backwards;
}

.product-info-final { animation-delay: 0.1s; }
.product-installment-info { animation-delay: 0.2s; } /* Новий блок */
.product-tabs-final { animation-delay: 0.3s; }

#filter-toggle {
    background-color: #00AEEF;
}

/* 1. ФІКС ДЛЯ ОСНОВНИХ БЛОКІВ, ЩО ПОВИННІ БУТИ НА ПОВНИЙ ЕКРАН */
/* Наприклад, Hero, Preloader, Mobile Nav */
@supports (height: 100svh) {
    .preloader,
    .hero-main {
        height: 100svh;
    }
}

/* 2. ФІКС ДЛЯ "ПЛАВАЮЧОГО" CTA */
/* Елементи з position: fixed/sticky, які прив'язані до низу екрану (наприклад, sticky-cta),
   потрібно фіксувати до viewport bottom, а не до html/body bottom.
   Цей фікс допомагає мінімізувати "стрибок".
*/
/* 2. ФІКС ДЛЯ "ПЛАВАЮЧОГО" CTA */
@media (max-width: 992px) {
    .sticky-cta {
        bottom: 0 !important;
    }

    .catalog-sidebar {
        height: 100svh;
    }
}


/* 3. ФІКС ДЛЯ ОБМЕЖЕННЯ СКРОЛУ (Коли мобільне меню відкрите) */
@supports (height: 100svh) {
    body.nav-open {
        height: 100svh;
        max-height: 100svh;
    }
    body.sidebar-open {
        height: 100svh;
        max-height: 100svh;
    }
}

/* =================================================================== */
/* ======== 🚀 ОНОВЛЕННЯ СТОРІНКИ КАТАЛОГУ (UX + UI FIX) ======== */
/* =================================================================== */

/* --- 1. Нова секція вибору категорій --- */
.catalog-category-section {
    background-color: var(--dark-bg); /* Тло, як у секцій */
}

/* Сітка категорій */
.catalog-category-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 колонка на мобільному */
    gap: 20px;
}

/* Новий дизайн картки категорії */
.catalog-category-card {
    display: flex;
    align-items: center; /* Іконка та текст на одній лінії */
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.catalog-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    border-color: var(--primary-color);
}

/* Іконка картки */
.catalog-category-card__icon {
    flex-shrink: 0;
    font-size: 2.2rem;
    color: var(--primary-color);
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    background-color: rgba(0, 174, 239, 0.1);
    border-radius: 50%;
}

/* Інфо-блок картки */
.catalog-category-card__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.catalog-category-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color-secondary);
    line-height: 1.3;
}

.catalog-category-card__cta {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.catalog-category-card__cta i {
    transition: transform 0.3s ease;
}

.catalog-category-card:hover .catalog-category-card__cta {
    color: var(--primary-color);
}
.catalog-category-card:hover .catalog-category-card__cta i {
    transform: translateX(4px);
}

/* --- 2. Виправлення висоти заголовка (Page Header) на мобільних --- */
@media (max-width: 767px) {
    /* Застосовуємо ці стилі ТІЛЬКИ до .page-header,
      який знаходиться всередині нашої нової обгортки
    */
    .catalog-page-wrapper .page-header {
        padding: 85px 0 25px 0; /* Зменшено відступи (було 120px/40px) */
    }
    .catalog-page-wrapper .page-title {
        font-size: 2.0rem; /* Зменшено заголовок (було 2.2rem) */
        margin-bottom: 8px;
    }
    .catalog-page-wrapper .breadcrumbs {
        margin-top: 15px; /* Зменшено відступ над крихтами */
    }
}

/* --- 3. Адаптивність сітки категорій --- */
@media (min-width: 768px) {
    .catalog-category-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшеті */
        gap: 25px;
    }
    .catalog-category-card__icon {
        font-size: 2.5rem;
    }
    .catalog-category-card__title {
        font-size: 1.5rem;
    }
}

@media (min-width: 992px) {
    .catalog-category-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки на десктопі */
    }
}

/* --- Brands Section --- */
.brands-grid {
    gap: 25px; /* Менший відступ */
}
.brand-logo img {
    max-width: 140px; /* Трохи менші лого */
    opacity: 1; /* 🚀 ЗАВЖДИ НЕПРОЗОРІ (КОЛЬОРОВІ) */
    filter: none; /* 🚀 ПРИБИРАЄМО ФІЛЬТР */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Додаємо transform */
}
.brand-logo:hover img {
    opacity: 0.85; /* Легкий ефект приглушення при наведенні */
    transform: scale(1.03); /* Трохи збільшуємо */
}

/* =================================================================== */
/* ======== 🚀 ОНОВЛЕННЯ СТОРІНКИ "ПРО НАС" (КОМАНДА + ЛЕГАЛЬНІСТЬ) ======== */
/* =================================================================== */

/* --- 1. Нова сітка контактів (замість team-grid) --- */
.team-contact-grid {
    display: grid;
    /* Адаптивна сітка: 1-2-4 колонки */
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 10px;
}

.team-contact-card {
    display: flex;
    align-items: center; /* Іконка та текст по центру */
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.team-contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    border-color: var(--primary-color);
}

.team-contact-card__icon {
    flex-shrink: 0;
    font-size: 2.2rem;
    color: var(--primary-color);
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    background-color: rgba(0, 174, 239, 0.1);
    border-radius: 50%;
}

.team-contact-card__info {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Дуже компактні відступи */
}

.team-contact-card__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted); /* Сірий підпис */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.team-contact-card__name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color-secondary);
    line-height: 1.3;
}

.team-contact-card__phone {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color-primary); /* Світлий, але не білий */
    transition: color 0.3s ease;
}
.team-contact-card__phone:hover {
    color: var(--primary-color);
}

/* --- 2. Нова картка з легальною інформацією --- */
.legal-info-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 40px auto 0; /* Відступ зверху */
    max-width: 900px; /* Та сама ширина, що й у сертифікатів */
    box-shadow: var(--shadow);
}

.legal-info-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color-secondary);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}
.legal-info-card__title i {
    color: var(--primary-color);
}

.legal-info-list {
    list-style: none;
    padding-left: 0;
}

.legal-info-list li {
    display: grid;
    grid-template-columns: 1fr; /* 1 колонка на моб */
    gap: 5px; /* Відступ між "Назва:" та "ФОП..." */
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-color-primary);
    margin-bottom: 15px;
}

.legal-info-list li:last-child {
    margin-bottom: 0;
}

.legal-info-list li strong {
    font-weight: 600;
    color: var(--text-muted); /* Сірий заголовок */
}
.legal-info-list li span {
    word-break: break-word; /* Перенос довгих слів */
}

/* --- 3. Адаптивність нових блоків --- */
@media (min-width: 576px) {
    .team-contact-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    }
}

@media (min-width: 768px) {
    .legal-info-list li {
        /* 2 колонки на планшеті/десктопі */
        grid-template-columns: 200px 1fr;
        gap: 15px;
    }
    .legal-info-list li strong {
        text-align: right; /* Вирівнювання по правому краю */
    }
}

@media (min-width: 992px) {
    .team-contact-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 колонки */
        gap: 25px;
    }
    .team-contact-card {
        padding: 25px 20px;
    }
    .legal-info-card {
        padding: 40px;
    }
}

/* =================================================================== */
/* ======== 🚀 FIX: ДОДАТКОВІ ФОТО В ГАЛЕРЕЇ (PRODUCT DETAIL) ======== */
/* =================================================================== */

/* 1. Робимо контейнер мініатюри 'relative',
      щоб оверлей міг позиціонуватися всередині нього.
*/
.thumb-item-final {
    position: relative;
    /* Інші стилі .thumb-item-final (border, cursor, etc.) вже існують */
}

/* 2. Стилі для самого оверлея (+N) */
.thumb-more-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Темний, напівпрозорий фон */
    background-color: rgba(18, 27, 40, 0.85);

    /* Вирівнюємо текст (+N) по центру */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Стилі тексту */
    color: #fff;
    font-size: 1.5rem; /* Великий, помітний шрифт */
    font-weight: 700;

    /* Анімація появи */
    opacity: 0;
    transition: opacity 0.3s ease;

    /* Це гарантує, що оверлей не "зламає" клік */
    pointer-events: none;

    /* Заокруглення, як у батька */
    border-radius: 4px;
}

/* 3. Показуємо оверлей, коли мініатюра неактивна */
/* Якщо 5-та мініатюра НЕ активна - показуємо оверлей */
.thumb-item-final:not(.active) .thumb-more-overlay {
    opacity: 1;
}

/* 4. При наведенні на 5-ту мініатюру - також показуємо оверлей */
.thumb-item-final:hover .thumb-more-overlay {
    opacity: 1;
}

/* 5. Якщо 5-та мініатюра активна - приховуємо оверлей,
      щоб користувач бачив, що він дивиться 5-те фото.
*/
.thumb-item-final.active .thumb-more-overlay {
    opacity: 0;
}

/* =================================================================== */
/* ======== 🚀 БЛОК ПОКРАЩЕННЯ ПЛАВНОСТІ (MOBILE SMOOTHNESS) ======== */
/* =================================================================== */

html, body {
    /* Допомагає браузеру оптимізувати рендеринг */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 1. Прибираємо сірий спалах при торканні на iOS/Android.
     Це робить кнопки та посилання "чистішими" на дотик.
*/
body, a, button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

/* 2. Вмикаємо "інерційний" скролінг для iOS (Safari).
     Скролінг стає більш плавним і природним, як в нативних додатках.
*/
body,
.sidebar-content { /* Додаємо також до сайдбару фільтрів */
    -webkit-overflow-scrolling: touch;
}

/* 3. Допомагаємо браузеру зрозуміти, які елементи будуть
     анімуватися (transform, opacity). Це зменшує "фризи"
     перед початком анімації.
*/
.anim-on-scroll,
.btn,
.product-card,
.product-list-item,
.thumb-item-final,
#main-product-image,
.header {
    /* Підказуємо браузеру, що ці елементи будуть змінюватись */
    will-change: transform, opacity;
}

/* 4. Прибираємо затримку 300мс на клік (для старих мобільних браузерів).
     Робить сайт миттєво чутливим до натискання.
*/
a, button {
    touch-action: manipulation;
}

/* =================================================================== */
/* ======== 🚀 ОНОВЛЕННЯ СТОРІНКИ КАТАЛОГУ (UX + UI FIX v2) ======== */
/* =================================================================== */

/* --- 1. Нова секція вибору категорій --- */
.catalog-category-section {
    background-color: var(--dark-bg); /* Тло, як у секцій */
}

/* Сітка категорій (Враховано ваші побажання) */
.catalog-category-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 колонка на мобільному (за вашим проханням) */
    gap: 20px;
}

/* Новий дизайн картки категорії (тепер це "коробка") */
.catalog-category-card {
    display: flex; /* Використовуємо flex... */
    flex-direction: column; /* ...але вертикальний! */
    align-items: center; /* Центруємо все по горизонталі */
    text-align: center; /* Центруємо текст */
    gap: 15px; /* Відступ між іконкою та інфо-блоком */

    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 30px 25px; /* Комфортні відступи */
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.catalog-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    border-color: var(--primary-color);
}

/* Іконка картки */
.catalog-category-card__icon {
    flex-shrink: 0;
    font-size: 2.5rem; /* Зробили іконку більшою */
    color: var(--primary-color);
    width: 70px; /* Збільшили розмір */
    height: 70px;
    display: grid;
    place-items: center;
    background-color: rgba(0, 174, 239, 0.1);
    border-radius: 50%;
}

/* Інфо-блок картки */
.catalog-category-card__info {
    display: flex;
    flex-direction: column;
    align-items: center; /* Гарантуємо центрування */
    gap: 8px; /* Відступ між заголовком та CTA */
}

.catalog-category-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color-secondary);
    line-height: 1.3;
}

.catalog-category-card__cta {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.catalog-category-card__cta i {
    transition: transform 0.3s ease;
}

.catalog-category-card:hover .catalog-category-card__cta {
    color: var(--primary-color);
}
.catalog-category-card:hover .catalog-category-card__cta i {
    transform: translateX(4px);
}

/* --- 2. Виправлення висоти заголовка (Page Header) на мобільних --- */
@media (max-width: 767px) {
    /* Застосовуємо ці стилі ТІЛЬКИ до .page-header,
      який знаходиться всередині нашої нової обгортки
    */
    .catalog-page-wrapper .page-header {
        padding: 85px 0 25px 0; /* Зменшено відступи (було 120px/40px) */
    }
    .catalog-page-wrapper .page-title {
        font-size: 2.0rem; /* Зменшено заголовок (було 2.2rem) */
        margin-bottom: 8px;
    }
    .catalog-page-wrapper .breadcrumbs {
        margin-top: 15px; /* Зменшено відступ над крихтами */
    }
}

/* --- 3. Адаптивність сітки категорій (Враховано ваші побажання) --- */
@media (min-width: 768px) {
    .catalog-category-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшеті */
        gap: 25px;
    }
}

@media (min-width: 992px) {
    .catalog-category-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки на десктопі (за вашим проханням) */
    }
}
/* =================================================================== */
/* ======== 🚀 ОНОВЛЕННЯ СТОРІНКИ КАТАЛОГУ (UX + UI FIX v3) ======== */
/* =================================================================== */

/* --- 1. Секція вибору категорій --- */
.catalog-category-section {
    background-color: var(--dark-bg);
}

/* --- 2. СІТКА КАТЕГОРІЙ (Ваш запит) --- */
.catalog-category-grid {
    display: grid;
    /* 1 КОЛОНКА НА ТЕЛЕФОНІ (за вашим проханням) */
    grid-template-columns: 1fr;
    gap: 20px;
}

/* --- 3. ДИЗАЙН КАРТКИ (Ваш запит "в рамочках") --- */
.catalog-category-card {
    display: flex;
    flex-direction: column; /* Іконка зверху, текст знизу */
    align-items: center; /* Центрування */
    text-align: center;
    gap: 15px;

    background: var(--card-bg); /* Ось "рамочка" / фон картки */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 30px 25px; /* Внутрішні відступи */
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.catalog-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    border-color: var(--primary-color);
}

/* Іконка */
.catalog-category-card__icon {
    flex-shrink: 0;
    font-size: 2.5rem;
    color: var(--primary-color);
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    background-color: rgba(0, 174, 239, 0.1);
    border-radius: 50%;
}

/* Текст */
.catalog-category-card__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.catalog-category-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color-secondary);
    line-height: 1.3;
}

.catalog-category-card__cta {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.catalog-category-card__cta i {
    transition: transform 0.3s ease;
}

.catalog-category-card:hover .catalog-category-card__cta {
    color: var(--primary-color);
}
.catalog-category-card:hover .catalog-category-card__cta i {
    transform: translateX(4px);
}


/* --- 4. АДАПТИВНІСТЬ СІТКИ (Ваш запит) --- */

/* Планшети: 2 колонки */
@media (min-width: 768px) {
    .catalog-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* Десктоп: 3 КОЛОНКИ (за вашим проханням) */
@media (min-width: 992px) {
    .catalog-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- 5. ФІКС ВІДСТУПІВ (з минулого кроку, залишаємо) --- */
@media (max-width: 767px) {
    .catalog-page-wrapper .page-header {
        padding: 85px 0 25px 0;
    }
    .catalog-page-wrapper .page-title {
        font-size: 2.0rem;
        margin-bottom: 8px;
    }
    .catalog-page-wrapper .breadcrumbs {
        margin-top: 15px;
    }
}

/* =================================================================== */
/* ======== 🚀 FIX: ДОДАТКОВІ ФОТО В ГАЛЕРЕЇ (PRODUCT DETAIL) ======== */
/* =================================================================== */

.thumb-item-final {
    position: relative;
}

.thumb-more-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 27, 40, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 4px;
}

/* Показуємо оверлей, якщо мініатюра неактивна */
.thumb-item-final:not(.active) .thumb-more-overlay {
    opacity: 1;
}
/* ...або якщо на неї навели */
.thumb-item-final:hover .thumb-more-overlay {
    opacity: 1;
}
/* Ховаємо, якщо вона стає активною */
.thumb-item-final.active .thumb-more-overlay {
    opacity: 0;
}
.hero-main__content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    text-align: center; /* 🚀 ВИПРАВЛЕНО: Центруємо текст і кнопку */
    margin: 0 auto; /* 🚀 ДОДАНО: Центруємо сам блок */
}
/* ===================================================================
  ======== 🚀 ФИКС ЦЕНТРИРОВАНИЯ HERO (Главная страница) ========
  ===================================================================
*/

/* 1. Центрируем сам блок .hero-main__content и текст в нем.
      Это исправит "уезжание" влево.
*/
.hero-main__content {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hero-main__title {
    font-size: 2.9rem; /* Уменьшили (было 4rem) */
    line-height: 1.35; /* Сделали строки чуть ближе */
    margin-bottom: 25px; /* Уменьшили отступ */
}
/* 2. Уменьшаем текст на мобильных (< 768px),
      чтобы кнопке "хватало места", как вы и сказали.
*/
@media (max-width: 768px) {
    .hero-main__title {
        font-size: 1.5rem; /* Фиксированный размер для мобильных */
        line-height: 1.3;
    }

    .hero-main__subtitle {
        font-size: 1.05rem; /* Уменьшаем подзаголовок */
        line-height: 1.6;
    }
}
.nav-icon-btn {
    display: none !important;
}
/* ===================================================================
  ======== 🚀 РЕДИЗАЙН БЛОКА ФИЛЬТРОВ (MOBILE) ========
  ===================================================================
*/

@media (max-width: 767px) {

    /* 1. Делаем саму "карточку" чище и добавляем "воздуха" */
    .catalog-toolbar--with-search {
        padding: 15px; /* Было 12px */
        gap: 15px; /* Было 12px */
    }

    /* 2. Поле Поиска (на 100% ширины) */
    .catalog-search .search-input {
        width: 100%;
        font-size: 1rem; /* Увеличиваем шрифт */
        padding: 12px 45px 12px 15px; /* Делаем поле "глубже" */
    }

    /* 3. Ряд "Фильтры" + "Найдено" */
    /* Делаем кнопку "Фильтры" более заметной */
    .btn-filter-toggle {
        padding: 12px 18px; /* Увеличиваем кнопку */
        font-size: 1rem;
        background-color: var(--primary-color); /* Делаем ее главной */
        color: #fff;
        border: none;
        border-radius: 8px; /* Добавляем скругление */
    }

    .btn-filter-toggle:hover {
        background-color: var(--primary-hover);
        color: #fff;
    }

    /* Делаем текст "Найдено" более читаемым */
    .catalog-product-count {
        font-size: 0.95rem;
        color: var(--text-color-primary); /* Делаем светлее */
    }

    /* 4. Ряд "Сортировка" (Главный фикс "не до конца") */
    .catalog-toolbar__right {
        padding-top: 15px; /* Увеличиваем отступ */
    }

    .catalog-sorting {
        width: 100%; /* Растягиваем обертку сортировки */
    }

    .catalog-sorting .form-select {
        width: 100%; /* Растягиваем сам select */
        font-size: 1rem; /* Увеличиваем шрифт */
        padding: 12px 15px; /* Делаем поле "глубже" */
        background-color: var(--dark-bg); /* Тот же фон, что и у поиска */
    }
}
/* ===================================================================
  ======== 🚀 РЕДИЗАЙН БЛОКА ФИЛЬТРОВ (MOBILE) ========
  ===================================================================
*/

@media (max-width: 767px) {

    /* 1. Убираем фон "карточки" с тулбара.
       Теперь он просто контейнер для элементов. */
    .catalog-toolbar--with-search {
        background: none;
        border: none;
        border-radius: 0;
        padding: 0; /* Убираем внутренний отступ */
        gap: 20px; /* Увеличиваем расстояние между блоками */
    }

    /* 2. Стилизуем Поле Поиска (Крупное и на 100%) */
    .catalog-search .search-input {
        width: 100%;
        font-size: 1.05rem; /* Крупнее шрифт */
        padding: 13px 45px 13px 15px;
        background-color: var(--card-bg); /* Возвращаем фон */
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius); /* Добавляем скругление */
    }

    /* 3. Ряд "Фильтры" + "Найдено" (Редизайн) */
    .catalog-toolbar__center {
        display: flex;
        flex-direction: column; /* Ставим друг под другом */
        align-items: flex-start; /* Выравниваем по левому краю */
        gap: 10px; /* Отступ между кнопкой и текстом */
    }

    /* Кнопка "Фильтры" - делаем ее главной и на 100% */
    .btn-filter-toggle {
        width: 100%; /* НА ВСЮ ШИРИНУ */
        justify-content: center; /* Текст по центру */
        font-size: 1.05rem;
        padding: 13px;
        background-color: var(--primary-color);
        color: #fff;
        border: none;
        border-radius: var(--border-radius);
    }

    .btn-filter-toggle:hover {
        background-color: var(--primary-hover);
        color: #fff;
    }

    /* Текст "Найдено" - теперь под кнопкой */
    .catalog-product-count {
        width: 100%;
        text-align: center; /* Центрируем под кнопкой */
        font-size: 0.95rem;
        color: var(--text-muted);
    }

    /* 4. Ряд "Сортировка" (Крупный и на 100%) */
    .catalog-toolbar__right {
        padding-top: 0; /* Убираем разделитель */
        border-top: none;
    }

    .catalog-sorting {
        width: 100%;
    }

    /* Стилизуем Выпадающий список */
    .catalog-sorting .form-select {
        width: 100%;
        font-size: 1.05rem;
        padding: 13px 15px;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
    }
}

/* ===================================================================
  ======== 🚀 ОКОНЧАТЕЛЬНЫЙ ФИКС ФИЛЬТРОВ (MOBILE) ========
  ===================================================================
*/

@media (max-width: 767px) {

    /* 1. "УБИВАЕМ" ВНУТРЕННЮЮ КАРТОЧКУ:
       Убираем ее фон, рамку и, ГЛАВНОЕ, отступы. */
    .catalog-toolbar--with-search {
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important; /* <--- ЭТО ГЛАВНЫЙ ФИКС */
        gap: 20px !important;
    }

    /* 2. Растягиваем Поле Поиска на 100% */
    .catalog-search .search-input {
        width: 100% !important;
        font-size: 1.05rem;
        padding: 13px 45px 13px 15px;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
    }

    /* 3. Кнопка "Фильтры" на 100% */
    .btn-filter-toggle {
        width: 100% !important;
        justify-content: center;
        font-size: 1.05rem;
        padding: 13px;
        background-color: var(--primary-color);
        color: #fff;
        border: none;
        border-radius: var(--border-radius);
    }

    /* 4. Блок "Найдено" (под кнопкой) */
    .catalog-toolbar__center {
        gap: 10px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .catalog-product-count {
        width: 100%;
        text-align: center;
        font-size: 0.95rem;
        color: var(--text-muted);
    }

    /* 5. "Сортировка" на 100% */
    .catalog-toolbar__right {
        padding-top: 0 !important;
        border-top: none !important;
    }
    .catalog-sorting {
        width: 100% !important;
    }
    .catalog-sorting .form-select {
        width: 100% !important;
        font-size: 1.05rem;
        padding: 13px 15px;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
    }
    .catalog-search {
        width: 90svw;
    }
}

/* ==============================================
   ======== 🚀 BUTTER SMOOTH PATCH v1.0 ========
   ============================================== */

/* 1. Аппаратное ускорение для анимаций (убирает мыло и лаги) */
.anim-on-scroll,
.btn,
.product-card,
.product-list-item,
.thumb-item-final,
#main-product-image,
.header,
.catalog-sidebar,
.sidebar-overlay {
    /* Подсказываем браузеру, что это будет двигаться */
    will-change: transform, opacity;
    /* Включаем GPU */
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
}

/* 2. Глобальная плавность прокрутки */
html {
    scroll-behavior: smooth;
}

/* 3. Исправление "прыжка" контента при открытии меню/модалок */
/* Когда body.nav-open или body.sidebar-open, скроллбар исчезает, и сайт прыгает.
   Это фиксит проблему, резервируя место под скроллбар. */
body {
    scrollbar-gutter: stable;
}

/* 4. Оптимизация картинок (чтобы контент не скакал при загрузке) */
img {
    /* Если картинка не прогрузилась, она все равно займет место */
    display: block;
    max-width: 100%;
    height: auto;
    font-style: italic; /* Для alt-текста */
    vertical-align: middle;
    shape-margin: 1rem;
}

/* 5. Убираем тяжелый блюр на слабых мобилках (опционально, для скорости) */
@media (max-width: 768px) {
    .header, .hero-main__bg::after, .feature-card-small, .category-card {
        backdrop-filter: none !important;
        background-color: rgba(26, 38, 55, 0.95) !important; /* Чуть плотнее фон вместо блюра */
    }
}

/* 6. Делаем ховеры кнопок и карточек "дорогими" и плавными */
.btn, .product-card, .category-card, .feature-card {
    /* Заменяем transition: all на конкретные свойства для производительности */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background-color 0.2s ease,
                color 0.2s ease !important;
}

/* Эффект нажатия (тактильный отклик) */
.btn:active, .product-card:active {
    transform: scale(0.98) translateZ(0) !important;
}

/* 7. Фикс для лайтбокса (чтобы не дергался при открытии) */
.lightbox {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Убираем backdrop-filter для лайтбокса на моб, т.к. он очень тяжелый на весь экран */
    backdrop-filter: blur(5px);
}
@media (max-width: 768px) {
    .lightbox { backdrop-filter: none; background: rgba(18, 27, 40, 0.98); }
}
/* --- Нові кнопки в картці товару --- */
.btn-wayforpay {
    background: linear-gradient(135deg, #00AEEF 0%, #007bff 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 174, 239, 0.3);
}
.btn-wayforpay:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 174, 239, 0.5);
}

.btn-installment {
    background: transparent;
    color: #fff;
    border: 2px solid #f39c12; /* Колір "золото/розстрочка" */
}
.btn-installment:hover {
    background: #f39c12;
    color: #121B28;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}
.btn-outline:hover {
    border-color: var(--text-color-primary);
    color: var(--text-color-primary);
}

.divider-text {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 5px 0;
    position: relative;
}
.divider-text::before, .divider-text::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 20%;
    height: 1px;
    background: var(--border-color);
}
.divider-text::before { left: 0; }
.divider-text::after { right: 0; }


/* --- МОДАЛЬНЕ ВІКНО (Glassmorphism) --- */
.modal-backdrop {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(18, 27, 40, 0.8); /* Темний фон */
    backdrop-filter: blur(8px); /* Розмиття фону */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.modal-window {
    background: rgba(26, 38, 55, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
    transform: translateY(30px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-backdrop.active .modal-window {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}
.modal-close:hover { color: #fff; }

/* Заголовок модалки */
.modal-header { text-align: center; margin-bottom: 25px; }
.modal-header h3 { font-size: 1.5rem; color: #fff; margin-bottom: 5px; }
#modal-product-title { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 15px; }

.modal-price-tag {
    background: rgba(0, 174, 239, 0.1);
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.2rem;
    border: 1px solid rgba(0, 174, 239, 0.3);
}
.payment-badge {
    font-size: 0.8rem;
    background: var(--primary-color);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
}

/* Форма */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 0.9rem; color: var(--text-color-primary); margin-bottom: 6px; }
.required { color: #e74c3c; }

.input-wrapper { position: relative; }
.input-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}
.input-wrapper input {
    width: 100%;
    padding: 12px 15px 12px 40px; /* Відступ під іконку */
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: #fff;
    font-family: var(--font-family);
    font-size: 1rem;
    transition: border-color 0.3s;
}
.input-wrapper input:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Чекбокс */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 25px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.form-checkbox input { margin-top: 3px; accent-color: var(--primary-color); }
.form-checkbox a { color: var(--primary-color); text-decoration: underline; }

/* Кнопка відправки */
.btn-submit-order {
    width: 100%;
    background-color: var(--primary-color);
    color: #fff;
    padding: 14px;
    font-size: 1.1rem;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-submit-order:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 5px 15px rgba(0, 174, 239, 0.4);
}

.secure-note {
    text-align: center;
    margin-top: 15px;
    font-size: 0.8rem;
    color: #2ecc71; /* Зелений колір безпеки */
}
.secure-note i { margin-right: 5px; }

/* Мобільна адаптація */
@media (max-width: 576px) {
    .modal-window { padding: 20px; max-width: 90%; }
    .modal-header h3 { font-size: 1.3rem; }
}