/* 1. ГЛОБАЛЬНІ НАЛАШТУВАННЯ ТА ШРИФТИ */
/* Виправлено посилання: додано повний шлях до Google Fonts */
@import url("https://googleapis.com");

:root {
    /* Основна палітра */
    --bg: #0a0b0d;         
    --bg2: #0f1115;        
    --bg3: #141720;
    --bg4: #1a1e2e;
    --bg-card: #12131a;    
    --card: #111318;
    --border: rgba(255, 255, 255, 0.08);
    
    /* Акцентні кольори (Неон) */
    --accent: #00e5ff;     
    --accent2: #39ff14;    
    --accent3: #ff2d55;    
    --accent4: #ff9500;    
    --accent-glow: rgba(0, 229, 255, 0.3);
    --success: #39ff14;    

    /* Текст */
    --text: #e8eaf0;       
    --text2: #8b92a8;
    --text3: #4a5068;
    --text-dim: #8b92a8;   
    
    /* Анімація */
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Базові параметри сторінки */
body { 
    background-color: var(--bg) !important; 
    color: var(--text) !important; 
    font-family: 'Exo 2', sans-serif !important; 
    margin: 0;
}

/* Стилізація посилань */
a { 
    color: var(--accent); 
    transition: var(--transition); 
    text-decoration: none; 
}

a:hover { 
    color: var(--success); 
    text-decoration: none; 
}

/* ================================================================
   ERAMOBILE GAMING THEME — HEADER & NAVIGATION
   ================================================================ */

/* Topbar — мінімалізм */
#topbar {
    background: #060708 !important;
    border-bottom: 1px solid rgba(0, 229, 255, .08) !important;
    padding: 3px 0 !important;
    font-size: 11px !important;
    min-height: 26px !important;
}
#topbar a { color: var(--text2) !important; transition: var(--transition); }
#topbar a:hover { color: var(--accent) !important; }

/* Header (Sticky з ефектом Blur) */
.hi {
    background: rgba(8, 9, 12, 0.9) !important; /* Напівпрозорий для Blur */
    backdrop-filter: blur(10px); /* Ефект матового скла */
    border-bottom: 1px solid rgba(0, 229, 255, 0.15) !important;
    height: 52px !important;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.hi > .container {
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
}

/* Головне меню */
#menu {
    background: #060708 !important;
    border-bottom: 1px solid rgba(0, 229, 255, .08) !important;
    min-height: 38px !important;
}
#menu .navbar-nav > li > a {
    color: var(--text2) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase; /* Геймерський стиль */
    letter-spacing: 0.5px;
    padding: 10px 15px !important;
    transition: var(--transition) !important;
    border-bottom: 2px solid transparent !important;
}
#menu .navbar-nav > li > a:hover, 
#menu .navbar-nav > li.active > a {
    color: var(--accent) !important;
    background: transparent !important;
    border-bottom-color: var(--accent) !important;
    text-shadow: 0 0 8px var(--accent-glow);
}

/* Випадаюче меню */
#menu .dropdown-menu {
    background: var(--bg2) !important;
    border: 1px solid rgba(0, 229, 255, .15) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
#menu .dropdown-menu > li > a {
    color: var(--text2) !important;
    padding: 8px 15px !important;
}
#menu .dropdown-menu > li > a:hover {
    background: rgba(0, 229, 255, .08) !important;
    color: var(--accent) !important;
}

/* Пошук */
#search { flex: 1 !important; max-width: 550px !important; }
#search input {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 8px 0 0 8px !important;
    height: 36px !important;
}
#search input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 10px var(--accent-glow) !important;
    outline: none !important;
}
#search .btn-search, #search button {
    background: var(--accent) !important;
    color: #000 !important; /* Чорний текст на яскравому фоні краще читається */
    font-weight: bold;
    border: none !important;
    border-radius: 0 8px 8px 0 !important;
    height: 36px !important;
}

/* Кошик */
.h-cart, #era-cart-btn {
    background: var(--accent) !important;
    color: #000 !important;
    border-radius: 8px !important;
    font-family: "Exo 2", sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    transition: var(--transition) !important;
}
.h-cart:hover {
    background: var(--accent2) !important;
    box-shadow: 0 0 15px var(--accent2);
    transform: translateY(-1px);
}

/* Бокова колонка (Категорії) */
#column-left .list-group-item {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
    color: var(--text2) !important;
    font-size: 13px !important;
    transition: var(--transition) !important;
}
#column-left .list-group-item:hover, 
#column-left .list-group-item.active {
    background: rgba(0, 229, 255, .05) !important;
    color: var(--accent) !important;
    border-left: 3px solid var(--accent) !important; /* Акцентна лінія збоку */
}
/* Виправляємо кнопку кошика */
#cart > .btn, 
#cart .btn-inverse, 
#era-cart-btn, 
.h-cart {
    background: var(--accent) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: "Exo 2", sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    
    /* Важливо для анімації підйому */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    top: 0;
}

/* Ефект при наведенні: підйом та світіння */
#cart > .btn:hover, 
#cart .btn-inverse:hover, 
#era-cart-btn:hover, 
.h-cart:hover {
    background: var(--accent2) !important; /* Зміна на зелений */
    box-shadow: 0 0 20px var(--accent2) !important; /* Світіння */
    transform: translateY(-3px) !important; /* Підйом вгору */
    color: #000 !important;
}

