/* ═══════════════════════════════════════════════
   TechHub Kenya — Primary Color: #FF6A00 (Orange)
   Generated from ecom color.php with color=#FF6A00
═══════════════════════════════════════════════ */

.left-category-area .category-header h4,
.section-title h2::before,
.product-card .countdown span,
.flash-deal-slider.owl-carousel .owl-nav div:hover,
.features-slider.owl-carousel .owl-nav div:hover,
.newproduct-slider.owl-carousel .owl-nav div:hover,
.bestseller-slider.owl-carousel .owl-nav div:hover,
.toprated-slider.owl-carousel .owl-nav div:hover,
.pagination li a:hover, .pagination li span:hover,
.pagination li.active span, .pagination li.active a,
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,
.u-d-d i,
.details-page-top-right-content .countdown span,
.mm-heading-area,
.section-title .links a::before,
.flash-sell-area.theme2 .product-card .countdown,
.menu-top-area,
.product-card .product-button-group .product-button,
.deal-of-day-section .countdown,
.bestseller-slider.owl-carousel .owl-nav div:hover,
.brand-slider.owl-carousel .owl-nav div:hover,
.features-slider.owl-carousel .owl-nav div:hover,
.flash-deal-slider.owl-carousel .owl-nav div:hover,
.home-blog-slider.owl-carousel .owl-nav div:hover,
.newproduct-slider.owl-carousel .owl-nav div:hover,
.popular-category-slider.owl-carousel .owl-nav div:hover,
.toprated-slider.owl-carousel .owl-nav div:hover,
.btn,
.footer-social-links a,
.a2a_kit a {
    background: #FF6A00 !important;
}

.site-header .toolbar .toolbar-item > a > div > .compare-icon > .count-label,
.site-header .toolbar .toolbar-item > a > div > .cart-icon > .count-label,
.btn-primary,
.hero-slider > .owl-carousel.dots-inside .owl-dots .owl-dot,
.widget-title::after,
.scroll-to-top-btn:hover,
a.list-group-item::before, .list-group-item-action::before {
    background-color: #FF6A00 !important;
}

.hero-slider .owl-carousel .owl-nav div,
.left-category-area .category-list .navi-link:hover span.text-gray-dark,
.site-header .navbar .nav-inner .right-info i,
.h-t-social-area ul li a:hover,
.menu-top-area .login-register:hover,
.t-h-dropdown a:hover,
.t-h-dropdown a.active,
.product-card .product-price,
.genius-banner .content .content-inner p,
.navi-link:hover,
.site-header .site-menu > ul > li:hover > a,
.widget-categories ul > li.active > a,
.widget-links ul > li.active > a,
.details-page-top-right-content a,
.widget-categories ul > li > a:hover,
.widget-links ul > li > a:hover,
.product-card .product-title > a:hover,
.product-card .product-category > a:hover,
.nav-tabs .nav-link:hover,
.post-title > a:hover,
.post-meta > li > a:hover,
.widget-featured-posts > .entry .entry-title > a:hover,
.widget-featured-products > .entry .entry-title > a:hover,
.widget-cart > .entry .entry-title > a:hover,
.entry .entry-delete a,
.steps .step.active .step-title, .steps .step.active > i,
.text-primary,
.shopping-cart .product-item .product-title > a:hover,
.wishlist-table .product-item .product-title > a:hover,
.order-table .product-item .product-title > a:hover,
.list-group-item.active,
a.list-group-item:hover,
a.list-group-item:focus, a.list-group-item:active,
.list-group-item-action:hover,
.list-group-item-action:focus,
.list-group-item-action:active,
.progress-steps li.active .icon,
.comparison-table .comparison-item .comparison-item-title:hover,
.site-header .site-menu > ul > li.active > a,
.breadcrumbs > li > a:hover,
.faq-box:hover .link,
.left-category-area .category-list .sub-c-box .title:hover,
.left-category-area .category-list .sub-c-box .child-category a:hover,
.section-title .links a:hover,
.section-title .links a.active,
#quick_filter li a:hover,
#quick_filter li a.active,
.section-title .right_link:hover,
.popular-category.theme3 .links a.active,
.popular-category.theme3 .links a:hover,
.site-header .search-box-wrap .input-group .serch-result .bottom-area a:hover,
.shop-view > a,
.genius-banner .inner-content p,
.details-page-top-right-content .price-area .main-price,
.free-shippin-aa {
    color: #FF6A00 !important;
}

