/* ==========================================================================
   MASTER HOME PAGE STYLESHEET (css-home.css)
   Organized: Hero, Carousels, Cards, Support, Reviews, Partners & Blog
   ========================================================================== */

:root {
    --kh-green-shadow-30: rgba(141, 183, 59, 0.3);
    --kh-green-shadow-10: rgba(141, 183, 59, 0.1);
    --kh-btn-text: #1a1a1a; /* Added for high contrast */
}

/* ==========================================================================
   1. GLOBAL LAYOUT & SECTION TITLES
   ========================================================================== */
.kh-home-wrapper { width: 100% !important; overflow-x: hidden !important; }
.kh-home-section { max-width: 1440px !important; margin: 60px auto !important; padding: 0 20px !important; }

.kh-section-title { font-size: 26px !important; font-weight: 900 !important; text-align: center !important; color: #222 !important; margin-bottom: 40px !important; text-transform: uppercase !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; width: 100% !important; }
.kh-section-title::after { content: "" !important; width: 60px !important; height: 4px !important; background: var(--kh-green, #88B437) !important; border-radius: 2px !important; display: block !important; }


/* ==========================================================================
   2. HERO SECTION & TRUST BADGES
   ========================================================================== */
.kh-home-hero { background: linear-gradient(135deg, #fdfdfd 0%, #f4f7f0 100%) !important; padding: 100px 20px 120px 20px !important; text-align: center !important; border-bottom: 1px solid #eee !important; }
.kh-hero-title { font-size: 42px !important; font-weight: 900 !important; margin-bottom: 20px !important; color: #222 !important; }
.kh-hero-subtitle { font-size: 17px !important; color: #555 !important; margin-bottom: 40px !important; }
.kh-hero-buttons { display: flex !important; justify-content: center !important; gap: 20px !important; flex-wrap: wrap !important; }

/* Hero Buttons */
.kh-btn-primary, .kh-btn-secondary { padding: 15px 35px !important; border-radius: 8px !important; font-size: 16px !important; font-weight: 800 !important; text-decoration: none !important; transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important; }
.kh-btn-primary { background: var(--kh-green, #88B437) !important; color: var(--kh-btn-text, #1a1a1a) !important; box-shadow: 0 4px 15px var(--kh-green-shadow-30) !important; }
.kh-btn-secondary { background: transparent !important; color: #333 !important; border: 2px solid #ddd !important; }
.kh-btn-primary:hover { background: var(--kh-green-dark, #769d2f) !important; transform: translateY(-2px) !important; }
.kh-btn-secondary:hover { background: #333 !important; color: #fff !important; }

/* Trust Badges (Overlapping Hero) */
.kh-home-trust-container { width: 100% !important; padding: 0 20px !important; margin-top: -60px !important; margin-bottom: 50px !important; position: relative !important; z-index: 10 !important; }
.kh-home-trust { max-width: 1200px !important; margin: 0 auto !important; background: #fff !important; border-radius: 12px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.06) !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; padding: 30px 0 !important; }
.kh-trust-item { display: flex !important; align-items: flex-start !important; gap: 15px !important; border-inline-end: 1px solid #f0f0f0 !important; padding: 0 25px !important; }
.kh-trust-item:last-child { border-inline-end: none !important; }
.kh-trust-icon { color: var(--kh-green, #88B437) !important; margin-top: 2px !important; }
.kh-trust-text .kh-trust-title { margin: 0 0 5px 0 !important; font-size: 16px !important; font-weight: 600 !important; color: #222 !important; }
.kh-trust-text p { margin: 0 !important; font-size: 13px !important; color: #555 !important; }


/* ==========================================================================
   3. UNIVERSAL ARROW SYSTEM & CAROUSELS
   ========================================================================== */
.kh-carousel-with-arrows { display: flex !important; align-items: center !important; gap: 15px !important; width: 100% !important; position: relative !important; }
.kh-slider-arrow, .kh-cat-arrow { background: transparent !important; border: 1px solid #ddd !important; color: #888 !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important; z-index: 20 !important; flex-shrink: 0 !important; padding: 0 !important; }
.kh-slider-arrow:hover, .kh-cat-arrow:hover { background: var(--kh-green, #88B437) !important; color: #fff !important; border-color: var(--kh-green, #88B437) !important; box-shadow: 0 4px 12px var(--kh-green-shadow-30) !important; transform: scale(1.1) !important; }
.kh-slider-arrow svg, .kh-cat-arrow svg { width: 22px !important; height: 22px !important; stroke-width: 2 !important; }

/* Carousel Scrolling Containers */
.kh-scroll-container, .kh-categories-carousel, .kh-products-carousel, .kh-reviews-carousel { width: 100% !important; flex-grow: 1 !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; padding: 10px 0 20px 0 !important; scrollbar-width: none !important; }
.kh-scroll-container::-webkit-scrollbar, .kh-categories-carousel::-webkit-scrollbar, .kh-products-carousel::-webkit-scrollbar, .kh-reviews-carousel::-webkit-scrollbar { display: none !important; }
.kh-scroll-track, .kh-products-track, .kh-products-track .woocommerce, .kh-products-track ul.products, .kh-reviews-track { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 30px !important; width: max-content !important; }
.kh-products-track ul.products::before, .kh-products-track ul.products::after { display: none !important; }


/* ==========================================================================
   4. CATEGORY & PRODUCT CARDS
   ========================================================================== */

/* Category Cards */
.kh-cat-track { gap: 20px !important; padding: 5px !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: max-content !important; }
.kh-cat-card { background: #fff !important; border: 1px solid #f0f0f0 !important; border-radius: 12px !important; padding: 25px 15px !important; text-align: center !important; text-decoration: none !important; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 220px !important; flex-shrink: 0 !important; scroll-snap-align: center !important; }
.kh-cat-card:hover { border-color: var(--kh-green, #88B437) !important; box-shadow: 0 10px 25px var(--kh-green-shadow-10) !important; transform: translateY(-5px) !important; }
.kh-cat-icon { color: var(--kh-green, #88B437) !important; margin-bottom: 12px !important; }
.kh-cat-card h3 { color: #222 !important; font-size: 15px !important; font-weight: 800 !important; margin: 0 !important; line-height: 1.3 !important; }

/* Perfect Product Cards */
.kh-products-track li.product { width: 320px !important; flex: 0 0 320px !important; scroll-snap-align: center !important; margin: 0 !important; background: #fff !important; border: 1px solid #f0f0f0 !important; border-radius: 16px !important; padding: 20px !important; display: flex !important; flex-direction: column !important; min-height: 530px !important; position: relative !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; }
.kh-products-track li.product:hover { transform: translateY(-6px) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important; }

/* Product Meta */
.kh-home-wrapper .kh-home-price-stock-row { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; margin-top: auto !important; margin-bottom: 15px !important; }
.kh-home-wrapper .product-price-shop { display: flex !important; align-items: baseline !important; gap: 8px !important; flex-wrap: wrap !important; flex: 1 !important; }
.kh-home-wrapper .product-price-shop ins, .kh-home-wrapper .product-price-shop ins bdi, .kh-home-wrapper .product-price-shop > bdi, .kh-home-wrapper .product-price-shop > .amount { color: #4f7a14 !important; font-weight: 800 !important; font-size: 19px !important; text-decoration: none !important; order: 1 !important; }
.kh-home-wrapper .product-price-shop del, .kh-home-wrapper .product-price-shop del bdi, .kh-home-wrapper .product-price-shop del .amount { color: #767676 !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: line-through !important; order: 2 !important; }

.kh-home-wrapper .card-stock-badge { width: max-content !important; display: inline-block !important; margin: 0 0 0 auto !important; flex-shrink: 0 !important; padding: 4px 10px !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; white-space: nowrap !important; }
.kh-home-wrapper .card-stock-badge.in-stock { background: #e8f5e9 !important; color: #2e7d32 !important; }
.kh-home-wrapper .card-stock-badge.out-of-stock { background: #ffebee !important; color: #c62828 !important; }

/* Product Badges (Logical Coordinates) */
.kh-home-badges-anchor { position: absolute !important; top: 20px !important; inset-inline-start: 20px !important; z-index: 50 !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
.kh-home-wishlist-anchor { position: absolute !important; top: 20px !important; inset-inline-end: 20px !important; z-index: 50 !important; }
.kh-badge { font-size: 10px !important; font-weight: 800 !important; padding: 4px 10px !important; border-radius: 4px !important; color: #fff !important; text-transform: uppercase !important; }
.kh-hot { background-color: #c0392b !important; } .kh-sale { background-color: #b34700 !important; }

.kh-home-img-wrap { display: flex !important; justify-content: center !important; align-items: center !important; margin-top: 15px !important; margin-bottom: 5px !important; }
.kh-home-img-wrap img { margin: 0 auto !important; max-height: 180px !important; object-fit: contain !important; }
.kh-home-products .product-title-shop a { font-size: 16px !important; font-weight: 800 !important; color: #2c3e50 !important; text-decoration: underline !important; line-height: 1.4 !important; min-height: 44px !important; max-height: 44px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 0 15px 0 !important; }

.kh-home-meta-row { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 15px !important; width: 100% !important; }
.kh-home-category { font-size: 11px !important; font-weight: 700 !important; color: #767676 !important; text-transform: uppercase !important; }
.star-rating { color: #FFA200 !important; font-size: 14px !important; margin: 0 !important; }
/* Hide the visible "X out of 5" text inside the WooCommerce star-rating span.
   The outer wrapper already has role="img" + aria-label so screen readers are unaffected.
   font-size:0 hides the text node; the ::before pseudo-element font-size is reset explicitly. */
.kh-home-meta-row .star-rating span { font-size: 0 !important; overflow: hidden !important; }
.kh-home-meta-row .star-rating span::before { font-size: 14px !important; }

/* Product Action Buttons */
.loop-add-btn, .loop-buy-btn { width: 100% !important; padding: 12px 0 !important; border-radius: 8px !important; font-weight: 800 !important; text-transform: uppercase !important; display: block !important; text-align: center !important; text-decoration: none !important; transition: background-color 0.3s ease, transform 0.3s ease !important; border: none !important; }
.loop-add-btn { background: #222 !important; color: #fff !important; margin-bottom: 10px !important; }
.loop-buy-btn { background: var(--kh-green, #88B437) !important; color: var(--kh-btn-text, #1a1a1a) !important; }
.loop-add-btn:hover { background: #3b3b3b !important; transform: translateY(-2px) !important; }
.loop-buy-btn:hover { background: var(--kh-green-dark, #769d2f) !important; transform: translateY(-2px) !important; }

/* Ensure button element matches anchor appearance exactly */
button.loop-add-btn,
button.loop-buy-btn {
    font-family: inherit !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Disabled Buttons — home-specific colours */
.kh-home-wrapper .kh-disabled-btn {
    background: #e2e2e2 !important;
    color: #a0a0a0 !important;
}

.kh-home-wrapper button.loop-buy-btn.kh-disabled-btn {
    margin-bottom: 0 !important;
}


/* ==========================================================================
   5. EXPERT SUPPORT & GUIDES
   ========================================================================== */
.kh-home-support { max-width: 100% !important; background: #f9fbf7 !important; padding: 80px 20px !important; margin: 70px 0 !important; border-top: 1px solid #eeeeee !important; border-bottom: 1px solid #eeeeee !important; }
.kh-support-container { max-width: 1200px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 80px !important; }
.kh-support-content { flex: 1 !important; max-width: 600px !important; }
.kh-support-subtitle { font-size: 13px !important; font-weight: 900 !important; color: #4f7a14 !important; text-transform: uppercase !important; letter-spacing: 2px !important; margin-bottom: 15px !important; display: block !important; }
.kh-support-title { font-size: 36px !important; font-weight: 900 !important; color: #222222 !important; line-height: 1.3 !important; margin-bottom: 20px !important; text-align: start !important; }
.kh-support-desc { font-size: 16px !important; color: #555555 !important; line-height: 1.6 !important; margin-bottom: 35px !important; text-align: start !important; }
.kh-support-actions { display: flex !important; gap: 20px !important; flex-wrap: wrap !important; }

.kh-btn-whatsapp { display: flex !important; align-items: center !important; gap: 10px !important; background: #25D366 !important; color: #1a1a1a !important; border: none !important; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important; padding: 15px 30px !important; border-radius: 8px !important; font-weight: 800 !important; font-size: 16px !important; text-decoration: none !important; transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important; }
.kh-btn-whatsapp:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important; background: #20bd5a !important; color: #1a1a1a !important; }

.kh-support-visual { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 20px !important; }
.kh-support-feature { display: flex !important; align-items: center !important; gap: 20px !important; background: #ffffff !important; padding: 25px !important; border-radius: 12px !important; border: 1px solid #eeeeee !important; box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; }
.kh-support-feature:hover { transform: translateX(-10px) !important; border-color: var(--kh-green, #88B437) !important; box-shadow: 0 10px 25px var(--kh-green-shadow-10) !important; }
html[dir="rtl"] .kh-support-feature:hover { transform: translateX(10px) !important; } /* RTL Fix */

.kh-sf-icon { background: var(--kh-green-shadow-10) !important; width: 60px !important; height: 60px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.kh-sf-text h3 { color: #222222 !important; font-size: 17px !important; font-weight: 800 !important; margin: 0 0 5px 0 !important; text-align: start !important; }
.kh-sf-text p { color: #666666 !important; font-size: 14px !important; margin: 0 !important; text-align: start !important; }


/* ==========================================================================
   6. DYNAMIC CUSTOMER REVIEWS (CusRev)
   ========================================================================== */
.kh-dynamic-reviews-wrapper { padding: 20px 0 !important; position: relative !important; }

.cr-reviews-slider .slick-list { margin: 0 -15px !important; }
.cr-reviews-slider .slick-track { display: flex !important; align-items: stretch !important; }
.cr-reviews-slider .slick-slide { margin: 0 15px !important; height: auto !important; display: flex !important; }
.cr-reviews-slider .slick-slide > div { width: 100% !important; height: 100% !important; }

/* The Main Single Card Design */
.kh-dynamic-reviews-wrapper .ivole-review-card,
.kh-dynamic-reviews-wrapper .cr-review-card {
    background: #ffffff !important; 
    border: 1px solid #eeeeee !important; 
    border-top: 4px solid var(--kh-green, #88B437) !important; 
    border-radius: 12px !important; 
    padding: 35px 30px !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
    text-align: start !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; 
    height: 100% !important; 
    min-height: 250px !important;
}

/* Strip All Plugin Inner Boxes (Fixes Gray BG) */
.kh-dynamic-reviews-wrapper .cr-review-card > div,
.kh-dynamic-reviews-wrapper .cr-review-card-inner,
.kh-dynamic-reviews-wrapper .cr-review-card .middle-row { 
    border: none !important;
    background: transparent !important;
    background-color: transparent !important; 
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* top-row: outer flex container — left-anchored */
.kh-dynamic-reviews-wrapper .cr-review-card .top-row,
.kh-dynamic-reviews-wrapper .cr-review-profile,
.kh-dynamic-reviews-wrapper .ivole-review-profile {
    border-bottom: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
    width: 100% !important;
}

/* review-thumbnail: the plugin wrapper that holds avatar + checkmark + reviewer name.
   Force it to a flex row anchored to the start (left in LTR, right in RTL). */
.kh-dynamic-reviews-wrapper .review-thumbnail {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
}

/* cr-avatar-check (the green checkmark div): inline flex, no shrink */
.kh-dynamic-reviews-wrapper .cr-avatar-check {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    order: 0 !important;
}

/* reviewer div: flatten to inline-flex row (override plugin's flex-direction: column) */
.kh-dynamic-reviews-wrapper .reviewer {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    order: 1 !important;
}

/* reviewer-name: the actual text node wrapper */
.kh-dynamic-reviews-wrapper .reviewer-name {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #222222 !important;
    text-transform: uppercase !important;
    display: inline !important;
    margin: 0 !important;
    text-align: start !important;
    line-height: 1.2 !important;
}

/* reviewer-verified: hide the secondary verified text label (checkmark SVG already shows it) */
.kh-dynamic-reviews-wrapper .reviewer-verified {
    display: none !important;
}

/* cr-review-author fallback for ivole markup */
.kh-dynamic-reviews-wrapper .cr-review-author,
.kh-dynamic-reviews-wrapper .ivole-review-author {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #222222 !important;
    text-transform: uppercase !important;
    display: inline !important;
    margin: 0 !important;
    text-align: start !important;
    line-height: 1.2 !important;
}

/* Hide the round avatar photo — checkmark is the only visual identifier needed */
.kh-dynamic-reviews-wrapper .cr-avatar,
.kh-dynamic-reviews-wrapper img.avatar {
    display: none !important;
}

/* Verified Badge */
.kh-dynamic-reviews-wrapper .cr-verified-badge,
.kh-dynamic-reviews-wrapper .ivole-verified-badge {
    display: inline-flex !important;
    align-items: center !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important;
}

/* RTL: flip the review-thumbnail row so checkmark is on the right of the name */
html[dir="rtl"] .kh-dynamic-reviews-wrapper .review-thumbnail {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

html[dir="rtl"] .kh-dynamic-reviews-wrapper .reviewer {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

html[dir="rtl"] .kh-dynamic-reviews-wrapper .reviewer-name,
html[dir="rtl"] .kh-dynamic-reviews-wrapper .cr-review-author,
html[dir="rtl"] .kh-dynamic-reviews-wrapper .ivole-review-author {
    text-align: end !important;
}

.kh-dynamic-reviews-wrapper hr,
.kh-dynamic-reviews-wrapper .cr-review-date,
.kh-dynamic-reviews-wrapper time,
.kh-dynamic-reviews-wrapper span[class*="date"],
.kh-dynamic-reviews-wrapper div[class*="date"],
.kh-dynamic-reviews-wrapper .cr-verified-badge-text,
.kh-dynamic-reviews-wrapper .cr-slider-read-more { 
    display: none !important; 
}

.kh-dynamic-reviews-wrapper .cr-review-text,
.kh-dynamic-reviews-wrapper .cr-slider-review-text {
    font-size: 15px !important; 
    color: #444444 !important; 
    font-style: italic !important; 
    line-height: 1.8 !important;
    margin: 10px 0 0 0 !important;
    display: block !important;
    white-space: normal !important;
    flex-grow: 1 !important; 
    text-align: start !important;
}

.kh-dynamic-reviews-wrapper .rating-label { color: #333333 !important; font-weight: 700 !important; }

.kh-dynamic-reviews-wrapper .cr-star-rating {
    margin: 5px 0 15px 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
}
.kh-dynamic-reviews-wrapper .rating-row {
    display: flex !important;
    justify-content: flex-start !important;
}

/* Centered Slider Arrows */
.cr-reviews-slider .slick-prev,
.cr-reviews-slider .slick-next {
    background: transparent !important;
    border: 1px solid #dddddd !important;
    color: #888888 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    font-size: 0 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
    z-index: 50 !important;
    top: 50% !important;
    transform: translateY(-50%) !important; 
}

.cr-reviews-slider .slick-prev:hover,
.cr-reviews-slider .slick-next:hover,
.cr-reviews-slider .ivole-slider-prev:hover,
.cr-reviews-slider .ivole-slider-next:hover {
    background: var(--kh-green, #88B437) !important;
    border-color: var(--kh-green, #88B437) !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.1) !important; 
}

.cr-reviews-slider .slick-prev::before, .cr-reviews-slider .ivole-slider-prev::before { content: "❮" !important; font-size: 18px !important; color: inherit !important; font-family: sans-serif !important; opacity: 1 !important; }
.cr-reviews-slider .slick-next::before, .cr-reviews-slider .ivole-slider-next::before { content: "❯" !important; font-size: 18px !important; color: inherit !important; font-family: sans-serif !important; opacity: 1 !important; }

@media (max-width: 768px) {
    .cr-reviews-slider .slick-prev, .cr-reviews-slider .slick-next { display: none !important; }
}

html[dir="rtl"] .kh-dynamic-reviews-wrapper .cr-star-rating,
html[dir="rtl"] .kh-dynamic-reviews-wrapper .rating-row,
html[dir="rtl"] .kh-dynamic-reviews-wrapper .cr-review-card .top-row { justify-content: flex-end !important; }


/* ==========================================================================
   7. PARTNERS MARQUEE & LOGOS
   ========================================================================== */
.kh-home-partners { max-width: 100% !important; overflow: hidden !important; background: #fdfdfd !important; padding: 50px 0 !important; border-top: 1px solid #eee !important; margin-bottom: 0 !important; }

.kh-partners-marquee {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important; 
}

.kh-partners-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    align-items: center !important;
    gap: 70px !important;
    padding: 0 35px !important;
    animation: keyhubMarquee 35s linear infinite !important;
}

.kh-partners-marquee:hover .kh-partners-track {
    animation-play-state: paused !important;
}

@keyframes keyhubMarquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

html[dir="rtl"] .kh-partners-track {
    animation: keyhubMarqueeRTL 35s linear infinite !important;
}

@keyframes keyhubMarqueeRTL {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(50%, 0, 0); }
}

/* WCAG Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
    .kh-partners-track, html[dir="rtl"] .kh-partners-track {
        animation: none !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 40px !important;
    }
}

.kh-partner-logo {
    width: 140px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.kh-partner-logo img {
    width: 100% !important; 
    height: auto !important;
    max-height: 80px !important; 
    object-fit: contain !important; 
    filter: grayscale(100%) !important; 
    opacity: 0.6 !important; 
    transition: 0.3s ease !important; 
}

.kh-partner-logo img:hover { 
    filter: grayscale(0%) !important; 
    opacity: 1 !important; 
}


/* ==========================================================================
   8. PREMIUM BLOG GRID
   ========================================================================== */
.kh-blog-grid { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 30px !important; 
}

.kh-blog-card { 
    background: #fff !important; 
    border: 1px solid #eee !important; 
    border-radius: 16px !important; 
    overflow: hidden !important; 
    text-decoration: none !important; 
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; 
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; 
}

.kh-blog-card:hover { 
    transform: translateY(-8px) !important; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important; 
    border-color: var(--kh-green, #88B437) !important; 
}

.kh-blog-img { 
    width: 100% !important; 
    aspect-ratio: 16 / 9 !important; 
    height: auto !important; 
    background-size: cover !important; 
    background-position: center center !important; 
    background-repeat: no-repeat !important;
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #eee !important;
    display: block !important;
}

.kh-blog-content { 
    padding: 25px !important; 
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    text-align: start !important;
}

.kh-blog-content h3 { 
    font-size: 19px !important; 
    font-weight: 900 !important; 
    color: #222 !important; 
    margin: 0 0 15px 0 !important; 
    line-height: 1.4 !important;
    min-height: 54px !important; 
}

.kh-blog-readmore {
    color: #4f7a14 !important; 
    font-size: 14px !important; 
    font-weight: 800 !important; 
    margin-top: auto !important; 
}


/* ==========================================================================
   9. RTL (ARABIC) & MOBILE OPTIMIZATION
   ========================================================================== */

html[dir="rtl"] .kh-home-wrapper { direction: rtl !important; }

/* Mirror icons for RTL */
html[dir="rtl"] .kh-slider-arrow svg, 
html[dir="rtl"] .kh-cat-arrow svg { 
    transform: scaleX(-1) !important; 
}

@media (max-width: 992px) { 
    .kh-blog-grid { grid-template-columns: 1fr !important; max-width: 500px !important; margin: 0 auto !important; } 
    .kh-blog-img { aspect-ratio: 16 / 9 !important; }
}


/* ==========================================================================
   10. FINAL CLUTTER REMOVAL & WCAG FOCUS STATES
   ========================================================================== */

/* Cusrev Fixes */
.kh-dynamic-reviews-wrapper .cr-slider-review-text,
.kh-dynamic-reviews-wrapper .cr-review-text,
.kh-dynamic-reviews-wrapper [class*="review-text"] {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; 
}

.kh-dynamic-reviews-wrapper [class*="verified"],
.kh-dynamic-reviews-wrapper .cr-verified-badge,
.kh-dynamic-reviews-wrapper svg[class*="verified"],
.kh-dynamic-reviews-wrapper .cr-slider-verified {
    display: none !important;
}

/* View All Articles Button */
.kh-view-all-container {
    text-align: center;
    margin-top: 50px; 
    width: 100%;
}

.kh-btn-view-all { padding: 15px 35px !important; border-radius: 8px !important; font-size: 16px !important; font-weight: 800 !important; text-decoration: none !important; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important; background: transparent !important; color: #333 !important; border: 2px solid #ddd !important; }
.kh-btn-view-all:hover { background: #333 !important; color: #fff !important; }

/* WCAG 2.4.7 FOCUS VISIBLE GLOBALS */
.kh-btn-primary:focus-visible {
    outline: 3px solid var(--kh-btn-text, #1a1a1a) !important;
    outline-offset: 3px !important;
}

.kh-btn-secondary:focus-visible,
.kh-btn-view-all:focus-visible,
.kh-btn-whatsapp:focus-visible {
    outline: 3px solid var(--kh-green, #88B437) !important;
    outline-offset: 3px !important;
}

.kh-slider-arrow:focus-visible,
.kh-cat-arrow:focus-visible {
    outline: 3px solid var(--kh-green, #88B437) !important;
    outline-offset: 2px !important;
    background: var(--kh-green, #88B437) !important;
    color: #fff !important;
}

.kh-cat-card:focus-visible,
.kh-blog-card:focus-visible {
    outline: 3px solid var(--kh-green, #88B437) !important;
    outline-offset: 4px !important;
    border-color: var(--kh-green, #88B437) !important;
}

.loop-add-btn:focus-visible,
.loop-buy-btn:focus-visible {
    outline: 3px solid var(--kh-green, #88B437) !important;
    outline-offset: 2px !important;
}


/* ==========================================================================
   11. MOBILE & TABLET RESPONSIVE FIXES (V6 - WIDER PRODUCT CARDS)
   ========================================================================== */
@media (max-width: 992px) { 
    .kh-product-slider .products { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 768px) {
    /* 1. Hero Section: Stack Buttons Full-Width */
    .kh-home-hero { padding: 40px 20px 40px 20px !important; } 
    .kh-hero-title { font-size: 28px !important; }
    .kh-hero-buttons { flex-direction: column !important; width: 100% !important; gap: 12px !important; }
    .kh-btn-primary, .kh-btn-secondary { width: 100% !important; text-align: center !important; }

    /* OVERLAP FIX */
    .kh-home-trust-container { margin-top: 20px !important; padding: 0 15px !important; }

    /* 2. Trust Badges: Premium Vertical Checklist */
    .kh-home-trust {
        grid-template-columns: 1fr !important; 
        padding: 10px 20px !important;
        gap: 0 !important; 
    }
    .kh-trust-item {
        flex-direction: row !important; 
        align-items: center !important; 
        text-align: end !important; 
        padding: 15px 0 !important;
        border-inline-end: none !important; 
        border-bottom: 1px solid #f0f0f0 !important;
    }
    .kh-trust-item:last-child { border-bottom: none !important; }
    .kh-trust-icon { margin-top: 0 !important; margin-inline-start: 15px !important; width: 40px !important; height: 40px !important; font-size: 18px !important; flex-shrink: 0 !important; }
    .kh-trust-text .kh-trust-title { font-size: 15px !important; margin-bottom: 2px !important; }

    /* 3. Products Carousel */
    .kh-products-track li.product {
        width: 280px !important;
        flex: 0 0 280px !important; 
        min-height: auto !important;
        padding: 20px !important;
    }
    .kh-home-products .product-title-shop a { font-size: 15px !important; } 

    /* 4. Categories Carousel */
    .kh-cat-card { 
        width: 150px !important; 
        padding: 15px 10px !important; 
        min-height: auto !important;
    }
    .kh-cat-icon { font-size: 24px !important; margin-bottom: 8px !important; }
    .kh-cat-card span { font-size: 13px !important; }
    
    .kh-carousel-with-arrows .kh-slider-arrow,
    .kh-carousel-with-arrows .kh-cat-arrow { display: none !important; }

    /* 5. Support Section */
    .kh-home-support .kh-support-container { flex-direction: column !important; text-align: center !important; }
    .kh-support-actions { justify-content: center !important; width: 100% !important; }
    .kh-support-visual { max-width: 100% !important; margin-top: 30px !important; }

    /* 6. Info, Reviews & Blog Grids: Stack vertically */
    .kh-info-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
    .kh-reviews-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
    .kh-blog-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}