/* Світіння для іконки всередині кнопки */
#cart > .btn:hover i, 
.h-cart:hover i {
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* ================================================================
   PRODUCT GRID — ІДЕАЛЬНЕ ВИРІВНЮВАННЯ ТА ФІКС ФОТО
   ================================================================ */

/* Контейнер картки */
.product-thumb {
    background: #111318 !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Усі картки в ряду будуть однієї висоти */
    overflow: hidden !important;
    position: relative !important;
}

/* ФОТО: Фіксований квадрат для будь-яких пропорцій */
.product-thumb .image {
    height: 180px !important; /* Жорстка висота для всіх фото */
    min-height: 180px !important;
    background: #fff !important; /* Біла підкладка, щоб приховати чорні фони фото */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
}

.product-thumb .image img {
    max-width: 100% !important;
    max-height: 160px !important; /* Фото не вилізе за межі */
    object-fit: contain !important; /* Зберігає пропорції без обрізки */
    mix-blend-mode: multiply !important; /* Робить білий фон фото прозорим */
}

/* НАЗВА: Фіксована висота (вирівнює ціни в один ряд) */
.product-thumb .caption {
    padding: 12px !important;
    flex-grow: 1 !important; /* Штовхає ціну вниз */
    display: flex !important;
    flex-direction: column !important;
}

.product-thumb .caption h4 {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 0 10px !important;
    min-height: 36px !important; /* Фіксоване місце під 2 рядки тексту */
    max-height: 36px !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
}

.product-thumb .caption h4 a {
    color: #e8eaf0 !important;
}

/* ЦІНА ТА КНОПКА (Нижній блок) */
.pf {
    margin-top: auto !important; /* Завжди притиснутий до низу */
    padding: 10px 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.p-price {
    font-family: "Rajdhani", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #39ff14 !important;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.3) !important;
}

/* КНОПКА (+) */
.badd {
    background: #00e5ff !important;
    color: #000 !important;
    border: none !important;
    border-radius: 6px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.badd:hover {
    background: #39ff14 !important;
    transform: rotate(90deg) !important;
}

/* Ефект при наведенні на всю картку */
.product-thumb:hover {
    transform: translateY(-5px) !important;
    border-color: #00e5ff !important;
    box-shadow: 0 10px 25px rgba(0, 229, 255, 0.15) !important;
}

/* ================================================================
   PRODUCT GRID — ФІКС ФОТО (БЕЗ ЗМІНИ КНОПОК)
   ================================================================ */

/* Контейнер картки */
.product-thumb {
    background: #111318 !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; 
    min-height: 380px !important; /* Гарантуємо мінімальну однакову висоту */
    overflow: hidden !important;
    position: relative !important;
}

/* ФОТО: Оптимізація відображення */
.product-thumb .image {
    height: 180px !important;
    min-height: 180px !important;
    background: #ffffff !important; /* Обов'язковий чистий білий фон */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    position: relative !important;
}

.product-thumb .image img {
    max-width: 100% !important;
    max-height: 160px !important;
    object-fit: contain !important;
    
    /* ЗМІНЕНО: darken замість multiply — це безпечніше для видимості фото */
    mix-blend-mode: darken !important; 
    
    /* Додаємо чіткості фото */
    image-rendering: -webkit-optimize-contrast !important;
    transition: transform 0.4s ease !important;
    display: block !important;
}

/* Ефект наведення тільки на фото */
.product-thumb:hover .image img {
    transform: scale(1.05) !important;
}

/* НАЗВА: Жорстке вирівнювання (виправлено висоту) */
.product-thumb .caption {
    padding: 15px 12px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #111318 !important; /* Обов'язково темний фон під текстом */
}

.product-thumb .caption h4 {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 0 10px !important;
    min-height: 38px !important; /* Місце для 2 рядків */
    max-height: 38px !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
}

.product-thumb .caption h4 a {
    color: #e8eaf0 !important;
    text-decoration: none !important;
}

/* ЦІНА ТА КНОПКА (Нижній блок без змін логіки) */
.pf {
    margin-top: auto !important;
    padding: 10px 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.p-price {
    font-family: "Rajdhani", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #39ff14 !important;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.3) !important;
}

/* КНОПКА (БЕЗ ЗМІН) */
.badd {
    background: #00e5ff !important;
    color: #08090c !important;
    border: none !important;
    border-radius: 6px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.badd:hover {
    background: #39ff14 !important;
    transform: rotate(90deg) !important;
}

/* Ефект при наведенні на всю картку */
.product-thumb:hover {
    transform: translateY(-5px) !important;
    border-color: #00e5ff !important;
    box-shadow: 0 10px 25px rgba(0, 229, 255, 0.15) !important;
}
/* ФІКС: однаковий розмір фото-контейнера */
.product-thumb .image {
    position: relative !important;
    height: 180px !important; /* Вкажіть бажану висоту */
    background: #fff !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* ФІКС: фото не деформується і не вилазить */
.product-thumb .image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* Це змушує будь-яке фото вписатися в квадрат */
    mix-blend-mode: multiply; /* Прибирає білий фон фото */
}

/* ФІКС: однакова висота назв */
.product-thumb .caption h4 {
    min-height: 40px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2; /* Обрізає назву на 2-му рядку */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* FOOTER */
#era-footer{background:#08090c;border-top:2px solid rgba(0,229,255,.25);padding:48px 0 0;margin-top:40px;position:relative}
#era-footer::before{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#00e5ff,transparent)}
.era-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.08)}
.era-footer-logo{font-family:"Exo 2",sans-serif;font-size:22px;font-weight:800;color:#e8eaf0;letter-spacing:.05em;margin-bottom:12px;text-transform:uppercase}
.era-footer-logo span{color:#00e5ff}
.era-footer-logo small{font-family:"Share Tech Mono",monospace;font-size:9px;background:rgba(0,229,255,.12);color:#00e5ff;border:1px solid rgba(0,229,255,.3);padding:1px 5px;border-radius:3px;vertical-align:middle;margin-left:4px;letter-spacing:.12em}
.era-footer-brand p{color:#8b92a8;font-size:13px;line-height:1.6;margin-bottom:16px}
.era-footer-social{display:flex;gap:10px}
.era-footer-social a{width:34px;height:34px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8b92a8;transition:.2s}
.era-footer-social a:hover{background:rgba(0,229,255,.12);border-color:rgba(0,229,255,.3);color:#00e5ff}
.era-footer-col h4{font-family:"Exo 2",sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#00e5ff;margin-bottom:14px}
.era-footer-col ul{list-style:none;margin:0;padding:0}
.era-footer-col ul li{margin-bottom:8px}
.era-footer-col ul a{color:#8b92a8;font-size:13px;text-decoration:none;transition:color .15s}
.era-footer-col ul a:hover{color:#e8eaf0}
.era-contacts li{color:#8b92a8;font-size:13px;margin-bottom:6px}
.era-contacts a{color:#8b92a8;text-decoration:none}
.era-contacts a:hover{color:#00e5ff}
.era-footer-bottom{padding:16px 0;display:flex;align-items:center;justify-content:space-between;color:#4a5068;font-size:12px}
.era-footer-payments{display:flex;gap:8px}
.era-footer-payments span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:3px 8px;font-size:11px;color:#8b92a8}
@media(max-width:900px){.era-footer-grid{grid-template-columns:1fr 1fr}.era-footer-brand{grid-column:1/-1}}
@media(max-width:480px){.era-footer-grid{grid-template-columns:1fr}.era-footer-bottom{flex-direction:column;gap:10px;text-align:center}}

/* HOME PAGE */
#era-home{overflow-x:hidden}
.era-hero{position:relative;display:flex;align-items:center;overflow:hidden;background:#08090c}
.era-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 75% 50%,rgba(0,229,255,.07) 0%,transparent 65%),radial-gradient(ellipse 40% 50% at 15% 80%,rgba(57,255,20,.04) 0%,transparent 55%)}
.era-hero-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,229,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.03) 1px,transparent 1px);background-size:60px 60px}
.era-hero-inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;padding:50px 20px 60px;position:relative;z-index:2;width:100%}
.era-hero-label{font-family:"Share Tech Mono",monospace;font-size:11px;color:#00e5ff;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;opacity:.8}
.era-hero-title{font-family:"Exo 2",sans-serif;font-size:clamp(34px,4.5vw,60px);font-weight:900;line-height:1;color:#e8eaf0;margin:0 0 16px;text-transform:uppercase;letter-spacing:.02em}
.era-hero-title span{color:#00e5ff}
.era-hero-title small{font-family:"Share Tech Mono",monospace;font-size:.22em;color:#39ff14;display:block;letter-spacing:.3em;margin-top:4px}
.era-hero-sub{color:#8b92a8;font-size:15px;line-height:1.7;margin-bottom:24px;max-width:440px}
.era-hero-actions{display:flex;gap:14px;margin-bottom:28px;flex-wrap:wrap}
.era-btn-primary{background:#00e5ff;color:#08090c!important;padding:12px 24px;border-radius:8px;font-family:"Exo 2",sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none!important;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.era-btn-primary:hover{background:#39ff14;box-shadow:0 0 20px rgba(0,229,255,.35);text-decoration:none!important}
.era-btn-ghost{background:transparent;color:#e8eaf0!important;padding:12px 24px;border-radius:8px;border:1px solid rgba(255,255,255,.2);font-family:"Exo 2",sans-serif;font-weight:600;font-size:14px;text-decoration:none!important;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.era-btn-ghost:hover{border-color:#00e5ff;color:#00e5ff!important;text-decoration:none!important}
.era-hero-stats{display:flex;gap:28px}
.era-stat{display:flex;flex-direction:column}
.era-stat-num{font-family:"Rajdhani",sans-serif;font-size:26px;font-weight:700;color:#00e5ff;line-height:1}
.era-stat span:last-child{font-size:11px;color:#8b92a8;margin-top:2px}
.era-hero-visual{display:flex;align-items:center;justify-content:center;position:relative}
.era-hero-glow{position:absolute;width:280px;height:280px;background:radial-gradient(circle,rgba(0,229,255,.12),transparent 70%);border-radius:50%;animation:era-pulse 3s ease-in-out infinite}
.era-hero-device{width:240px;height:240px;animation:era-float 4s ease-in-out infinite}
.era-hero-device svg{width:100%;height:100%}
@keyframes era-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes era-pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.era-hero-scroll{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:rgba(139,146,168,.5);font-size:18px;animation:era-bounce 2s ease-in-out infinite;z-index:2}
@keyframes era-bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
.era-section-head{display:flex;align-items:center;gap:20px;margin-bottom:28px}
.era-section-head h2{font-family:"Exo 2",sans-serif;font-size:20px;font-weight:700;color:#e8eaf0;text-transform:uppercase;letter-spacing:.06em;margin:0;white-space:nowrap}
.era-section-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(0,229,255,.4),transparent)}
.era-cats-section{padding:52px 0;background:#0a0b0e}
.era-cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.era-cat-card{background:#111318;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:22px 14px;text-align:center;text-decoration:none!important;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:10px}
.era-cat-card:hover{border-color:rgba(0,229,255,.3);background:#141720;transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,229,255,.07);text-decoration:none!important}
.era-cat-icon{font-size:28px;line-height:1}
.era-cat-name{font-family:"Exo 2",sans-serif;font-size:11px;font-weight:600;color:#8b92a8;text-transform:uppercase;letter-spacing:.05em;line-height:1.3}
.era-cat-card:hover .era-cat-name{color:#00e5ff}
.era-modules{padding:32px 0 16px}
.era-modules .swiper-container,.era-modules .slideshow{display:none!important}
.era-features{padding:52px 0;background:#08090c;border-top:1px solid rgba(255,255,255,.05)}
.era-features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.era-feature{text-align:center;padding:28px 18px;background:#0f1115;border:1px solid rgba(255,255,255,.06);border-radius:12px;transition:.2s}
.era-feature:hover{border-color:rgba(0,229,255,.18);background:#111318}
.era-feature-icon{font-size:36px;margin-bottom:14px}
.era-feature h4{font-family:"Exo 2",sans-serif;font-size:14px;font-weight:700;color:#e8eaf0;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.era-feature p{color:#8b92a8;font-size:13px;line-height:1.6;margin:0}
@media(max-width:900px){.era-hero-inner{grid-template-columns:1fr;padding:40px 20px 50px}.era-hero-visual{display:none}.era-features-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.era-hero-title{font-size:30px}.era-cats-grid{grid-template-columns:repeat(2,1fr)}.era-features-grid{grid-template-columns:1fr}}

/* CARD FIX inline style override */
.hi{min-height:52px!important;height:52px!important}
.hi>.container{height:52px!important}
#topbar{padding:2px 0!important;min-height:24px!important}
#menu{min-height:36px!important}
#menu .navbar-nav>li>a{padding:8px 10px!important}
.product-thumb .image{height:110px!important;min-height:110px!important;max-height:110px!important;overflow:hidden!important}
.product-thumb .image img{max-height:100px!important}

/* ================================================================
   HEADER — LOGO, CATALOG, CART, WISHLIST, COMPARE
   ================================================================ */

/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700;800;900&family=Rajdhani:wght@600;700&family=Share+Tech+Mono&display=swap");

/* Topbar */
.topbar {
  background:#060708;
  border-bottom:1px solid rgba(0,229,255,.08);
  padding:3px 0;
  font-size:11px;
  color:#8b92a8;
}
.topbar a { color:#8b92a8; text-decoration:none; margin-left:16px; }
.topbar a:hover { color:#00e5ff; }
.topbar-l span { margin-right:14px; }

/* Header */
header { background:#08090c; border-bottom:1px solid rgba(0,229,255,.12); }
.hi {
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  height:64px !important;
  padding:0 !important;
}

/* Logo */
.logo { text-decoration:none !important; display:flex; align-items:center; gap:0; flex-shrink:0; }
.logo span { font-family:"Exo 2",sans-serif; font-size:22px; font-weight:900; text-transform:uppercase; letter-spacing:.03em; color:#e8eaf0; line-height:1; }
.logo .logo-m { color:#00e5ff; }
.logo .logo-tag {
  font-family:"Share Tech Mono",monospace;
  font-size:9px;
  font-weight:400;
  color:#39ff14;
  background:rgba(57,255,20,.1);
  border:1px solid rgba(57,255,20,.3);
  border-radius:3px;
  padding:1px 5px;
  letter-spacing:.15em;
  margin-left:6px;
  align-self:flex-start;
  margin-top:4px;
}
.logo:hover .logo-m { color:#39ff14; }
.logo:hover span:first-child { color:#e8eaf0; }

/* Catalog button */
.cat-btn, #era-cat-btn {
  background:#00e5ff !important;
  color:#08090c !important;
  border:none !important;
  border-radius:8px !important;
  padding:0 18px !important;
  height:38px !important;
  font-family:"Exo 2",sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  transition:background .2s !important;
  flex-shrink:0 !important;
}
.cat-btn:hover, #era-cat-btn:hover {
  background:#39ff14 !important;
  box-shadow:0 0 14px rgba(0,229,255,.3) !important;
}

/* Catalog dropdown menu */
.era-cat-menu {
position:absolute !important;
top:100% !important;
left:0 !important;
z-index:9999 !important;
width:680px !important;
background:#0d1020 !important;
border:1px solid rgba(0,229,255,.2) !important;
border-radius:0 0 10px 10px !important;
box-shadow:0 12px 40px rgba(0,0,0,.6) !important;
max-height:75vh !important;
overflow-y:auto !important;
display:none !important;
padding:16px !important;
}
.era-cat-menu.is-open {
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:0 !important;
}

/* Search */
.srch-w { flex-grow:1 !important; }
#search { width:100% !important; }
#search .input-group { display:flex !important; }
#search input {
  background:#0f1115 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-right:none !important;
  color:#e8eaf0 !important;
  border-radius:8px 0 0 8px !important;
  padding:8px 14px !important;
  font-size:14px !important;
  width:100% !important;
  height:38px !important;
}
#search input::placeholder { color:#4a5068 !important; }
#search input:focus { outline:none !important; border-color:rgba(0,229,255,.4) !important; }
#search button, #search .btn-default {
  background:#00e5ff !important;
  color:#08090c !important;
  border:none !important;
  border-radius:0 8px 8px 0 !important;
  padding:0 16px !important;
  height:38px !important;
  font-size:15px !important;
  cursor:pointer !important;
  flex-shrink:0 !important;
}
#search button:hover { background:#39ff14 !important; }

/* Header action buttons */
.h-acts { display:flex !important; align-items:center !important; gap:8px !important; flex-shrink:0 !important; }
.h-btn {
  background:rgba(255,255,255,.06) !important;
  color:#8b92a8 !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:8px !important;
  width:38px !important;
  height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  font-size:15px !important;
  transition:.2s !important;
  flex-shrink:0 !important;
}
.h-btn:hover { background:rgba(0,229,255,.12) !important; color:#00e5ff !important; border-color:rgba(0,229,255,.3) !important; }

/* Cart button */
.cart-wrapper { flex-shrink:0; }
#cart > .btn, .cart-wrapper .btn, #cart button {
  background:#00e5ff !important;
  color:#08090c !important;
  border:none !important;
  border-radius:8px !important;
  padding:0 14px !important;
  height:38px !important;
  font-family:"Exo 2",sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  transition:.2s !important;
}
#cart > .btn:hover, .cart-wrapper .btn:hover { background:#39ff14 !important; }
#cart .dropdown-menu {
  background:#0d1020 !important;
  border:1px solid rgba(0,229,255,.2) !important;
  border-radius:0 0 10px 10px !important;
  padding:12px !important;
  min-width:280px !important;
}

/* Navbar */
nav.navbar, nav#menu { background:#060708 !important; border-bottom:1px solid rgba(0,229,255,.08) !important; padding:0 !important; min-height:36px !important; }
nav.navbar .container { padding:0 15px !important; }
.navbar-in, #era-navbar-in { display:flex !important; align-items:center !important; }
#menu .navbar-nav { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto !important; scrollbar-width:none !important; margin:0 !important; padding:0 !important; list-style:none !important; width:100% !important; }
#menu .navbar-nav::-webkit-scrollbar { display:none !important; }
#menu .navbar-nav > li { float:none !important; flex-shrink:0 !important; }
#menu .navbar-nav > li > a { color:#8b92a8 !important; font-size:13px !important; font-weight:500 !important; padding:8px 12px !important; transition:color .15s !important; border-bottom:2px solid transparent !important; display:block !important; white-space:nowrap !important; }
#menu .navbar-nav > li > a:hover, #menu .navbar-nav > li.active > a { color:#00e5ff !important; background:transparent !important; border-bottom-color:#00e5ff !important; }
#menu .dropdown-menu { background:#0f1115 !important; border:1px solid rgba(0,229,255,.15) !important; border-radius:8px !important; padding:8px !important; }
#menu .dropdown-menu > li > a { color:#8b92a8 !important; font-size:13px !important; padding:6px 12px !important; border-radius:4px !important; }
#menu .dropdown-menu > li > a:hover { background:rgba(0,229,255,.08) !important; color:#00e5ff !important; }

/* Wishlist count у topbar */
#wishlist-total { position:relative; }

/* Sticky header */
header { position:sticky !important; top:0 !important; z-index:1000 !important; }

/* CART PAGE */
#checkout-cart h1,#checkout-cart h2{font-family:"Exo 2",sans-serif!important;color:#e8eaf0!important;font-size:22px!important;font-weight:700!important}
#checkout-cart .table{background:transparent!important}
#checkout-cart .table>thead>tr>th{background:#0f1115!important;color:#8b92a8!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.06em!important;border-color:rgba(255,255,255,.08)!important;padding:10px!important}
#checkout-cart .table>tbody>tr>td{background:transparent!important;color:#e8eaf0!important;border-color:rgba(255,255,255,.06)!important;padding:10px!important;vertical-align:middle!important}
#checkout-cart .table>tbody>tr:hover>td{background:rgba(255,255,255,.02)!important}
#checkout-cart .table a{color:#e8eaf0!important;font-weight:600!important;text-decoration:none!important}
#checkout-cart .table a:hover{color:#00e5ff!important}
#checkout-cart .table img{border-radius:6px!important;background:#fff!important;border:1px solid rgba(255,255,255,.08)!important}
#checkout-cart .well{background:#111318!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:10px!important;padding:20px!important}
#checkout-cart .well table td,#checkout-cart .well table th{color:#8b92a8!important;padding:6px 0!important;border:none!important;font-size:14px!important}
#checkout-cart .well table tr:last-child td{color:#fff!important;font-family:"Rajdhani",sans-serif!important;font-size:26px!important;font-weight:700!important}
#checkout-cart p{color:#8b92a8!important;font-size:14px!important}
#checkout-cart input[type="text"],#checkout-cart input[type="number"]{background:#0f1115!important;border:1px solid rgba(255,255,255,.12)!important;color:#e8eaf0!important;border-radius:6px!important;text-align:center!important;width:60px!important;padding:5px!important}

/* GLOBAL BUTTONS */
.btn-primary{background:#00e5ff!important;color:#08090c!important;border:none!important;border-radius:8px!important;font-family:"Exo 2",sans-serif!important;font-weight:700!important;transition:.2s!important}
.btn-primary:hover,.btn-primary:focus{background:#39ff14!important;outline:none!important}
.btn-default{background:rgba(255,255,255,.06)!important;color:#e8eaf0!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:8px!important;transition:.2s!important}
.btn-default:hover{background:rgba(0,229,255,.1)!important;border-color:rgba(0,229,255,.3)!important;color:#00e5ff!important}
.btn-danger{background:rgba(255,45,85,.1)!important;color:#ff2d55!important;border:1px solid rgba(255,45,85,.25)!important;border-radius:8px!important}
.btn-danger:hover{background:rgba(255,45,85,.2)!important}

/* PAGINATION */
.pagination>li>a,.pagination>li>span{background:#111318!important;border-color:rgba(255,255,255,.1)!important;color:#8b92a8!important}
.pagination>li>a:hover{background:rgba(0,229,255,.1)!important;color:#00e5ff!important;border-color:rgba(0,229,255,.3)!important}
.pagination>.active>a,.pagination>.active>span{background:#00e5ff!important;border-color:#00e5ff!important;color:#08090c!important}

/* ALERTS */
.alert{border-radius:8px!important;border:none!important;font-size:14px!important}
.alert-success{background:rgba(57,255,20,.08)!important;color:#39ff14!important;border-left:3px solid #39ff14!important}
.alert-danger,.alert-error{background:rgba(255,45,85,.08)!important;color:#ff2d55!important;border-left:3px solid #ff2d55!important}
.alert-info{background:rgba(0,229,255,.08)!important;color:#00e5ff!important;border-left:3px solid #00e5ff!important}
.alert-warning{background:rgba(255,149,0,.08)!important;color:#ff9500!important;border-left:3px solid #ff9500!important}

/* FORMS GLOBAL */
.form-control{background:#0f1115!important;border:1px solid rgba(255,255,255,.12)!important;color:#e8eaf0!important;border-radius:8px!important}
.form-control:focus{border-color:rgba(0,229,255,.4)!important;box-shadow:0 0 0 2px rgba(0,229,255,.08)!important;outline:none!important}

/* CHECKOUT */
#checkout-checkout h2{font-family:"Exo 2",sans-serif!important;color:#e8eaf0!important;font-size:16px!important;font-weight:700!important;text-transform:uppercase!important}
#checkout-checkout .panel{background:#0f1115!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:10px!important}
#checkout-checkout .panel-heading{background:#141720!important;border-bottom:1px solid rgba(255,255,255,.08)!important;border-radius:10px 10px 0 0!important}
#checkout-checkout label{color:#8b92a8!important;font-size:13px!important}

/* ================================================================
   CART DROPDOWN — mini preview
   ================================================================ */
#cart .dropdown-menu {
  background:#0d1020 !important;
  border:1px solid rgba(0,229,255,.2) !important;
  border-radius:0 0 12px 12px !important;
  box-shadow:0 16px 48px rgba(0,0,0,.7) !important;
  min-width:360px !important;
  padding:0 !important;
  margin-top:2px !important;
}
#cart .dropdown-menu table {
  width:100% !important;
  border-collapse:collapse !important;
  background:transparent !important;
  table-layout:fixed !important;
}
/* Скидаємо Bootstrap зебру */
#cart .dropdown-menu tr,
#cart .dropdown-menu tbody > tr,
#cart .dropdown-menu tr:nth-child(odd),
#cart .dropdown-menu tr:nth-child(even) {
  background:#0d1020 !important;
  background-color:#0d1020 !important;
}
#cart .dropdown-menu tr:hover,
#cart .dropdown-menu tr:hover td {
  background:#141728 !important;
  background-color:#141728 !important;
}
/* Усі td */
#cart .dropdown-menu table td {
  background:transparent !important;
  background-color:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
  border-top:none !important;
  color:#e8eaf0 !important;
  vertical-align:middle !important;
  padding:10px 8px !important;
}
/* td[1] = фото */
#cart .dropdown-menu table td:nth-child(1) {
  width:56px !important;
  padding:8px !important;
}
/* td[2] = назва */
#cart .dropdown-menu table td:nth-child(2) {
  color:#e8eaf0 !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
  padding:10px 8px !important;
}
#cart .dropdown-menu table td:nth-child(2) a {
  color:#e8eaf0 !important;
  text-decoration:none !important;
  font-weight:500 !important;
}
#cart .dropdown-menu table td:nth-child(2) a:hover { color:#00e5ff !important; }
/* td[3] = кількість (x 1) */
#cart .dropdown-menu table td:nth-child(3) {
  color:#8b92a8 !important;
  font-size:12px !important;
  text-align:center !important;
  white-space:nowrap !important;
  width:36px !important;
  padding:10px 4px !important;
}
/* td[4] = ціна */
#cart .dropdown-menu table td:nth-child(4) {
  color:#00e5ff !important;
  font-family:"Rajdhani",sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  text-align:right !important;
  padding:10px 8px !important;
  width:90px !important;
}
/* td[5] = кнопка X */
#cart .dropdown-menu table td:nth-child(5) {
  width:36px !important;
  text-align:center !important;
  padding:10px 6px !important;
}
/* Фото в dropdown */
#cart .dropdown-menu table td:nth-child(1) img {
  width:48px !important;
  height:48px !important;
  object-fit:contain !important;
  border-radius:6px !important;
  background:#1a1e2e !important;
  border:1px solid rgba(255,255,255,.08) !important;
  padding:3px !important;
  display:block !important;
}
/* Кнопка видалити */
#cart .dropdown-menu .btn-danger {
  background:rgba(255,45,85,.12) !important;
  color:#ff2d55 !important;
  border:1px solid rgba(255,45,85,.25) !important;
  border-radius:6px !important;
  padding:4px 7px !important;
  font-size:12px !important;
  line-height:1 !important;
}
#cart .dropdown-menu .btn-danger:hover {
  background:rgba(255,45,85,.28) !important;
}
/* Блок підсумку */
#cart .dropdown-menu > li:first-child {
  max-height:260px !important;
  overflow-y:auto !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(0,229,255,.25) transparent !important;
}
#cart .dropdown-menu > li:first-child::-webkit-scrollbar { width:3px !important; }
#cart .dropdown-menu > li:first-child::-webkit-scrollbar-thumb { background:rgba(0,229,255,.25) !important; }
#cart .dropdown-menu > li:last-child {
  background:#080a10 !important;
  border-top:1px solid rgba(0,229,255,.15) !important;
  padding:12px 14px !important;
  border-radius:0 0 12px 12px !important;
}
/* Рядки Сума/Разом */
#cart .dropdown-menu > li:last-child table tr,
#cart .dropdown-menu > li:last-child table tr:nth-child(odd),
#cart .dropdown-menu > li:last-child table tr:nth-child(even) {
  background:#080a10 !important;
  background-color:#080a10 !important;
}
#cart .dropdown-menu > li:last-child table td {
  border:none !important;
  padding:3px 0 !important;
  color:#8b92a8 !important;
  font-size:13px !important;
}
#cart .dropdown-menu > li:last-child table td:last-child {
  text-align:right !important;
  color:#8b92a8 !important;
}
#cart .dropdown-menu > li:last-child table tr:last-child td {
  color:#fff !important;
  font-family:"Rajdhani",sans-serif !important;
  font-size:20px !important;
  font-weight:700 !important;
}
#cart .dropdown-menu > li:last-child table tr:last-child td:last-child {
  color:#00e5ff !important;
}
/* Кнопки внизу */
#cart .dropdown-menu > li:last-child .btn { margin-top:10px !important; }


/* ================================================================
   ERA FILTER PANEL
   ================================================================ */
.era-filter-panel {
  background:#0f1115;
  border:1px solid rgba(0,229,255,.12);
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
}
.era-filter-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.era-filter-title {
  font-family:"Exo 2",sans-serif;
  font-size:13px;
  font-weight:700;
  color:#e8eaf0;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.era-filter-reset {
  background:transparent;
  border:1px solid rgba(255,255,255,.1);
  color:#8b92a8;
  border-radius:5px;
  width:22px;
  height:22px;
  font-size:11px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:.15s;
}
.era-filter-reset:hover {
  border-color:rgba(255,45,85,.4);
  color:#ff2d55;
}
.era-filter-section {
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.era-filter-section:last-of-type { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.era-filter-label {
  font-size:11px;
  font-weight:600;
  color:#8b92a8;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:10px;
}

/* Price display */
.era-price-display {
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  font-family:"Rajdhani",sans-serif;
  font-size:16px;
  font-weight:700;
  color:#00e5ff;
}
.era-price-sep { color:#4a5068; font-weight:400; font-size:13px; }

/* Range slider */
.era-range-wrap {
  position:relative;
  height:20px;
  margin:0 4px;
}
.era-range-track {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0; right:0;
  height:4px;
  background:rgba(255,255,255,.1);
  border-radius:2px;
  pointer-events:none;
}
.era-range-fill {
  position:absolute;
  height:100%;
  background:#00e5ff;
  border-radius:2px;
}
.era-range {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  pointer-events:none;
  margin:0;
  height:20px;
}
.era-range::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#00e5ff;
  border:2px solid #0d1020;
  cursor:pointer;
  pointer-events:all;
  box-shadow:0 0 6px rgba(0,229,255,.4);
  transition:transform .15s;
}
.era-range::-webkit-slider-thumb:hover {
  transform:scale(1.2);
}
.era-range::-moz-range-thumb {
  width:16px;
  height:16px;
  border-radius:50%;
  background:#00e5ff;
  border:2px solid #0d1020;
  cursor:pointer;
  pointer-events:all;
}
#era-range-min { z-index:2; }
#era-range-max { z-index:1; }

/* Checkboxes */
.era-check-label {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
  cursor:pointer;
  font-size:13px;
  color:#8b92a8;
  transition:color .15s;
}
.era-check-label:hover { color:#e8eaf0; }
.era-check-label small { color:#4a5068; font-size:11px; }
.era-checkbox {
  appearance:none;
  -webkit-appearance:none;
  width:15px;
  height:15px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:3px;
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
  position:relative;
  transition:.15s;
}
.era-checkbox:checked {
  background:#00e5ff;
  border-color:#00e5ff;
}
.era-checkbox:checked::after {
  content:"✓";
  position:absolute;
  top:-1px;
  left:2px;
  font-size:11px;
  color:#08090c;
  font-weight:700;
}

/* Count */
.era-filter-count {
  font-size:12px;
  color:#4a5068;
  text-align:center;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.05);
  margin-top:12px;
}
.era-filter-count span {
  color:#00e5ff;
  font-weight:700;
}

/* ERA FILTER SIZE FIX */
#era-filter-col { padding-right:8px !important; box-sizing:border-box; }
.era-filter-panel { width:100% !important; box-sizing:border-box !important; max-width:100% !important; }
.era-range-wrap { overflow:hidden; }
.era-range { max-width:100% !important; }




/* ══ ERA CATEGORY v2 ══════════════════════════════════════ */
.era-breadcrumb{background:transparent!important;padding:8px 0!important;margin-bottom:4px!important;}
.era-breadcrumb li a{color:#8892a4;font-size:.82rem;}
.era-breadcrumb li a:hover{color:var(--accent,#00e5ff);}

.era-cat-layout{display:flex!important;gap:20px!important;align-items:flex-start!important;padding:16px 0!important;width:100%!important;}
.era-sidebar{width:220px!important;min-width:200px!important;max-width:220px!important;flex-shrink:0!important;}
.era-sidebar-block{background:#12131a;border:1px solid #1e2030;border-radius:8px;padding:14px;margin-bottom:14px;}
.era-sidebar-title{color:var(--accent,#00e5ff);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #1e2030;}
.era-subcat-list{list-style:none!important;margin:0!important;padding:0!important;}
.era-subcat-list li a{display:block;padding:5px 8px;color:#b0b8c8;font-size:.84rem;border-radius:4px;transition:all .15s;text-decoration:none;}
.era-subcat-list li a:hover{color:var(--accent,#00e5ff);background:rgba(0,229,255,.07);padding-left:14px;}

.era-filter-section{margin-bottom:12px;}
.era-filter-label{color:#8892a4;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;}
.era-price-display{color:var(--accent,#00e5ff);font-size:.8rem;margin-bottom:6px;}
.era-price-sep{color:#5a6272;}
.era-range-wrap{position:relative;height:24px;}
.era-range-track{position:absolute;top:50%;left:0;right:0;height:4px;background:#1e2030;border-radius:2px;transform:translateY(-50%);pointer-events:none;}
.era-range-fill{position:absolute;top:0;height:100%;background:var(--accent,#00e5ff);border-radius:2px;}
.era-range{position:absolute;width:100%;-webkit-appearance:none;background:transparent;pointer-events:none;z-index:2;}
.era-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent,#00e5ff);border-radius:50%;pointer-events:all;cursor:pointer;border:2px solid #0a0b0d;}
.era-check-label{display:flex;align-items:center;gap:7px;color:#b0b8c8;font-size:.82rem;cursor:pointer;margin-bottom:4px;}
.era-filter-count{color:#5a6272;font-size:.76rem;margin-top:6px;}
.era-filter-reset{width:100%;margin-top:8px;padding:6px;background:transparent;border:1px solid #ff2d55;color:#ff2d55;border-radius:4px;font-size:.76rem;cursor:pointer;transition:all .15s;}
.era-filter-reset:hover{background:#ff2d55;color:#fff;}

.era-main-content{flex:1!important;min-width:0!important;}
.era-cat-title{color:#e8eaf0;font-size:1.35rem;margin:0 0 14px!important;}
.era-sort-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.era-sort-left,.era-sort-right{display:flex;align-items:center;gap:7px;}
.era-sort-bar label{color:#8892a4;font-size:.78rem;white-space:nowrap;}
.era-select{background:#12131a;border:1px solid #1e2030;color:#e8eaf0;padding:4px 8px;border-radius:4px;font-size:.8rem;}

/* ── Product grid ── */
.era-product-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(185px,1fr))!important;gap:14px!important;}
.era-product-card{background:#12131a;border:1px solid #1e2030;border-radius:10px;overflow:hidden;transition:border-color .2s,transform .2s;display:flex;flex-direction:column;}
.era-product-card:hover{border-color:var(--accent,#00e5ff);transform:translateY(-2px);}
.era-card-img{position:relative;aspect-ratio:1;background:#0e0f15;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.era-card-img img{max-width:100%;max-height:100%;object-fit:contain;padding:8px;}
.era-no-img{color:#3a3f50;font-size:.72rem;}
.era-badge-sale{position:absolute;top:7px;right:7px;background:#ff2d55;color:#fff;font-size:.62rem;font-weight:700;padding:2px 5px;border-radius:3px;}
.era-card-body{padding:9px 11px 11px;flex:1;display:flex;flex-direction:column;}
.era-card-name{color:#c8d0e0;font-size:.8rem;line-height:1.35;margin-bottom:7px;text-decoration:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1;}
.era-card-name:hover{color:var(--accent,#00e5ff);}
.era-card-price{margin-bottom:5px;}
.era-price-new{color:var(--accent2,#39ff14);font-size:.95rem;font-weight:700;}
.era-price-old{color:#5a6272;font-size:.75rem;text-decoration:line-through;margin-right:5px;}
.era-in-stock{color:#39ff14;font-size:.7rem;display:block;margin-bottom:6px;}
.era-card-actions{display:flex;gap:5px;}
.era-btn-cart{flex:1;padding:6px 4px;border:1px solid var(--accent,#00e5ff);background:transparent;color:var(--accent,#00e5ff);border-radius:5px;cursor:pointer;font-size:.82rem;transition:all .15s;}
.era-btn-cart:hover{background:var(--accent,#00e5ff);color:#0a0b0d;}

/* ── Subcategory grid ── */
.era-subcat-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;gap:12px!important;margin-bottom:18px!important;}
.era-subcat-card{background:#12131a;border:1px solid #1e2030;border-radius:8px;padding:14px 10px;text-align:center;color:#c8d0e0;font-size:.82rem;text-decoration:none;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:7px;}
.era-subcat-card img{width:56px;height:56px;object-fit:contain;}
.era-subcat-card:hover{border-color:var(--accent,#00e5ff);color:var(--accent,#00e5ff);}
.era-pagination{margin-top:18px;display:flex;justify-content:center;}
.era-empty{color:#5a6272;padding:40px 0;text-align:center;}

/* Mobile */
@media(max-width:768px){
  .era-cat-layout{flex-direction:column!important;}
  .era-sidebar{width:100%!important;max-width:100%!important;}
  .era-product-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))!important;}
}

/* 2. ОНОВЛЕННЯ КНОПОК */
.btn-primary, #button-cart, .btn-shopping {
    background-color: var(--accent) !important;
    color: #000 !important;
    border: none !important;
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    transition: all 0.3s ease !important;
}

.btn-primary:hover, #button-cart:hover {
    background-color: var(--success) !important;
    box-shadow: 0 0 15px var(--success) !important;
    transform: translateY(-1px);
}

/* ================================================================
   BRUTAL CLEANUP — ВИДАЛЕННЯ БІЛИХ СМУГ (ВАРІАНТ №3)
   ================================================================ */

/* 1. Повне знищення фону хлібних крихт (навіть якщо вони в element.style) */
.breadcrumb, ul.breadcrumb, [style*="background-color: #f5f5f5"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Видалення білої смуги категорії над назвою в картці */
.product-thumb .caption a:first-child:not([href*="product_id"]),
.product-thumb .caption p:first-child,
.product-thumb .caption .category {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Гарантований темний фон для всієї картки та її частин */
.product-thumb, 
.product-thumb .image, 
.product-thumb .caption {
    background-color: #111318 !important; /* Ваш колір --card */
}

/* 4. Вирівнювання назви після видалення смуги */
.product-thumb .caption h4 {
    margin-top: 0 !important;
    padding-top: 5px !important;
}

/* 5. Якщо фон прописаний інлайново через RGB */
[style*="background-color: rgb(245, 245, 245)"] {
    background-color: transparent !important;
}

/* ================================================================
   SYSTEM BUTTON UNIFICATION
   ================================================================ */

/* Приводимо всі типи кнопок до єдиного вигляду */
button, 
html input[type="button"], 
input[type="reset"], 
input[type="submit"],
.badd, 
.era-btn-cart {
    -webkit-appearance: button; /* Системний вигляд */
    cursor: pointer;
    
    /* Ваші стилі теми */
    background-color: var(--accent, #00e5ff) !important;
    color: #08090c !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Центрування вмісту */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ефекти для всіх кнопок без винятку */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.badd:hover {
    background-color: var(--accent2, #39ff14) !important;
    box-shadow: 0 0 15px var(--accent2, #39ff14) !important;
    transform: translateY(-1px);
}

/* Специфічний фікс для кнопки-плюса (+) у картці */
.badd {
    width: 42px !important;
    height: 42px !important;
    font-size: 24px !important;
    line-height: 1 !important;
    padding: 0 !important;
}

/* Якщо кнопка Плюс має повертатися, додаємо цей штрих */
.badd:hover {
    transform: rotate(90deg) scale(1.1) !important;
}






/* ══ ERA NAVBAR DROPDOWN ══════════════════════════════════ */
.era-navbar{display:flex;flex-wrap:wrap;gap:0;background:#0d0e14;border-bottom:1px solid #1a1c28;padding:0 12px;}
.era-nav-item{position:relative;}
.era-nav-link{
  display:block;padding:11px 14px;color:#c8d0e0;font-size:.82rem;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;transition:color .15s;
  border-bottom:2px solid transparent;
}
.era-nav-link:hover,.era-nav-item:hover .era-nav-link{
  color:var(--accent,#00e5ff);border-bottom-color:var(--accent,#00e5ff);
}
/* Dropdown */
.era-dropdown{
  display:none;position:absolute;top:100%;left:0;z-index:9999;
  background:#0f1018;border:1px solid #1e2030;border-top:2px solid var(--accent,#00e5ff);
  min-width:200px;max-width:280px;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  border-radius:0 0 8px 8px;
  padding:6px 0;
  columns:1;
}
.era-has-drop:hover .era-dropdown{display:block;}
.era-drop-item{
  display:block;padding:7px 16px;color:#b0b8c8;font-size:.82rem;
  text-decoration:none;transition:all .12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.era-drop-item:hover{color:var(--accent,#00e5ff);background:rgba(0,229,255,.06);padding-left:22px;}
.era-drop-head{
  display:block;padding:8px 16px 4px;color:var(--accent,#00e5ff);
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border-top:1px solid #1e2030;margin-top:4px;
}
.era-drop-head:first-child{border-top:none;margin-top:0;}
.era-drop-sub{
  display:block;padding:5px 16px 5px 26px;color:#8892a4;font-size:.79rem;
  text-decoration:none;transition:all .12s;
}
.era-drop-sub:hover{color:var(--accent,#00e5ff);background:rgba(0,229,255,.04);}

    /* ERA CAT MENU - 2-рівневе меню каталогу */
    .era-catmenu-inner {
      display: flex;
      flex-direction: column;
      background: #12131a;
      border: 1px solid #1e2030;
      border-radius: 0 0 10px 10px;
      padding: 10px 0;
      max-height: 85vh;
      overflow-y: auto;
      min-width: 280px;
      box-shadow: 0 8px 32px rgba(0,0,0,.6);
    }
    .era-catmenu-group {
      border-bottom: 1px solid #1a1b26;
    }
    .era-catmenu-group:last-child { border-bottom: none; }
    .era-catmenu-parent {
      display: flex;
      align-items: center;
      padding: 9px 18px;
      color: #00e5ff;
      font-size: .88rem;
      font-weight: 600;
      letter-spacing: .04em;
      text-decoration: none;
      text-transform: uppercase;
      transition: background .15s;
    }
    .era-catmenu-parent:hover { background: rgba(0,229,255,.08); color: #fff; }
    .era-catmenu-children {
      padding: 0 0 6px 0;
    }
    .era-catmenu-child {
      display: block;
      padding: 5px 18px 5px 30px;
      color: #8892a4;
      font-size: .82rem;
      text-decoration: none;
      transition: all .12s;
      border-left: 2px solid transparent;
    }
    .era-catmenu-child:hover {
      color: #00e5ff;
      border-left-color: #00e5ff;
      background: rgba(0,229,255,.04);
      padding-left: 34px;
    }
#era-cat-menu { display:none; position:absolute; top:100%; left:0; z-index:9999; min-width:300px; }
#era-cat-menu.is-open { display:block; }

.era-cat-wrap{position:relative!important;}
.era-catmenu-group{padding:8px 12px!important;}
.era-catmenu-parent{display:block!important;color:var(--accent,#00e5ff)!important;font-size:.85rem!important;font-weight:700!important;text-decoration:none!important;margin-bottom:6px!important;text-transform:uppercase!important;letter-spacing:.06em!important;}
.era-catmenu-parent:hover{color:#fff!important;}
.era-catmenu-children{display:flex!important;flex-direction:column!important;gap:2px!important;}
.era-catmenu-child{color:#b0b8c8!important;font-size:.8rem!important;text-decoration:none!important;padding:2px 0!important;transition:color .12s!important;}
.era-catmenu-child:hover{color:var(--accent,#00e5ff)!important;padding-left:6px!important;}