/* ============================================================
   RUIRU MAISHA MABATI — Custom Theme Colors
   Palette: Charcoal + Kenyan Brick + Goldenrod
   ============================================================ */

:root {
    /* ===== Primary palette ===== */
    --color-primary: #2b2d31;              /* charcoal */
    --color-primary-dark: #1c1e21;         /* darker for hover */
    --color-primary-light: #40434a;        /* lighter for accents */

    /* ===== Secondary ===== */
    --color-secondary: #a52a2a;            /* brick red */
    --color-secondary-dark: #7e1f1f;
    --color-secondary-light: #c93c3c;

    /* ===== Accent ===== */
    --color-accent: #d4a017;               /* goldenrod */
    --color-accent-dark: #a87b0f;

    /* ===== Semantic ===== */
    --color-success: #16a34a;              /* green (WhatsApp etc.) */
    --color-info: #2563eb;
    --color-info-dark: #1e40af;
    --color-review-dark: #d4a017;          /* stars */

    /* ===== Backgrounds ===== */
    --color-bg: #f7f7f5;
    --color-bg-card: #ffffff;
    --color-bg-muted: #eeece8;
    --color-bg-dark: #2b2d31;

    /* ===== Text ===== */
    --color-text: #1a1a1a;
    --color-text-muted: #6b7280;
    --color-text-light: #9ca3af;

    /* ===== Borders ===== */
    --color-border: #e5e7eb;
    --color-border-dark: #d1d5db;

    /* ===== Keep original Partdo vars in sync ===== */
    --color-theme: #2b2d31;
    --theme-theme-color: #2b2d31;
    --color-danger: #a52a2a;
}

/* ============================================================
   HEADER
   ============================================================ */

/* Header top bar (the accent line at very top) */
.site-header .header-border {
    background-color: var(--color-secondary) !important;
}

/* All Categories button */
.site-header .dropdown-cats > a {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.site-header .dropdown-cats > a:hover {
    background-color: var(--color-secondary) !important;
}

/* Cart count badge */
.site-header .quick-button .count {
    background-color: var(--color-secondary) !important;
    color: #fff !important;
}

/* Notification/help link in header */
.site-header .header-notice a {
    color: var(--color-primary) !important;
}

.site-header .header-notice a:hover {
    color: var(--color-secondary) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary buttons */
.btn.primary,
button.primary,
input[type="submit"].primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn.primary:hover,
button.primary:hover,
input[type="submit"].primary:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

/* Accent buttons (CTAs) */
.btn.secondary,
button.secondary {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #1a1a1a !important;
}

.btn.secondary:hover,
button.secondary:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: #fff !important;
}

/* ============================================================
   LINKS
   ============================================================ */

a {
    color: var(--color-primary);
}

a:hover,
a:focus {
    color: var(--color-secondary);
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */

.product .product-title a {
    color: var(--color-text) !important;
}

.product .product-title a:hover {
    color: var(--color-secondary) !important;
}

/* Price color */
.product .price,
.product .price .woocommerce-Price-amount {
    color: var(--color-secondary) !important;
    font-weight: 600;
}

.product .price del {
    color: var(--color-text-muted) !important;
}

/* Stock badge */
.product .product-stock.in-stock {
    color: var(--color-success) !important;
}

.product .product-stock.out-of-stock {
    color: var(--color-secondary) !important;
}

/* "Add to wishlist" and compare buttons */
.product-buttons a:hover,
.product-buttons .quickview:hover {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

/* ============================================================
   WHATSAPP ORDER BUTTON (custom added)
   ============================================================ */

.whatsapp-order-button {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
}

.whatsapp-order-button:hover {
    background: #128C7E !important;
    border-color: #128C7E !important;
}

/* ============================================================
   SALE / DISCOUNT BADGES
   ============================================================ */

.sale-badge,
.badge-sale,
.onsale,
.product .product-badge {
    background-color: var(--color-secondary) !important;
    color: #fff !important;
}

/* Coupon banner */
.klbth-coupon-banner .coupon-sale,
.klbth-coupon-banner .sale-overflow {
    background-color: var(--color-secondary) !important;
    color: #fff !important;
}

.klbth-coupon-banner .coupon-code {
    background-color: var(--color-accent) !important;
    color: #1a1a1a !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer .footer-row.custom-background-dark,
.site-footer .footer-newsletter.dark {
    background-color: var(--color-primary) !important;
}

.site-footer .footer-row.custom-background-light.dark {
    background-color: #33363a !important;
}

.site-footer .footer-copyright.dark {
    background-color: var(--color-primary-dark) !important;
}

.site-footer a:hover {
    color: var(--color-accent) !important;
}

/* ============================================================
   HEADINGS
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text) !important;
}

.elementor-heading-title {
    color: var(--color-text) !important;
}

/* ============================================================
   BACKGROUNDS
   ============================================================ */

body {
    background-color: var(--color-bg) !important;
}

/* Page content area */
.site-content,
.elementor-section {
    background-color: transparent;
}

/* Elementor containers use white bg */
.elementor-widget-container {
    /* leave as-is */
}

/* ============================================================
   MOBILE BOTTOM MENU
   ============================================================ */

.mobile-bottom-menu {
    background-color: var(--color-primary) !important;
}

.mobile-bottom-menu ul li a i,
.mobile-bottom-menu ul li a span {
    color: #fff !important;
}

.mobile-bottom-menu ul li.active a i,
.mobile-bottom-menu ul li.active a span {
    color: var(--color-accent) !important;
}

/* ============================================================
   FORMS
   ============================================================ */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary) !important;
    outline-color: var(--color-primary) !important;
}

/* Search button */
.search-form button.btn {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.search-form button.btn:hover {
    background-color: var(--color-secondary) !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumb a:hover,
.klbth-breadcrumb a:hover {
    color: var(--color-secondary) !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers:hover {
    background-color: var(--color-secondary) !important;
    color: #fff !important;
}

/* ============================================================
   ICON BOXES (features section)
   ============================================================ */

.klbth-module-iconbox .iconbox-icon {
    color: var(--color-secondary) !important;
}

.klbth-module-iconbox .entry-title {
    color: var(--color-text) !important;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testimonial .stars i {
    color: var(--color-accent) !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.klbth-menu-wrapper.primary .klbth-menu > .menu-item > a:hover,
.klbth-menu-wrapper.primary .klbth-menu > .menu-item.active > a {
    color: var(--color-secondary) !important;
}

/* Submenu hover */
.klbth-menu .sub-menu li a:hover {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

/* ============================================================
   ACCENT OVERRIDES (for the theme's default orange)
   ============================================================ */

.color-danger,
.color-primary,
[class*="color-primary"] {
    color: var(--color-primary) !important;
}

.klbth-module-header.with-border {
    border-bottom-color: var(--color-primary) !important;
}

/* Slider dots */
.slick-dots li.slick-active button,
.klbth-slider .slick-dots li.slick-active button {
    background-color: var(--color-secondary) !important;
}

/* Buttons on slider */
.klbth-banner .btn.primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.klbth-banner .btn.primary:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

/* ============================================================
   END
   ============================================================ */