/*
 * slideswift-skin.css  v5  — TOKEN-BASED
 * Koi bhi hex color yahan NAHI hai.
 * Sab kuch slideswift-tokens.css ke var() se aata hai.
 *
 * SKIN CHANGE KARNA HO? slideswift-tokens.css kholo, wahan karo.
 * Yeh file kabhi mat chhona.
 *
 * LOAD ORDER in header.php (BEFORE <?php wp_head(); ?>):
 *   <link rel="stylesheet" href=".../slideswift-tokens.css">
 *   <link rel="stylesheet" href=".../slideswift-skin.css">
 */

/* ═══════════════════════════════════════════
   1. NAV BAR
   Nav bg = --ss-blue-1 (hero gradient 0%)
   Dono ek hi color → seamless merge
═══════════════════════════════════════════ */

.tkb-header {
    background: var(--ss-blue-1) !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

.tkb-logo-text span {
    color: var(--ss-text-accent) !important;
}

.tkb-nav-inner a {
    color: var(--ss-text-soft) !important;
}
.tkb-nav-inner a:hover,
.tkb-nav-inner a.active {
    color: var(--ss-text-white) !important;
    border-bottom-color: var(--ss-orange) !important;
}

.tkb-cart-count {
    background: var(--ss-orange) !important;
    color: var(--ss-text-white) !important;
}

.tkb-cta-btn {
    background: var(--ss-orange) !important;
    color: var(--ss-text-white) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(249,115,22,0.35) !important;
}
.tkb-cta-btn:hover {
    background: var(--ss-orange-h) !important;
    box-shadow: 0 4px 14px rgba(249,115,22,0.45) !important;
}

/* ═══════════════════════════════════════════
   2. INFO RIBBON
═══════════════════════════════════════════ */

.tkb-info-ribbon {
    background: var(--ss-ribbon-bg) !important;
    border-top: 1px solid rgba(255,255,255,0.10) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

.tkb-info-ribbon span,
.tkb-info-ribbon p {
    color: var(--ss-text-soft) !important;
}

.tkb-info-ribbon a {
    color: var(--ss-text-warm) !important;
}
.tkb-info-ribbon a:hover {
    color: var(--ss-text-white) !important;
}

/* ═══════════════════════════════════════════
   3. MEGA MENU
═══════════════════════════════════════════ */

.smn-dropdown a.smn-link:hover {
    background: var(--ss-light-bg) !important;
    color: var(--ss-link-blue) !important;
}

/* ═══════════════════════════════════════════
   4. HERO — full gradient
   Option C style: nav transparent, hero grad
   covers the whole above-fold canvas
═══════════════════════════════════════════ */

.tkb-hero {
    background: var(--ss-grad-hero) !important;
}

/* Search button */
.tkb-hero-search-btn,
.tkb-search-btn,
.tkb-hero button[type="submit"],
.tkb-hero input[type="submit"],
.tkb-hero .search-submit,
#tkb-hero-search-btn {
    background: var(--ss-orange) !important;
    color: var(--ss-text-white) !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(249,115,22,0.40) !important;
}
.tkb-hero-search-btn:hover,
.tkb-search-btn:hover {
    background: var(--ss-orange-h) !important;
}

/* Category chips inside hero */
.tkb-hero .tkb-cat-chip,
.tkb-hero-chips .tkb-cat-chip {
    background: rgba(255,255,255,0.15) !important;
    color: var(--ss-text-white) !important;
    border-color: rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(4px) !important;
}
.tkb-hero .tkb-cat-chip:hover,
.tkb-hero-chips .tkb-cat-chip:hover {
    background: rgba(255,255,255,0.28) !important;
    border-color: rgba(255,255,255,0.60) !important;
}

/* ═══════════════════════════════════════════
   5. STATS BAR — seamless hero continuation
═══════════════════════════════════════════ */

.tkb-stats {
    background: var(--ss-grad-stats) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.09) !important;
}

.tkb-stat-num {
    color: var(--ss-text-white) !important;
}

.tkb-stat-label {
    color: var(--ss-text-accent) !important;
}

/* ═══════════════════════════════════════════
   6. CATEGORY CHIPS BAR
═══════════════════════════════════════════ */

.tkb-categories-bar {
    background: var(--ss-light-bg) !important;
    border-bottom: 1px solid var(--ss-light-border) !important;
}

.tkb-chips-fade-right {
    background: linear-gradient(to right, transparent, var(--ss-light-bg)) !important;
}

.tkb-cat-chip {
    background: var(--ss-text-white) !important;
    color: var(--ss-light-text) !important;
    border-color: var(--ss-light-border) !important;
}
.tkb-cat-chip:hover {
    border-color: var(--ss-chip-active) !important;
    color: var(--ss-chip-active) !important;
    background: var(--ss-light-bg) !important;
}
.tkb-cat-chip.active {
    background: var(--ss-chip-active) !important;
    color: var(--ss-text-white) !important;
    border-color: var(--ss-chip-active) !important;
}