.js-cookie-consent-agree {
    background: #FF6A00 !important;
}

.site-header .toolbar .toolbar-item > a > div > .compare-icon > .count-label,
.btn-primary:hover,
.scroll-to-top-btn:hover,
.pagination li a:hover,
.pagination li span:hover,
.pagination li.active span,
.pagination li.active a,
.nav-tabs .nav-link.active:hover,
.btn {
    color: #fff !important;
}

.shop-view > a.active {
    color: #fff !important;
}

.category-scroll::-webkit-scrollbar-thumb {
    background-color: #FF6A00;
}

.category-scroll {
    scrollbar-color: #FF6A00 #e4e4e4;
    scrollbar-width: thin;
}

.btn-outline-primary {
    border-color: #FF6A00;
    color: #FF6A00;
    background: none;
}

.btn-outline-primary:hover {
    background-color: #FF6A00;
    color: #fff !important;
}

.t-h-dropdown .t-h-dropdown-menu {
    border-top: 2px solid #FF6A00;
}

.product-card:hover,
.brand-slider .slider-item a:hover,
.genius-banner:hover {
    border-color: #FF6A00;
}

.form-control:focus {
    border-color: #FF6A00;
}

.input-group .form-control:focus ~ .input-group-addon {
    color: #FF6A00;
}

.shop-view > a.active {
    border-color: #FF6A00;
    background-color: #FF6A00;
}

.custom-control .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #FF6A00;
    background-color: #FF6A00;
}

.product-gallery .product-thumbnails > li.active > a,
.steps .step.active {
    border-color: #FF6A00;
}

.quickFilter .quickFilter-title:hover {
    border-color: #FF6A00!important;
}

#quick_filter {
    border-color: #FF6A00;
}

