/* ═══════════════════════════════════════════════
   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;
}

/* ── Force all images visible — we don't use ecom's lazy loader ── */
img { opacity: 1 !important; visibility: visible !important; }
img.lazy { opacity: 1 !important; visibility: visible !important; }

/* ── Fix footer widget-links broken icon squares.
   ecom styles.min.css uses Feather unicode in ::before but
   that font isn't loading — override with a plain FA chevron ── */
.widget-links ul li a::before,
.site-footer .widget-links ul li a::before {
  content: '›' !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #FF6A00 !important;
  margin-right: 7px !important;
  display: inline-block !important;
}
/* Also fix any other list items using Feather icon ::before */
.footer-col ul li::before,
.slideable-menu ul li a::before { content: none !important; }

/* ── Hero slider — vanilla JS, pixel-width items ── */
.hero-slider {
  position: relative !important;
  overflow: hidden !important;
  background: #0d1b2a;
  display: block !important;
  min-height: 200px;
}
#slidesTrack {
  display: flex !important;
  flex-wrap: nowrap !important;
  will-change: transform;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94) !important;
}
/* Slide items: height is set inline; width is set by fixSlideWidths() in JS */
#slidesTrack .slide-item {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center;
  overflow: hidden;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
@media(max-width:767px){
  #slidesTrack .slide-item { height: 280px !important; }
  #slidesTrack .slide-item .item-inner { padding: 0 20px !important; }
  #slidesTrack .slide-item .title { font-size: 26px !important; }
  #slidesTrack .slide-item p { display: none; }
}

/* Slider arrows */
.s-arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.3); color: #fff;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer;
  z-index: 20; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.s-arr:hover { background: #FF6A00; border-color: #FF6A00; }
.s-arr.prev { left: 12px; }
.s-arr.next { right: 12px; }

/* Slider dots */
.s-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 20;
}
.s-dot {
  width: 10px; height: 10px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.4); cursor: pointer; padding: 0;
  transition: all .3s;
}
.s-dot.active { background: #fff; width: 28px; border-radius: 5px; }

/* ── Product card image — explicit height ── */
/* ── All product card thumbnails ── */
.product-card .product-thumb {
  height: 180px !important;
  overflow: hidden !important;
  background: #f8f9fa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
}
.product-card .product-thumb img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
}

/* ── Hot Deals compact cards (220px wide) — full override ── */
.deals-scroll-row .product-card .product-thumb {
  height: 130px !important;
  padding: 8px !important;
}
.deals-scroll-row .product-card .product-thumb img {
  max-height: 114px !important;
}
.deals-scroll-row .product-card .product-card-body {
  padding: 8px 10px 10px !important;
}
.deals-scroll-row .product-card .product-category,
.deals-scroll-row .product-card .product-category a {
  font-size: 10px !important;
  margin-bottom: 3px !important;
}
.deals-scroll-row .product-card .product-title {
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
  /* clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.deals-scroll-row .product-card .product-title a {
  font-size: 12px !important;
}
.deals-scroll-row .product-card .rating-stars {
  margin-bottom: 4px !important;
}
.deals-scroll-row .product-card .rating-stars i {
  font-size: 10px !important;
}
.deals-scroll-row .product-card .product-price {
  font-size: 15px !important;
  line-height: 1.2 !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.deals-scroll-row .product-card .product-price del {
  font-size: 10px !important;
  display: block !important;
}
.deals-scroll-row .product-card .add-to-cart-btn {
  font-size: 11px !important;
  padding: 7px 8px !important;
  margin-top: 6px !important;
}
/* hide specs text in compact cards */
.deals-scroll-row p[style*="font-size:11px"] {
  display: none !important;
}
.product-card .product-thumb > div[style*="font-size"] {
  font-size: 70px;
  line-height: 1;
}

/* ── Buy Laptop Website custom overrides ── */
/* Logo colour — #siteLogo is the actual element, not .logo-text */
#siteLogo { color: #1a1a2e; font-family: 'Open Sans', sans-serif; }
#siteLogo 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;}}

/* ════════════════════════════════════════
   ADD TO CART BUTTON (on product cards)
════════════════════════════════════════ */
.add-to-cart-btn {
  width: 100%;
  padding: 9px 12px;
  background: #FF6A00;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .2s, transform .15s;
  font-family: inherit;
}
.add-to-cart-btn:hover { background: #e55d00; transform: translateY(-1px); }
.add-to-cart-btn i { font-size: 13px; }

/* ════════════════════════════════════════
   CART DRAWER
════════════════════════════════════════ */
.cart-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 7000; display: none;
}
.cart-backdrop.open { display: block; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 420px;
  background: #fff;
  z-index: 7001;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #e2e6ea;
  background: #fff;
  flex-shrink: 0;
}
.cart-drawer-header h5 {
  font-size: 16px; font-weight: 700; color: #1a1a2e; margin: 0;
  display: flex; align-items: center;
}
.cart-close-btn {
  background: #f4f5f7; border: none; width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 15px; color: #6b7280;
  transition: all .2s; flex-shrink: 0;
}
.cart-close-btn:hover { background: #FF6A00; color: #fff; }

.cart-drawer-body {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  -webkit-overflow-scrolling: touch;
}

.cart-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; min-height: 260px; text-align: center;
}

.cart-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid #f4f5f7;
}
.cart-item:last-child { border-bottom: none; }