.tkb-chip-featured {
    background: var(--ss-grad-chip-featured) !important;
    color: #fbbf24 !important;
    border-color: rgba(251,191,36,0.50) !important;
}

/* ═══════════════════════════════════════════
   7. VIEW ALL BUTTON
═══════════════════════════════════════════ */

.view-all {
    color: var(--ss-link-blue) !important;
    border-color: var(--ss-light-border) !important;
    background: var(--ss-light-bg) !important;
}
.view-all:hover {
    background: #dbeafe !important;
    border-color: var(--ss-link-blue) !important;
    color: var(--ss-link-dark) !important;
}

/* ═══════════════════════════════════════════
   8. BROWSE CARD HOVER
═══════════════════════════════════════════ */

.tkb-browse-card:hover {
    border-color: var(--ss-browse-border) !important;
    background: var(--ss-browse-bg) !important;
    box-shadow: 0 6px 20px var(--ss-card-shadow) !important;
}

/* ═══════════════════════════════════════════
   9. TWO WAYS SECTION
═══════════════════════════════════════════ */

.tkb-twoways-eyebrow {
    background: #dbeafe !important;
    color: var(--ss-light-text) !important;
}

.tkb-tw-list li::before {
    background-color: #dbeafe !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6L5 9L10 3' stroke='%232044b0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: 11px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.tkb-tw-btn-dark {
    background: var(--ss-orange) !important;
    color: var(--ss-text-white) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(249,115,22,0.30) !important;
}
.tkb-tw-btn-dark:hover {
    background: var(--ss-orange-h) !important;
    box-shadow: 0 6px 20px rgba(249,115,22,0.40) !important;
}

.tkb-tw-footnote a {
    color: var(--ss-link-blue) !important;
}

/* ═══════════════════════════════════════════
   10. EDIT ONLINE / VIDEO SECTION
═══════════════════════════════════════════ */

.tkb-video-eyebrow {
    background: rgba(32,68,176,0.15) !important;
    color: var(--ss-text-accent) !important;
    border-color: rgba(32,68,176,0.28) !important;
}

.tkb-video-cta {
    background: var(--ss-orange) !important;
    color: var(--ss-text-white) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(249,115,22,0.30) !important;
}
.tkb-video-cta:hover {
    background: var(--ss-orange-h) !important;
}

.tkb-video-badge {
    border-color: rgba(32,68,176,0.28) !important;
    color: var(--ss-text-accent) !important;
}

/* ═══════════════════════════════════════════
   11. FAQ
═══════════════════════════════════════════ */

.tkb-faq-q:hover,
.tkb-faq-item.open .tkb-faq-q {
    color: var(--ss-link-blue) !important;
}
.tkb-faq-item.open .tkb-faq-icon {
    color: var(--ss-orange) !important;
    transform: rotate(45deg) !important;
}

/* ═══════════════════════════════════════════
   12. BOTTOM CTA — override inline purple
═══════════════════════════════════════════ */

section[style*="312e81"],
section[style*="4f46e5"],
section[style*="6366f1"],
.tkb-bottom-cta-section {
    background: var(--ss-grad-cta) !important;
}

a[style*="color:#4f46e5"] {
    color: var(--ss-orange) !important;
}

/* ═══════════════════════════════════════════
   13. TRUST BAR
═══════════════════════════════════════════ */

.tkb-trust-bar {
    background: var(--ss-light-bg) !important;
    border-top: 1px solid var(--ss-light-border) !important;
    border-bottom: 1px solid var(--ss-light-border) !important;
}

.tkb-trust-item {
    color: var(--ss-light-text) !important;
}

/* ═══════════════════════════════════════════
   14. PRODUCT CARD HOVER
═══════════════════════════════════════════ */

.tkb-card:hover {
    border-color: var(--ss-card-border-h) !important;
    box-shadow: 0 8px 24px var(--ss-card-shadow) !important;
}

/* ═══════════════════════════════════════════
   15. USER DROPDOWN
═══════════════════════════════════════════ */

.tkb-user-dropdown {
    background: var(--ss-dropdown-bg) !important;
    border-color: rgba(255,255,255,0.10) !important;
}
.tkb-user-dropdown a:hover {
    background: rgba(255,255,255,0.10) !important;
}

/* ═══════════════════════════════════════════
   16. PURPLE KILL — any leftover inline purple
═══════════════════════════════════════════ */

.button[style*="818cf8"],
.button[style*="6366f1"],
.button[style*="4f46e5"] {
    background: var(--ss-orange) !important;
    color: var(--ss-text-white) !important;
}