/* ── Buy Laptop Website custom overrides ── */
/* Make logo text style match ecom */
.site-logo .logo-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #1a1a2e;
    letter-spacing: 0.5px;
}
.site-logo .logo-text span { color: #FF6A00; }

/* Section tabs — Buy Laptop Website SPA navigation */
.sec-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    background: #fff;
    border-bottom: 2px solid #e2e6ea;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    position: sticky;
    top: 0;
    z-index: 100;
}
.sec-tabs::-webkit-scrollbar { display: none; }
.sec-tab {
    flex-shrink: 0;
    padding: 13px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all .2s;
    background: none;
    border-top: none; border-left: none; border-right: none;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
}
.sec-tab:hover { color: #FF6A00; background: #fff4ee; }
.sec-tab.active { color: #FF6A00; border-bottom-color: #FF6A00; background: #fff4ee; font-weight: 700; }
.tab-badge {
    background: #FF6A00;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}

/* Page sections */
.page-sec { display: none; padding: 20px 0 60px; }
.page-sec.active { display: block; }

/* WhatsApp widget */
.wa-widget { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.wa-fab { width: 56px; height: 56px; border-radius: 50%; background: #25D366; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 20px rgba(37,211,102,.45); animation: pwa 2.5s ease-in-out infinite; }
.wa-fab svg { width: 28px; height: 28px; fill: #fff; display: block; }
@keyframes pwa { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.45);}50%{box-shadow:0 4px 44px rgba(37,211,102,.75);}}
.wa-panel { background: #fff; border: 1px solid #e2e6ea; border-radius: 14px; width: 300px; box-shadow: 0 6px 24px rgba(0,0,0,.12); overflow: hidden; transform: scale(.88) translateY(18px); opacity: 0; pointer-events: none; transition: all .26s cubic-bezier(.34,1.56,.64,1); }
.wa-panel.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }
.wa-head { background: #075E54; padding: 14px; display: flex; align-items: center; gap: 10px; }
.wa-av { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.wa-nm { font-weight: 700; font-size: 14px; color: #fff; }
.wa-st { font-size: 11px; color: rgba(255,255,255,.75); }
.wa-msgs { padding: 12px; background: #ece5dd; min-height: 80px; }
.wa-bbl { background: #fff; border-radius: 10px 10px 10px 3px; padding: 10px 12px; font-size: 12px; line-height: 1.6; max-width: 90%; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.wa-tm { font-size: 9px; color: #9ca3af; margin-top: 3px; text-align: right; }
.wa-qs { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #e2e6ea; }
.wa-ql { font-size: 9px; color: #9ca3af; letter-spacing: 1px; margin-bottom: 1px; }
.wa-qb { padding: 8px 12px; background: #fff4ee; border: 1px solid rgba(255,106,0,.2); border-radius: 7px; color: #FF6A00; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; display: block; transition: all .2s; }
.wa-qb:hover { background: #FF6A00; color: #fff; }
.wa-in-r { padding: 9px 12px; border-top: 1px solid #e2e6ea; display: flex; gap: 7px; background: #f9f9f9; }
.wa-in { flex: 1; background: #fff; border: 1px solid #e2e6ea; border-radius: 18px; padding: 8px 12px; font-size: 12px; outline: none; font-family: inherit; }
.wa-in:focus { border-color: #25D366; }
.wa-snd { background: #25D366; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }

/* Modal */
.modal-ov { position: fixed; inset: 0; z-index: 6000; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-ov.open { display: flex; }
.modal-box { background: #fff; border-radius: 12px; width: 100%; max-width: 780px; max-height: 92vh; overflow-y: auto; position: relative; animation: mIn .28s ease; }
@keyframes mIn { from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);} }
.m-close { position: absolute; top: 12px; right: 14px; background: #f4f5f7; border: 1px solid #e2e6ea; color: #1a1a2e; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all .2s; }
.m-close:hover { background: #FF6A00; color: #fff; border-color: #FF6A00; }
.m-inner { display: grid; grid-template-columns: 1fr 1fr; }
.m-gal { background: #f8f9fa; border-radius: 12px 0 0 12px; min-height: 320px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.m-main { width: 100%; height: 320px; display: flex; align-items: center; justify-content: center; font-size: 90px; }
.m-main img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.m-thumbs { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; }
.m-thumb { width: 44px; height: 44px; border-radius: 7px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: rgba(0,0,0,.05); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.m-thumb.active { border-color: #FF6A00; }
.m-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-info { padding: 24px 22px; }
.m-cat { font-size: 9px; color: #6b7280; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 5px; }
.m-nm { font-size: 24px; font-weight: 800; color: #1a1a2e; line-height: 1.2; margin-bottom: 8px; }
.m-prices { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.m-price { font-size: 26px; font-weight: 800; color: #FF6A00; }
.m-orig { font-size: 13px; color: #9ca3af; text-decoration: line-through; }
.m-off { font-size: 10px; font-weight: 700; color: #059669; background: #dcfce7; padding: 2px 7px; border-radius: 4px; }
.m-spec { display: flex; padding: 6px 0; border-bottom: 1px solid #e2e6ea; }
.m-spec:last-child { border-bottom: none; }
.m-sk { font-size: 10px; color: #6b7280; min-width: 85px; font-weight: 600; }
.m-sv { font-size: 12px; }
.m-wa-btn { width: 100%; padding: 12px; background: #25D366; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; font-family: inherit; }
.m-wa-btn:hover { background: #1da851; }
.m-share { display: flex; gap: 7px; margin-top: 10px; justify-content: center; }
.m-sh-btn { display: flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 5px; font-size: 11px; font-weight: 600; color: #fff; border: none; cursor: pointer; }
.empty-st { grid-column: 1/-1; text-align: center; padding: 48px 20px; color: #6b7280; }
.empty-ic { font-size: 40px; margin-bottom: 8px; }

/* Deals hero banner */
.deals-hero { background: linear-gradient(135deg,#c0390a,#FF6A00); border-radius: 8px; padding: 24px 28px; margin-bottom: 20px; position: relative; overflow: hidden; }
.deals-hero::after { content: '🔥'; position: absolute; right: 20px; font-size: 100px; opacity: .15; pointer-events: none; }
.deals-hero h2 { font-size: 36px; font-weight: 800; color: #fff; }
.deals-hero p { font-size: 13px; color: rgba(255,255,255,.85); margin-top: 4px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-card { background: #fff; border: 1px solid #e2e6ea; border-radius: 8px; padding: 24px; }
.contact-card h3 { font-size: 18px; font-weight: 800; color: #1a1a2e; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.cc-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e2e6ea; }
.cc-row:last-child { border-bottom: none; }
.cc-icon { font-size: 18px; min-width: 28px; flex-shrink: 0; }
.cc-label { font-size: 11px; color: #6b7280; margin-bottom: 2px; }
.cc-val { font-weight: 600; font-size: 13px; }
.wa-contact-btn { width: 100%; padding: 13px; background: #25D366; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; font-family: inherit; }
.wa-contact-btn:hover { background: #1da851; }
.soc-contact { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.soc-c-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #fff; flex: 1; justify-content: center; }
.map-placeholder { background: linear-gradient(135deg,#0d1b2a,#1a2e44); border-radius: 8px; height: 140px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; margin-top: 16px; }
.map-placeholder span:first-child { font-size: 32px; }
.map-placeholder span:nth-child(2) { color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; }
.map-placeholder span:last-child { color: rgba(255,255,255,.5); font-size: 11px; }
.faq-section { background: #fff; border: 1px solid #e2e6ea; border-radius: 8px; padding: 20px; margin-top: 16px; }
.faq-section h2 { font-size: 20px; font-weight: 800; color: #1a1a2e; margin-bottom: 14px; }
.faq-item { border-bottom: 1px solid #e2e6ea; padding: 10px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-weight: 600; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; padding: 0; font-family: inherit; }
.faq-ic { color: #FF6A00; font-size: 20px; transition: transform .2s; }
.faq-ic.open { transform: rotate(45deg); }
.faq-a { font-size: 12px; color: #6b7280; line-height: 1.7; margin-top: 8px; display: none; }
.newsletter-section { background: linear-gradient(130deg,#0d1b2a,#1a2e44); padding: 40px 0; }
.nl-in { max-width: 520px; margin: 0 auto; text-align: center; }
.nl-in h2 { font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.nl-in p { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 20px; }
.nl-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.nl-inp { flex: 1; padding: 11px 14px; border-radius: 8px; border: 2px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #fff; font-family: inherit; font-size: 13px; outline: none; }
.nl-inp:focus { border-color: #FF6A00; }
.nl-inp::placeholder { color: rgba(255,255,255,.4); }
.nl-btn { background: #FF6A00; color: #fff; padding: 11px 20px; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.nl-btn:hover { background: #e55d00; }
@media(max-width:767px){
    .m-inner{grid-template-columns:1fr;}.m-gal{border-radius:12px 12px 0 0;min-height:200px;}
    .contact-grid{grid-template-columns:1fr;}
    .nl-form{flex-direction:column;}
    .wa-panel{width:calc(100vw - 40px);}
}
@media(max-width:576px){.deals-hero::after{display:none;}}