.cart-item-details { flex: 1; min-width: 0; }
.cart-item-name {
  font-weight: 700; font-size: 13px; color: #1a1a2e;
  margin-bottom: 3px; line-height: 1.3;
}
.cart-item-unit-price { font-size: 11px; color: #6b7280; margin-bottom: 8px; }

.cart-item-controls {
  display: flex; align-items: center; gap: 4px;
}
.qty-btn {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1.5px solid #e2e6ea; background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #1a1a2e; transition: all .2s;
}
.qty-btn:hover { border-color: #FF6A00; color: #FF6A00; }
.qty-display {
  min-width: 28px; text-align: center; font-weight: 700;
  font-size: 14px; color: #1a1a2e;
}
.remove-btn {
  width: 28px; height: 28px; border-radius: 6px;
  border: none; background: #fff5f5; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #dc3545; margin-left: 4px; transition: all .2s;
}
.remove-btn:hover { background: #dc3545; color: #fff; }

.cart-item-line-total {
  font-weight: 700; font-size: 14px; color: #FF6A00;
  flex-shrink: 0; white-space: nowrap; padding-top: 2px;
}

.cart-drawer-footer {
  padding: 16px 20px;
  border-top: 2px solid #f4f5f7;
  background: #fff;
  flex-shrink: 0;
}

.cart-summary { margin-bottom: 14px; }
.cart-summary-row {
  display: flex; justify-content: space-between;
  align-items: center; padding: 5px 0; font-size: 14px; color: #1a1a2e;
}

.cart-actions { display: flex; flex-direction: column; gap: 10px; }

.cart-btn-wa {
  width: 100%; padding: 13px; border: none; border-radius: 8px;
  background: #25D366; color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; transition: background .2s; font-family: inherit;
}
.cart-btn-wa:hover { background: #1da851; }

.cart-btn-mpesa {
  width: 100%; padding: 13px; border: none; border-radius: 8px;
  background: #009A44; color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; transition: background .2s; font-family: inherit;
}
.cart-btn-mpesa:hover { background: #007a36; }

/* ════════════════════════════════════════
   M-PESA CHECKOUT MODAL
════════════════════════════════════════ */
.mpesa-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 8000; display: none;
}
.mpesa-backdrop.open { display: block; }

.mpesa-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.92);
  opacity: 0; pointer-events: none;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  background: #fff; border-radius: 16px;
  width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
  z-index: 8001;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.mpesa-modal.open { transform: translate(-50%,-50%) scale(1); opacity: 1; pointer-events: all; }

.mpesa-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid #e2e6ea;
}

.mpesa-modal-body { padding: 20px 22px; }

.mpesa-amount-box {
  background: linear-gradient(135deg,#009A44,#006d2e);
  border-radius: 10px; padding: 18px 20px;
  text-align: center; margin-bottom: 20px;
}
.mpesa-amount {
  font-size: 32px; font-weight: 800; color: #fff;
}

.mpesa-field { margin-bottom: 16px; }
.mpesa-label {
  display: block; font-size: 12px; font-weight: 700;
  color: #6b7280; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px;
}
.mpesa-input-wrap {
  display: flex; border: 1.5px solid #e2e6ea; border-radius: 8px;
  overflow: hidden; transition: border-color .2s;
}
.mpesa-input-wrap:focus-within { border-color: #009A44; }
.mpesa-prefix {
  background: #f4f5f7; padding: 11px 14px; font-size: 13px;
  font-weight: 700; color: #1a1a2e; border-right: 1.5px solid #e2e6ea;
  white-space: nowrap; display: flex; align-items: center;
}
.mpesa-input {
  flex: 1; padding: 11px 12px; border: none; outline: none;
  font-size: 15px; font-family: inherit; letter-spacing: 1px;
}
.mpesa-hint {
  font-size: 11px; color: #6b7280; margin: 8px 0 0; line-height: 1.5;
}

.mpesa-modal-footer {
  padding: 16px 22px 20px;
  border-top: 1px solid #e2e6ea;
  display: flex; flex-direction: column; gap: 10px;
}
.mpesa-pay-btn {
  width: 100%; padding: 14px; background: #009A44; color: #fff;
  border: none; border-radius: 8px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background .2s; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.mpesa-pay-btn:hover:not(:disabled) { background: #007a36; }
.mpesa-pay-btn:disabled { opacity: .7; cursor: not-allowed; }

.mpesa-cancel-btn {
  width: 100%; padding: 11px; background: transparent; color: #6b7280;
  border: 1.5px solid #e2e6ea; border-radius: 8px; font-size: 13px;
  cursor: pointer; transition: all .2s; font-family: inherit;
}
.mpesa-cancel-btn:hover { border-color: #dc3545; color: #dc3545; }

@media(max-width:480px){
  .cart-drawer { max-width: 100%; }
  .mpesa-modal { max-width: calc(100% - 32px); }
}

/* ── Modal action buttons ── */
.modal-add-cart-btn:hover { background: #e55d00 !important; }
.modal-wish-btn:hover { border-color: #FF6A00 !important; background: #fff4ee !important; }
.modal-wish-btn.active { background: #fff4ee !important; border-color: #FF6A00 !important; }

/* ── Product button group — always show buttons on mobile ── */
@media(max-width:767px){
  .product-button-group { opacity: 1 !important; }
}

/* ── Logo — target the actual #siteLogo span (not .logo-text which doesn't exist) ── */
.site-branding {
  flex-shrink: 0;
  overflow: hidden;
  max-width: 200px;      /* hard cap so it never bleeds into search */
}
.site-logo {
  display: block;
  overflow: hidden;
}
#siteLogo,
.site-logo span:first-child {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 20px !important;
  max-width: 100% !important;
}
@media(min-width:1200px){ #siteLogo { font-size: 22px !important; } }
@media(max-width:1199px){ .site-branding { max-width: 170px; } }

/* Topbar flex — items stay on one row, search can shrink, logo is fixed */
.topbar .container > div,
.topbar > .container > div {
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.topbar .site-branding  { flex: 0 0 auto; }
.search-box-wrap        { flex: 1 1 auto !important; min-width: 0 !important; }
.toolbar                { flex: 0 0 auto; }

/* ── Footer widget links — use FA chevron, hide broken Feather ::before ── */
.site-footer .widget-links ul li a::before,
.widget-links ul li a::before {
  content: '\f054' !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 9px !important;
  color: #FF6A00 !important;
  margin-right: 7px !important;
  display: inline-block !important;
  -webkit-font-smoothing: antialiased;
}

/* ════════════════════════════════════════
   HOT DEALS — horizontal CSS scroll row
   No owl-carousel class = never display:none
════════════════════════════════════════ */
.deals-scroll-wrap {
  overflow: hidden;
  position: relative;
}
.deals-scroll-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 0 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #FF6A00 #f4f5f7;
}
.deals-scroll-row::-webkit-scrollbar { height: 4px; }
.deals-scroll-row::-webkit-scrollbar-track { background: #f4f5f7; border-radius: 2px; }
.deals-scroll-row::-webkit-scrollbar-thumb { background: #FF6A00; border-radius: 2px; }

/* Each deal card in the scroll row */
.deals-scroll-row .slider-item {
  flex: 0 0 220px;
  width: 220px;
}
.deals-scroll-row .product-card {
  width: 100%;
}
/* Show at least 2 on mobile, up to 5 on desktop via natural scroll */
@media(min-width:576px) { .deals-scroll-row .slider-item { flex: 0 0 200px; width: 200px; } }
@media(min-width:992px) { .deals-scroll-row .slider-item { flex: 0 0 220px; width: 220px; } }

/* ════════════════════════════════════════
   POPULAR BRANDS — pure CSS marquee animation
   No owl-carousel, never hidden
════════════════════════════════════════ */
.brands-marquee-wrap {
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e2e6ea;
  border-bottom: 1px solid #e2e6ea;
  padding: 14px 0;
}
.brands-marquee {
  display: flex;
  width: max-content;
  animation: brandScroll 22s linear infinite;
}
.brands-marquee:hover { animation-play-state: paused; }
@keyframes brandScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* -50% = one full set width */
}
.brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 32px;
  flex-shrink: 0;
  transition: transform .2s;
}
.brand-item:hover { transform: scale(1.08); }
.brand-item img {
  height: 30px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.65;
  filter: grayscale(0.2);
  transition: opacity .2s, filter .2s;
}
.brand-item:hover img { opacity: 1; filter: none; }

/* ── Toolbar notification badge — center the number in the circle ── */
.count-label,
#cartNavBadge,
#wishlistNavBadge,
.site-header .toolbar .count-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  text-align: center !important;
}