/*
Theme Name: JKDA
Theme URI: https://jkdataacademy.com/
Author: JK Data Academy
Author URI: https://jkdataacademy.com/
Description: JK Data Academy (JKDA) Sovereign India storefront theme — presentation layer only. WooCommerce owns all product data. 233 India Hinglish products, INR currency, custom bundle discount engine.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jkda
Tags: woocommerce, custom-theme, education, ecommerce
*/

/* ==========================================================================

   HOME.md §2 — DESIGN TOKENS (:root custom properties)

   Never hard-code a value where a token exists (§2 / §12 item 14).

   ========================================================================== */

:root {

    /* §2.1 Colors */

    --jkda-ink: #111827;

    --jkda-ink2: #3A3F4B;

    --jkda-ink3: #6B7280;

    --jkda-ink4: #9CA3AF;

    --jkda-paper: #FAFAF8;

    --jkda-paper2: #F3F2EE;

    --jkda-paper3: #E8E6DF;

    --jkda-saffron: #F5600A;

    --jkda-saffron2: #E8510A;

    --jkda-saffron-light: #FEF0E8;

    --jkda-saffron-mid: #FBCBAA;

    --jkda-teal: #0D766E;

    --jkda-teal2: #0F8F86;

    --jkda-teal-light: #E8F7F6;

    --jkda-ruby: #B01F3A;

    --jkda-ruby-light: #FAEAED;

    --jkda-gold: #8B6914;

    --jkda-gold-light: #FBF3DC;

    --jkda-border: #DDD9CF;

    --jkda-border2: #C8C4B8;



    /* §2.2 Font families */

    --jkda-ff-display: 'Outfit', 'Noto Sans', sans-serif;

    --jkda-ff-brand: 'Outfit', 'Noto Sans', sans-serif;

    --jkda-ff-sans: 'Outfit', 'Noto Sans', -apple-system, sans-serif;

    --jkda-font-sans: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --jkda-font-mono: 'JetBrains Mono', monospace;



    /* §2.3 Spacing scale (4px base) */

    --jkda-sp-1: 4px;

    --jkda-sp-2: 8px;

    --jkda-sp-3: 12px;

    --jkda-sp-4: 16px;

    --jkda-sp-5: 20px;

    --jkda-sp-6: 24px;

    --jkda-sp-8: 32px;

    --jkda-sp-10: 40px;

    --jkda-sp-12: 48px;

    --jkda-sp-16: 64px;

    --jkda-sp-20: 80px;



    /* §2.4 Radii / shadows / motion */

    --jkda-radius: 6px;

    --jkda-radius2: 10px;

    --jkda-radius3: 14px;

    --jkda-shadow-sm: 0 1px 3px rgba(13, 17, 23, 0.04);

    --jkda-shadow: 0 4px 20px rgba(13, 17, 23, 0.06);

    --jkda-shadow-lg: 0 8px 32px rgba(13, 17, 23, 0.1);

    --jkda-shadow-hover: 0 8px 28px rgba(13, 17, 23, 0.09);

    --jkda-ease: cubic-bezier(0.4, 0, 0.2, 1);

    --jkda-duration: 0.2s;



    /* §2.5 Image ratios */

    --jkda-cover-ratio: 400 / 550;

    --jkda-bundle-ratio: 210 / 297;

}



/* ==========================================================================

   §4 — GLOBAL RESET / BASE

   ========================================================================== */

*,

*::before,

*::after {

    box-sizing: border-box;

}



html {

    -webkit-text-size-adjust: 100%;

}



body {

    margin: 0;

    font-family: var(--jkda-ff-sans);

    font-size: 15px;

    line-height: 1.6;

    color: var(--jkda-ink);

    background: var(--jkda-paper);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



a {

    color: var(--jkda-teal);

    text-decoration: none;

    transition: color var(--jkda-duration) var(--jkda-ease);

}



a:hover,

a:focus {

    color: var(--jkda-saffron2);

    text-decoration: none;

}



ul,

ol {

    margin: 0;

    padding: 0;

}



h1, h2, h3, h4, h5, h6, p {

    margin: 0;

}



button {

    font-family: inherit;

}



:focus-visible {

    outline: 2px solid var(--jkda-saffron);

    outline-offset: 2px;

}



/* ==========================================================================

   §3 — TYPOGRAPHY (type scale)

   ========================================================================== */

.jkda-display-xl {

    font-family: var(--jkda-ff-display);

    font-size: clamp(32px, 5vw, 48px);

    font-weight: 600;

    line-height: 1.12;

    letter-spacing: -0.025em;

}



.jkda-display-lg {

    font-family: var(--jkda-ff-display);

    font-size: clamp(26px, 3.5vw, 36px);

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -0.02em;

}



.jkda-heading-lg {

    font-family: var(--jkda-ff-display);

    font-size: 28px;

    font-weight: 600;

    line-height: 1.25;

    letter-spacing: -0.02em;

}



.jkda-heading-md {

    font-family: var(--jkda-ff-display);

    font-size: 22px;

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: -0.01em;

}



.jkda-heading-sm {

    font-family: var(--jkda-ff-brand);

    font-size: 18px;

    font-weight: 700;

    line-height: 1.35;

}



.jkda-body-lg {

    font-family: var(--jkda-ff-sans);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.7;

}



.jkda-body {

    font-family: var(--jkda-ff-sans);

    font-size: 15px;

    font-weight: 400;

    line-height: 1.6;

}



.jkda-body-sm {

    font-family: var(--jkda-ff-sans);

    font-size: 13px;

    font-weight: 400;

    line-height: 1.6;

}



.jkda-caption {

    font-family: var(--jkda-ff-sans);

    font-size: 12px;

    font-weight: 400;

    line-height: 1.5;

}



.jkda-overline {

    font-family: var(--jkda-ff-sans);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}



/* ==========================================================================

   §4 — CONTAINERS

   ========================================================================== */

.jkda-container {

    max-width: 1240px;

    margin: 0 auto;

    padding: 0 24px;

}



.jkda-container--narrow {

    max-width: 960px;

    margin: 0 auto;

    padding: 0 24px;

}



/* ==========================================================================

   §5 — BUTTONS & CTAs

   ========================================================================== */

.jkda-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: var(--jkda-saffron);

    color: #fff;

    border: none;

    padding: 13px 28px;

    border-radius: var(--jkda-radius);

    font-family: var(--jkda-ff-sans);

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;

    cursor: pointer;

    text-decoration: none;

    transition: background var(--jkda-duration) var(--jkda-ease),

        border-color var(--jkda-duration) var(--jkda-ease),

        color var(--jkda-duration) var(--jkda-ease);

}



.jkda-button:hover,

.jkda-button:focus-visible {

    background: var(--jkda-saffron2);

    color: #fff;

}



.jkda-button--outline {

    background: transparent;

    border: 1.5px solid var(--jkda-border2);

    color: var(--jkda-ink);

}



.jkda-button--outline:hover,

.jkda-button--outline:focus-visible {

    background: transparent;

    border-color: var(--jkda-teal);

    color: var(--jkda-teal);

}



.jkda-button--outline-white {

    background: transparent;

    border: 1.5px solid rgba(255, 255, 255, 0.3);

    color: #fff;

}



.jkda-button--outline-white:hover,

.jkda-button--outline-white:focus-visible {

    border-color: rgba(255, 255, 255, 0.6);

    background: rgba(255, 255, 255, 0.06);

    color: #fff;

}



.jkda-button--teal {

    background: var(--jkda-teal);

    color: #fff;

    border: none;

}



.jkda-button--teal:hover,

.jkda-button--teal:focus-visible {

    background: var(--jkda-teal2);

    color: #fff;

}



.jkda-button--saffron {

    background: var(--jkda-saffron);

    color: #fff;

    border: none;

}



.jkda-button--saffron:hover,

.jkda-button--saffron:focus-visible {

    background: var(--jkda-saffron2);

    color: #fff;

}



.jkda-button--sm {

    padding: 8px 16px;

    font-size: 13px;

}



.jkda-button--lg {

    padding: 16px 36px;

    font-size: 16px;

}



/* §5 — Pill CTA (card link-button) */

.jkda-pill-cta {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 13px;

    font-weight: 600;

    color: var(--jkda-saffron);

    background: var(--jkda-saffron-light);

    border: 1px solid var(--jkda-saffron-mid);

    padding: 6px 14px;

    border-radius: 20px;

    text-decoration: none;

    cursor: pointer;

    transition: background var(--jkda-duration) var(--jkda-ease),

        color var(--jkda-duration) var(--jkda-ease),

        border-color var(--jkda-duration) var(--jkda-ease);

}



.jkda-pill-cta:hover,

.jkda-pill-cta:focus-visible {

    background: var(--jkda-saffron);

    color: #fff;

    border-color: var(--jkda-saffron);

}



/* §5 — Header "BUY NOW" nav CTA */

.jkda-nav-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: var(--jkda-saffron);

    color: #fff;

    padding: 11px 24px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    text-decoration: none;

    line-height: 1;

    transition: all var(--jkda-duration) var(--jkda-ease);

    box-shadow: 0 4px 14px rgba(245, 96, 10, 0.35);

}



.jkda-nav-cta:hover,

.jkda-nav-cta:focus-visible {

    background: var(--jkda-saffron2);

    color: #fff;

    transform: translateY(-1px);

    box-shadow: 0 6px 18px rgba(245, 96, 10, 0.45);

}



/* ==========================================================================

   §6 — BADGES & PRICE DISPLAY

   ========================================================================== */

.jkda-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 11px;

    font-weight: 600;

    padding: 4px 10px;

    border-radius: 6px;

    letter-spacing: 0.02em;

    line-height: 1.2;

}



.jkda-badge--saffron {

    background: var(--jkda-saffron-light);

    color: var(--jkda-saffron);

    border: 1px solid var(--jkda-saffron-mid);

}



.jkda-badge--teal {

    background: var(--jkda-teal-light);

    color: var(--jkda-teal);

}



.jkda-badge--ruby {

    background: var(--jkda-ruby-light);

    color: var(--jkda-ruby);

}



.jkda-badge--gold {

    background: var(--jkda-gold-light);

    color: var(--jkda-gold);

}



.jkda-badge--dark {

    background: rgba(255, 255, 255, 0.1);

    color: #CBD5E1;

}



/* Price display */

.jkda-price {

    font-family: var(--jkda-ff-display);

    font-weight: 600;

    color: var(--jkda-saffron);

}



.jkda-price--lg {

    font-size: 28px;

}



.jkda-price--md {

    font-size: 20px;

}



.jkda-price--sm {

    font-size: 16px;

}



.jkda-price-original {

    font-size: 13px;

    color: var(--jkda-ink4);

    text-decoration: line-through;

}



.jkda-price-free {

    font-weight: 700;

    color: var(--jkda-teal);

}



.jkda-price-save {

    font-size: 12px;

    font-weight: 600;

    color: var(--jkda-teal);

}



/* ==========================================================================

   §7.4 — SHARED SECTION PATTERNS

   ========================================================================== */

.jkda-section {

    padding: var(--jkda-sp-16) 0;

}



.jkda-section--sm {

    padding: var(--jkda-sp-12) 0;

}



.jkda-section--lg {

    padding: var(--jkda-sp-20) 0;

}



.jkda-section--alt {

    background: var(--jkda-paper2);

}



.jkda-section--dark {

    background: var(--jkda-ink);

    color: #fff;

}



.jkda-section-header {

    margin-bottom: var(--jkda-sp-10);

}



.jkda-section-header--center {

    text-align: center;

}



.jkda-section-header--center .jkda-section-sub {

    margin-left: auto;

    margin-right: auto;

}



.jkda-section-eyebrow {

    color: var(--jkda-saffron);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    margin: 0 0 var(--jkda-sp-2);

}



.jkda-section-title {

    font-family: var(--jkda-ff-display);

    font-size: clamp(24px, 3vw, 30px);

    font-weight: 600;

    letter-spacing: -0.02em;

    line-height: 1.25;

}



.jkda-section-sub {

    color: var(--jkda-ink3);

    font-size: 15px;

    line-height: 1.7;

    max-width: 640px;

}



.jkda-section-actions {

    margin-top: var(--jkda-sp-8);

    display: flex;

    gap: var(--jkda-sp-3);

    flex-wrap: wrap;

}



.jkda-section-header--center .jkda-section-actions {

    justify-content: center;

}



/* ==========================================================================

   §7.1 — HEADER

   ========================================================================== */

.jkda-header {

    background: #0B132B !important;

    position: sticky;

    top: 0;

    z-index: 100;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);

}



.jkda-nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 84px;

    gap: 20px;

    max-width: 1320px;

    margin: 0 auto;

    padding: 0 24px;

}



.jkda-brand {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    flex-shrink: 0;

    font-family: var(--jkda-ff-brand);

    font-size: 24px;

    font-weight: 800;

    color: #fff;

    text-transform: uppercase;

    letter-spacing: 0.02em;

    text-decoration: none;

    line-height: 1;

    white-space: nowrap !important;

}



.jkda-brand:hover,

.jkda-brand:focus-visible {

    color: #fff;

}



.jkda-brand-logo,

.jkda-brand .jkda-brand-logo,

.jkda-header .jkda-brand-logo,

.woocommerce .jkda-header .jkda-brand-logo,

.woocommerce-page .jkda-header .jkda-brand-logo,

.woocommerce .jkda-brand-logo,

.woocommerce-page .jkda-brand-logo,

img.jkda-brand-logo {

    width: 44px !important;

    max-width: 44px !important;

    min-width: 44px !important;

    height: 44px !important;

    max-height: 44px !important;

    min-height: 44px !important;

    object-fit: contain !important;

    display: block !important;

    flex-shrink: 0 !important;

}



.jkda-brand-accent {

    color: var(--jkda-saffron);

}



.jkda-nav-links {

    display: flex;

    align-items: center;

    gap: 24px;

    list-style: none;

    margin: 0;

    padding: 0;

    line-height: 1;

    flex-shrink: 0;

}



.jkda-nav-links li {

    display: inline-flex;

    align-items: center;

    line-height: 1;

    white-space: nowrap !important;

}



.jkda-nav-links a {

    font-family: var(--jkda-ff-display, 'Outfit', sans-serif);

    font-size: 16px;

    color: #F1F5F9;

    font-weight: 600;

    letter-spacing: 0.015em;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    line-height: 1;

    padding: 6px 0;

    white-space: nowrap !important;

    transition: color var(--jkda-duration) var(--jkda-ease);

}



.jkda-nav-links a:hover,

.jkda-nav-links a:focus-visible,

.jkda-nav-links .current-menu-item > a,

.jkda-nav-links .current_page_item > a {

    color: var(--jkda-saffron);

}



.jkda-nav-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-shrink: 0;

    line-height: 1;

}



.jkda-nav-search,

.jkda-nav-account {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #F1F5F9;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    text-decoration: none;

    background: rgba(255, 255, 255, 0.05);

    border: none;

    cursor: pointer;

    transition: all 0.2s ease;

}



.jkda-nav-search:hover,

.jkda-nav-search:focus-visible,

.jkda-nav-account:hover,

.jkda-nav-account:focus-visible {

    color: var(--jkda-saffron);

    background: rgba(255, 255, 255, 0.12);

}



.jkda-nav-cart {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #F1F5F9;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    text-decoration: none;

    background: rgba(255, 255, 255, 0.05);

    transition: all 0.2s ease;

}



.jkda-nav-cart:hover,

.jkda-nav-cart:focus-visible {

    color: var(--jkda-saffron);

    background: rgba(255, 255, 255, 0.12);

}



.jkda-cart-count {

    position: absolute;

    top: 2px;

    right: 2px;

    transform: translate(25%, -25%);

    background: var(--jkda-saffron);

    color: #fff;

    font-size: 11px;

    font-weight: 800;

    padding: 2px 6px;

    border-radius: 999px;

    min-width: 18px;

    height: 18px;

    text-align: center;

    line-height: 18px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

}



.jkda-cart-count.is-empty {

    display: none;

}



.jkda-nav-toggle {

    display: none;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: none;

    color: #fff;

    padding: 8px;

    cursor: pointer;

    border-radius: var(--jkda-radius);

}



.jkda-nav-toggle:hover,

.jkda-nav-toggle:focus-visible {

    color: var(--jkda-saffron);

}



/* ==========================================================================

   Header Search Bar (SEARCH.md §2 / §3) — expandable under header nav

   ========================================================================== */

.jkda-header-search-bar {

    background: #0f172a;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    padding: 10px 0;

}



.jkda-header-search-bar[hidden] {

    display: none !important;

}



.jkda-header-search-form {

    margin: 0;

    width: 100%;

}



.jkda-header-search-inner {

    display: flex;

    align-items: center;

    gap: 12px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 8px;

    padding: 6px 14px;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.jkda-header-search-inner:focus-within {

    border-color: var(--jkda-saffron);

    box-shadow: 0 0 0 2px rgba(255, 153, 51, 0.25);

}



.jkda-header-search-icon {

    color: rgba(255, 255, 255, 0.6);

    flex-shrink: 0;

}



.jkda-header-search-input {

    flex: 1;

    background: transparent;

    border: none;

    color: #fff;

    font-size: 15px;

    font-family: inherit;

    outline: none;

    padding: 6px 0;

    min-width: 0;

}



.jkda-header-search-input::placeholder {

    color: rgba(255, 255, 255, 0.5);

}



.jkda-header-search-submit {

    flex-shrink: 0;

    padding: 6px 16px;

    font-size: 13px;

    height: 34px;

    line-height: 1;

}



.jkda-header-search-close {

    background: transparent;

    border: none;

    color: rgba(255, 255, 255, 0.6);

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px;

    border-radius: 4px;

    flex-shrink: 0;

    transition: color 0.15s ease;

}



.jkda-header-search-close:hover,

.jkda-header-search-close:focus-visible {

    color: #fff;

}



/* ==========================================================================

   §7.2 — BILLING / INVOICING STRIP (non-sticky, below header)

   ========================================================================== */

.invoicing-bar {

    display: none !important;

}



/* ==========================================================================

   §7.3 — FOOTER (About-style 4-column)

   ========================================================================== */

.footer {

    background: var(--jkda-ink);

    color: #E5E7EB;

    padding: 48px 0 24px;

    margin-top: 48px;

}



.footer-top {

    display: grid;

    grid-template-columns: 1.6fr 1fr 1fr 1fr;

    gap: 32px;

}



.footer-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-family: var(--jkda-ff-brand);

    font-size: 16px;

    font-weight: 700;

    color: #fff;

    text-transform: uppercase;

    letter-spacing: 0.01em;

    text-decoration: none;

}



.footer-logo img,

.footer-logo-img,

.footer-logo .footer-logo-img,

.footer .footer-logo img,

.woocommerce .footer .footer-logo img,

.woocommerce-page .footer .footer-logo img,

.woocommerce .footer-logo img,

.woocommerce-page .footer-logo img,

img.footer-logo-img {

    width: 40px !important;

    max-width: 40px !important;

    min-width: 40px !important;

    height: 40px !important;

    max-height: 40px !important;

    min-height: 40px !important;

    object-fit: contain !important;

    display: block !important;

    flex-shrink: 0 !important;

}



.footer-logo .jkda-brand-accent {

    color: var(--jkda-saffron);

}



.footer-lut {

    margin-top: 14px;

    font-size: 12px;

    color: #94A3B8;

    line-height: 1.6;

}



.footer-copy {

    margin-top: 20px;

    font-size: 13px;

    color: #CBD5E1;

    line-height: 1.6;

}



.footer-copy strong {

    color: #94A3B8;

}



.footer-tagline {

    margin-top: 16px;

    font-size: 13px;

    color: #CBD5E1;

    line-height: 1.6;

}



.footer-socials {

    display: flex;

    gap: 18px;

    align-items: center;

    margin-top: 20px;

    flex-wrap: wrap;

}



.footer-socials a {

    display: inline-flex;

    color: #CBD5E1;

    opacity: 0.6;

    transition: color var(--jkda-duration) var(--jkda-ease),

        opacity var(--jkda-duration) var(--jkda-ease);

}



.footer-socials a:hover,

.footer-socials a:focus-visible {

    color: var(--jkda-saffron);

    opacity: 1;

}



.footer-badges {

    display: flex;

    gap: 12px;

    margin-top: 20px;

    flex-wrap: wrap;

}



.fbadge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #CBD5E1;

    font-size: 11px;

    padding: 4px 10px;

    border-radius: 6px;

}



.footer-h {

    font-size: 12px;

    font-weight: 700;

    color: #F1F5F9;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    margin-bottom: 14px;

}



.footer-h--sub {

    margin-top: 24px;

}



.footer-links {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin: 0;

    padding: 0;

}



.footer-links a {

    color: #CBD5E1;

    font-size: 13px;

    text-decoration: none;

}



.footer-links a:hover,

.footer-links a:focus-visible {

    color: var(--jkda-saffron);

}



.footer-bottom {

    margin-top: 32px;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    font-size: 12px;

    color: #94A3B8;

}



/* ==========================================================================

   §8.1 — SECTION 1 — HERO

   ========================================================================== */

.jkda-hero {

    background: linear-gradient(180deg, #FAFAF8 0%, #F5F4EE 100%);

    color: var(--jkda-ink);

    padding: var(--jkda-sp-16) 0 var(--jkda-sp-12);

    border-bottom: 1px solid var(--jkda-border);

    overflow: hidden;

}



.jkda-hero__inner {

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: var(--jkda-sp-8);

    align-items: center;

}



.jkda-hero__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(245, 96, 10, 0.12);

    border: 1px solid rgba(245, 96, 10, 0.3);

    border-radius: 20px;

    padding: 5px 16px;

    margin-bottom: var(--jkda-sp-6);

}



.jkda-hero__eyebrow::before {

    content: "";

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--jkda-saffron);

    display: block;

}



.jkda-hero__eyebrow span {

    font-size: 11px;

    font-weight: 600;

    color: var(--jkda-saffron);

    letter-spacing: 0.02em;

    text-transform: uppercase;

}



.jkda-hero__title {

    font-family: var(--jkda-ff-display);

    font-size: clamp(34px, 4.5vw, 46px);

    font-weight: 600;

    line-height: 1.12;

    letter-spacing: -0.025em;

    margin: 0;

}



.jkda-hero__title em {

    font-style: normal;

    color: var(--jkda-saffron);

}



.jkda-hero__sub {

    font-size: 16px;

    color: var(--jkda-ink2);

    line-height: 1.7;

    max-width: 520px;

    margin-top: var(--jkda-sp-5);

}



.jkda-hero__actions {

    display: flex;

    gap: var(--jkda-sp-3);

    flex-wrap: wrap;

    margin-top: var(--jkda-sp-8);

}



.jkda-hero__stats {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    max-width: 520px;

    width: 100%;

    margin-top: 36px;

    padding-top: 24px;

    border-top: 1px solid var(--jkda-border);

}



.jkda-hero__stat {

    display: flex;

    flex-direction: column;

}



.jkda-hero__stat--left {

    align-items: flex-start;

    text-align: left;

}



.jkda-hero__stat--center {

    align-items: center;

    text-align: center;

}



.jkda-hero__stat--right {

    align-items: flex-end;

    text-align: right;

}



.jkda-hero__stat-num {

    font-family: var(--jkda-ff-display);

    font-size: clamp(34px, 3.8vw, 42px);

    font-weight: 800;

    color: var(--jkda-ink);

    line-height: 1.05;

    letter-spacing: -0.02em;

}



.jkda-hero__stat-label {

    font-family: var(--jkda-ff-sans);

    font-size: 14px;

    font-weight: 600;

    color: var(--jkda-ink3);

    margin-top: 6px;

    letter-spacing: 0.02em;

}



.jkda-hero__visual {

    display: flex;

    align-items: center;

    justify-content: center;

}



/* ==========================================================================

   §9.6 — HERO BOOK STACK

   ========================================================================== */

.jkda-book-stack {

    position: relative;

    width: 320px;

    height: 320px;

    perspective: 1000px;

}



.jkda-book-stack__item {

    position: absolute;

    border-radius: 6px;

    padding: 16px;

    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);

    display: flex;

    flex-direction: column;

    color: #fff;

    transition: transform var(--jkda-duration) var(--jkda-ease);

}



.jkda-book-stack__item--front {

    width: 200px;

    height: 270px;

    background: linear-gradient(135deg, #1A2B5E, #0E1A3A);

    z-index: 3;

    top: 25px;

    left: 60px;

}



.jkda-book-stack__item--mid {

    width: 195px;

    height: 264px;

    background: linear-gradient(135deg, #1E4A40, #0D2E28);

    z-index: 2;

    opacity: 0.85;

    top: 35px;

    left: 30px;

}



.jkda-book-stack__item--back {

    width: 190px;

    height: 258px;

    background: linear-gradient(135deg, #4A1C0A, #2C1006);

    z-index: 1;

    opacity: 0.6;

    top: 45px;

    left: 2px;

}



.jkda-book-stack__spine {

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 4px;

    background: rgba(255, 255, 255, 0.12);

    border-radius: 6px 0 0 6px;

}



.jkda-book-stack__tag {

    font-size: 8px;

    color: rgba(255, 255, 255, 0.45);

    text-transform: uppercase;

    letter-spacing: 0.08em;

}



.jkda-book-stack__title {

    font-size: 14px;

    color: #fff;

    margin-top: auto;

    font-family: var(--jkda-ff-display);

    font-weight: 600;

}



.jkda-book-stack__badge {

    display: inline-block;

    font-size: 9px;

    color: #fff;

    background: var(--jkda-saffron);

    padding: 2px 8px;

    border-radius: 999px;

    margin-top: 8px;

    align-self: flex-start;

}



.jkda-book-stack__price {

    font-size: 20px;

    color: var(--jkda-saffron);

    font-family: var(--jkda-ff-display);

    font-weight: 600;

    margin-top: 8px;

}



/* Hero hover interaction (§8.1 / §9.6) */

.jkda-book-stack.is-hovered .jkda-book-stack__item--front {

    transform: translateY(-8px) rotate(-2deg);

}



.jkda-book-stack.is-hovered .jkda-book-stack__item--mid {

    transform: translateY(-4px);

}



/* ==========================================================================

   §8.2 — SECTION 2 — TRUST BAR

   ========================================================================== */

.jkda-trust-bar {

    background: var(--jkda-paper2);

    border-top: 1px solid var(--jkda-border);

    border-bottom: 1px solid var(--jkda-border);

    padding: var(--jkda-sp-6) 0;

}



.jkda-trust-bar__grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0;

}



.jkda-trust-bar__item {

    text-align: center;

    padding: var(--jkda-sp-3) var(--jkda-sp-4);

    border-right: 1px solid var(--jkda-border);

}



.jkda-trust-bar__item:last-child {

    border-right: none;

}



.jkda-trust-bar__icon {

    font-size: 24px;

    color: var(--jkda-saffron);

    line-height: 1;

}



.jkda-trust-bar__value {

    font-size: 18px;

    font-weight: 600;

    margin-top: var(--jkda-sp-2);

}



.jkda-trust-bar__label {

    font-size: 12px;

    color: var(--jkda-ink3);

    margin-top: 2px;

}



/* ==========================================================================

   §9.1 — COMMON CARD BASE + HOVER

   ========================================================================== */

.jkda-series-card,

.jkda-book-card,

.jkda-premium-card,

.jkda-bundle-card {

    background: #fff;

    border-radius: var(--jkda-radius2);

    overflow: hidden;

    transition: transform var(--jkda-duration) var(--jkda-ease),

        box-shadow var(--jkda-duration) var(--jkda-ease),

        border-color var(--jkda-duration) var(--jkda-ease);

}



.jkda-series-card:hover,

.jkda-book-card:hover,

.jkda-premium-card:hover {

    transform: translateY(-2px);

    box-shadow: var(--jkda-shadow-hover);

    border-color: var(--jkda-border2);

}



.jkda-bundle-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 32px rgba(245, 96, 10, 0.12);

    border-color: var(--jkda-saffron);

}



/* ==========================================================================

   §8.3 / §9.2 — MASTERY TRACKS (series cards)

   ========================================================================== */

.jkda-series-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: var(--jkda-sp-5);

}



.jkda-series-card {

    border: 1px solid var(--jkda-border);

    display: flex;

    flex-direction: column;

}



.jkda-series-card__accent {

    height: 4px;

}



.jkda-series-card--mda .jkda-series-card__accent,

.jkda-series-card--mdau .jkda-series-card__accent {

    background: linear-gradient(90deg, #1A2B5E, #2E4A9A);

}



.jkda-series-card--mwf .jkda-series-card__accent,

.jkda-series-card--mwfu .jkda-series-card__accent {

    background: linear-gradient(90deg, #1E4A40, #2D7A6A);

}



.jkda-series-card--ddm .jkda-series-card__accent,

.jkda-series-card--ddmu .jkda-series-card__accent {

    background: linear-gradient(90deg, #8B6914, #B8860B);

}



.jkda-series-card--pdc .jkda-series-card__accent,

.jkda-series-card--pdcu .jkda-series-card__accent {

    background: linear-gradient(90deg, #0D766E, #14B8A6);

}



.jkda-series-card--rem .jkda-series-card__accent,

.jkda-series-card--remu .jkda-series-card__accent {

    background: linear-gradient(90deg, #B01F3A, #E11D48);

}



.jkda-series-card__body {

    padding: var(--jkda-sp-6);

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-3);

    flex: 1;

}



.jkda-series-card__icon {

    width: 44px;

    height: 44px;

    border-radius: var(--jkda-radius2);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}



.jkda-series-card--mda .jkda-series-card__icon,

.jkda-series-card--mdau .jkda-series-card__icon {

    background: rgba(26, 43, 94, 0.1);

    color: #1A2B5E;

}



.jkda-series-card--mwf .jkda-series-card__icon,

.jkda-series-card--mwfu .jkda-series-card__icon {

    background: var(--jkda-teal-light);

    color: var(--jkda-teal);

}



.jkda-series-card--ddm .jkda-series-card__icon,

.jkda-series-card--ddmu .jkda-series-card__icon {

    background: #FBF3DC;

    color: #8B6914;

}



.jkda-series-card--pdc .jkda-series-card__icon,

.jkda-series-card--pdcu .jkda-series-card__icon {

    background: #E8F7F6;

    color: #0D766E;

}



.jkda-series-card--rem .jkda-series-card__icon,

.jkda-series-card--remu .jkda-series-card__icon {

    background: #FAEAED;

    color: #B01F3A;

}



.jkda-series-card__name {

    font-size: 18px;

    font-weight: 700;

    font-family: var(--jkda-ff-display);

}



.jkda-series-card__desc {

    font-size: 14px;

    color: var(--jkda-ink3);

    line-height: 1.6;

}



.jkda-series-card__meta {

    font-size: 13px;

    color: var(--jkda-ink4);

    margin-top: auto;

}



.jkda-series-card__actions {

    margin-top: var(--jkda-sp-3);

}



/* ==========================================================================

   §8.4 / §9.3 — FEATURED BOOKS (book cards)

   ========================================================================== */

.jkda-book-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

    gap: var(--jkda-sp-4);

}



.jkda-book-card {

    border: 1px solid var(--jkda-border);

    display: flex;

    flex-direction: column;

}



.jkda-book-cover,

.jkda-book-card .jkda-book-cover,

.woocommerce .jkda-book-card .jkda-book-cover,

.woocommerce-page .jkda-book-card .jkda-book-cover {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    aspect-ratio: 400 / 550 !important;

    background: #ffffff !important;

    overflow: hidden !important;

    position: relative !important;

}



.jkda-book-cover img,

.jkda-book-card .jkda-book-cover img,

.woocommerce .jkda-book-card .jkda-book-cover img,

.woocommerce-page .jkda-book-card .jkda-book-cover img,

img.jkda-book-cover-img {

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    max-width: 100% !important;

    max-height: 100% !important;

    object-fit: contain !important;

    object-position: center !important;

    image-rendering: -webkit-optimize-contrast;

}



.jkda-book-cover--placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--jkda-ink4);

    font-size: 12px;

    text-align: center;

    padding: var(--jkda-sp-4);

}



.jkda-book-card__body {

    padding: var(--jkda-sp-4);

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-2);

    flex: 1;

}



.jkda-book-tag {

    font-size: 11px;

    color: var(--jkda-ink3);

}



.jkda-book-title {

    font-size: 15px;

    font-weight: 700;

    font-family: var(--jkda-ff-display);

    line-height: 1.35;

}



.jkda-book-sku {

    font-size: 11px;

    color: var(--jkda-ink4);

}



.jkda-book-price {

    font-size: 18px;

    font-weight: 600;

    color: var(--jkda-saffron);

    font-family: var(--jkda-ff-display);

}



.jkda-book-card__actions {

    margin-top: auto;

    padding-top: var(--jkda-sp-2);

}



/* ==========================================================================

   §8.5 / §9.4 — PREMIUM PRODUCTS (premium cards)

   ========================================================================== */

.jkda-premium-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--jkda-sp-4);

}



.jkda-premium-card {

    border: 1px solid var(--jkda-border);

    padding: var(--jkda-sp-6);

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-3);

}



.jkda-premium-card__icon {

    width: 48px;

    height: 48px;

    border-radius: var(--jkda-radius2);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

}



.jkda-premium-card--csp .jkda-premium-card__icon {

    background: var(--jkda-gold-light);

    color: var(--jkda-gold);

}



.jkda-premium-card--pfs .jkda-premium-card__icon {

    background: var(--jkda-teal-light);

    color: var(--jkda-teal);

}



.jkda-premium-card--snp .jkda-premium-card__icon {

    background: var(--jkda-ruby-light);

    color: var(--jkda-ruby);

}



.jkda-premium-card__name {

    font-size: 17px;

    font-weight: 700;

    font-family: var(--jkda-ff-display);

}



.jkda-premium-card__desc {

    font-size: 13px;

    color: var(--jkda-ink3);

    line-height: 1.6;

}



.jkda-premium-card__pricing {

    display: flex;

    align-items: baseline;

    gap: var(--jkda-sp-2);

    flex-wrap: wrap;

    margin-top: auto;

}



.jkda-premium-card__actions {

    margin-top: var(--jkda-sp-3);

}



/* ==========================================================================

   §8.6 / §9.5 — BUNDLES (bundle cards)

   ========================================================================== */

.jkda-bundle-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--jkda-sp-5);

}



.jkda-bundle-card {

    border: 1.5px solid var(--jkda-saffron-mid);

    display: flex;

    flex-direction: column;

}



.jkda-bundle-card__header {

    padding: var(--jkda-sp-5) var(--jkda-sp-6);

    display: flex;

    align-items: center;

    gap: var(--jkda-sp-4);

    border-bottom: 1px solid var(--jkda-border);

}



.jkda-bundle-card__icon {

    width: 52px;

    height: 52px;

    border-radius: var(--jkda-radius2);

    background: var(--jkda-saffron-light);

    color: var(--jkda-saffron);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

    flex-shrink: 0;

}



.jkda-bundle-card__title {

    font-size: 16px;

    font-weight: 700;

    font-family: var(--jkda-ff-display);

}



.jkda-bundle-card__count {

    font-size: 13px;

    color: var(--jkda-ink3);

    margin-top: 2px;

}



.jkda-bundle-card__body {

    padding: var(--jkda-sp-5) var(--jkda-sp-6);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--jkda-sp-4);

    flex: 1;

}



.jkda-bundle-card__pricing {

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-1);

}



.jkda-bundle-card__actions {

    margin-top: var(--jkda-sp-4);

}



/* ==========================================================================

   §8.7 — HOW IT WORKS (steps)

   ========================================================================== */

.jkda-steps-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: var(--jkda-sp-5);

}



.jkda-step {

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--jkda-sp-3);

}



.jkda-step__number {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: var(--jkda-saffron-light);

    color: var(--jkda-saffron);

    font-size: 18px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.jkda-step__title {

    font-size: 16px;

    font-weight: 700;

    font-family: var(--jkda-ff-display);

}



.jkda-step__desc {

    font-size: 13px;

    color: var(--jkda-ink3);

    line-height: 1.6;

}



/* ==========================================================================

   §8.8 — CTA BANNER

   ========================================================================== */

.jkda-cta-banner {

    background: var(--jkda-ink);

    padding: var(--jkda-sp-16) 0;

    text-align: center;

    color: #fff;

}



.jkda-cta-banner__eyebrow {

    font-size: 11px;

    color: var(--jkda-saffron);

    text-transform: uppercase;

    font-weight: 600;

    letter-spacing: 0.1em;

    margin-bottom: var(--jkda-sp-3);

}



.jkda-cta-banner__title {

    font-family: var(--jkda-ff-display);

    font-size: clamp(26px, 3.5vw, 36px);

    font-weight: 600;

    color: #fff;

    line-height: 1.2;

}



.jkda-cta-banner__sub {

    font-size: 15px;

    color: #94A3B8;

    max-width: 560px;

    margin: var(--jkda-sp-4) auto 0;

    line-height: 1.7;

}



.jkda-cta-banner__actions {

    margin-top: var(--jkda-sp-8);

    display: flex;

    gap: var(--jkda-sp-3);

    justify-content: center;

    flex-wrap: wrap;

}



/* ==========================================================================

   §8.9 — FAQ TEASER

   ========================================================================== */

/* Uses shared .jkda-section--sm + .jkda-section-header--center patterns. */



/* ==========================================================================

   RESOURCES PAGE (RESOURCES.md) — reuses locked tokens/typography/buttons.

   ========================================================================== */



/* §2.2 — Resources Hero Header (dark page header + breadcrumb) */

.jkda-page-header {

    background: var(--jkda-ink);

    color: #fff;

    padding: var(--jkda-sp-12) 0;

}



.jkda-breadcrumb {

    display: flex;

    align-items: center;

    gap: var(--jkda-sp-2);

    font-size: 13px;

    margin-bottom: var(--jkda-sp-4);

}



.jkda-breadcrumb a {

    color: #CBD5E1;

}



.jkda-breadcrumb a:hover,

.jkda-breadcrumb a:focus-visible {

    color: var(--jkda-saffron);

}



.jkda-breadcrumb__sep {

    color: #6B7280;

}



.jkda-breadcrumb__current {

    color: #fff;

}



.jkda-page-header__title {

    color: #fff;

}



.jkda-page-header__sub {

    margin-top: var(--jkda-sp-3);

    color: #CBD5E1;

    font-size: 16px;

    line-height: 1.7;

    max-width: 640px;

}



/* §2.3 — Featured Guide card */

.jkda-featured-guide {

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius3);

    box-shadow: var(--jkda-shadow-sm);

    padding: var(--jkda-sp-8);

}



.jkda-featured-guide__title {

    margin-top: var(--jkda-sp-3);

}



.jkda-featured-guide__desc {

    margin-top: var(--jkda-sp-3);

    color: var(--jkda-ink2);

    max-width: 720px;

}



.jkda-featured-guide__actions {

    margin-top: var(--jkda-sp-6);

}



/* §2.4 — Learning Paths grid (3-col — 2-col — 1-col) */

.jkda-learning-paths-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--jkda-sp-6);

}



.jkda-path-card {

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius3);

    box-shadow: var(--jkda-shadow-sm);

    padding: var(--jkda-sp-6);

    display: flex;

    flex-direction: column;

    transition: box-shadow var(--jkda-duration) var(--jkda-ease),

        transform var(--jkda-duration) var(--jkda-ease);

}



.jkda-path-card:hover,

.jkda-path-card:focus-within {

    box-shadow: var(--jkda-shadow);

    transform: translateY(-2px);

}



.jkda-path-card__icon {

    font-size: 28px;

    line-height: 1;

}



.jkda-path-card__name {

    margin-top: var(--jkda-sp-4);

}



.jkda-path-card__desc {

    margin-top: var(--jkda-sp-2);

    color: var(--jkda-ink3);

}



.jkda-path-card__actions {

    margin-top: var(--jkda-sp-5);

}



/* §2.5 — Free Chapter Downloads */

.jkda-chapter-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--jkda-sp-6);

}



.jkda-chapter-card {

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius3);

    box-shadow: var(--jkda-shadow-sm);

    padding: var(--jkda-sp-6);

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: var(--jkda-sp-2);

}



.jkda-chapter-card__title {

    margin-top: var(--jkda-sp-2);

}



.jkda-chapter-card__desc {

    color: var(--jkda-ink3);

}



.jkda-chapter-card__actions {

    margin-top: var(--jkda-sp-4);

}



.jkda-chapter-signup {

    margin-top: var(--jkda-sp-10);

    max-width: 640px;

    margin-left: auto;

    margin-right: auto;

    text-align: center;

}



.jkda-chapter-signup__label {

    display: block;

    font-weight: 600;

    margin-bottom: var(--jkda-sp-3);

    color: var(--jkda-ink);

}



.jkda-chapter-signup__row {

    display: flex;

    gap: var(--jkda-sp-3);

    justify-content: center;

    flex-wrap: wrap;

}



.jkda-chapter-signup__input {

    flex: 1 1 260px;

    min-width: 0;

    padding: 13px 16px;

    border: 1px solid var(--jkda-border2);

    border-radius: var(--jkda-radius);

    font-family: var(--jkda-ff-sans);

    font-size: 14px;

    color: var(--jkda-ink);

    background: #fff;

}



.jkda-chapter-signup__input:focus-visible {

    outline: 2px solid var(--jkda-saffron);

    outline-offset: 2px;

    border-color: var(--jkda-saffron);

}



/* ==========================================================================

   SHOP PAGE (SHOP.md) — layout shell only. Reuses the locked card/token/button

   classes (.jkda-book-card / .jkda-premium-card / .jkda-bundle-card,

   .jkda-page-header, .jkda-section*). Redefines no card or token.

   ========================================================================== */



/* §2.2 — Shop Hero Header variant (dark .jkda-page-header, no bottom padding so

   the sticky category nav sits flush beneath the title). */

.jkda-shop-header {

    padding-bottom: 0;

}



/* §2.2 — Sticky category filter nav (in-page anchors to the 5 family sections).

   Sticks just below the 72px site header. Scrolls horizontally on narrow

   viewports (§5). */

.jkda-shop-nav {

    position: sticky;

    top: 72px;

    z-index: 20;

    margin-top: var(--jkda-sp-6);

    background: var(--jkda-ink);

    border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.jkda-shop-nav__inner {

    display: flex;

    gap: var(--jkda-sp-5);

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;

}



.jkda-shop-nav__link {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    padding: 14px 2px;

    color: #CBD5E1;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.02em;

    white-space: nowrap;

    border-bottom: 2px solid transparent;

    transition: color var(--jkda-duration) var(--jkda-ease),

        border-color var(--jkda-duration) var(--jkda-ease);

}



.jkda-shop-nav__link:hover,

.jkda-shop-nav__link:focus-visible {

    color: var(--jkda-saffron);

    border-bottom-color: var(--jkda-saffron);

}



/* §4 — Shop product grid (books family). Locked grid spec from SHOP.md §4. */

.jkda-books-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: var(--jkda-sp-6);

}



/* ==========================================================================

   §11 — RESPONSIVE RULES

   ========================================================================== */

@media (min-width: 1400px) {

    .jkda-container {

        max-width: 1320px;

    }

}



@media (max-width: 860px) {

    .jkda-hero__inner {

        grid-template-columns: 1fr;

    }



    .jkda-hero__visual {

        display: flex !important;

        justify-content: center;

        width: 100%;

        margin-top: 28px;

    }



    .jkda-hero__img {

        max-width: 100% !important;

        height: auto !important;

    }



    .jkda-series-grid,

    .jkda-premium-grid,

    .jkda-bundle-grid {

        grid-template-columns: 1fr;

    }



    .jkda-steps-grid,

    .jkda-trust-bar__grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .jkda-book-grid {

        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    }



    /* Shop grid (SHOP.md §5 tablet: 2–3 columns). */

    .jkda-books-grid {

        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

    }



    .jkda-nav {

        min-height: 56px !important;

        padding: 0 12px !important;

        gap: 8px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        width: 100% !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

    }



    .jkda-brand {

        display: flex !important;

        align-items: center !important;

        gap: 7px !important;

        flex-shrink: 0 !important;

        text-decoration: none !important;

    }



    .jkda-brand-logo {

        height: 28px !important;

        width: auto !important;

        border-radius: 4px !important;

        flex-shrink: 0 !important;

    }



    .jkda-brand-name {

        font-size: 14px !important;

        font-weight: 800 !important;

        letter-spacing: -0.01em !important;

        white-space: nowrap !important;

    }



    .jkda-nav-actions {

        display: flex !important;

        align-items: center !important;

        gap: 5px !important;

        margin-left: auto !important;

        flex-shrink: 0 !important;

    }



    .jkda-lang-switcher {

        display: inline-flex !important;

        align-items: center !important;

        gap: 2px !important;

        padding: 2px 6px !important;

        background: rgba(255, 255, 255, 0.08) !important;

        border: 1px solid rgba(255, 255, 255, 0.16) !important;

        border-radius: 14px !important;

        margin-right: 2px !important;

    }



    .jkda-lang-btn {

        padding: 2px 5px !important;

        font-size: 11px !important;

        line-height: 1.2 !important;

        border-radius: 10px !important;

        font-weight: 600 !important;

    }



    .jkda-lang-sep {

        font-size: 9px !important;

        opacity: 0.6 !important;

    }



    .jkda-nav-account,

    .jkda-nav-cta {

        display: none !important;

    }



    .jkda-nav-search,

    .jkda-nav-cart {

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 28px !important;

        height: 28px !important;

        flex-shrink: 0 !important;

    }



    .jkda-nav-search svg,

    .jkda-nav-cart svg {

        width: 17px !important;

        height: 17px !important;

    }



    .jkda-cart-count {

        top: 1px !important;

        right: 1px !important;

        font-size: 9px !important;

        min-width: 14px !important;

        height: 14px !important;

        line-height: 14px !important;

    }



    .jkda-nav-toggle {

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        order: 10 !important;

        width: 30px !important;

        height: 30px !important;

        padding: 4px !important;

        background: transparent !important;

        border: none !important;

        color: #ffffff !important;

        cursor: pointer !important;

        border-radius: 6px !important;

        flex-shrink: 0 !important;

    }



    .jkda-nav-toggle svg {

        width: 19px !important;

        height: 19px !important;

    }



    .jkda-nav-links {

        display: none !important;

    }



    .jkda-nav-links.is-open {

        display: flex;

    }



    .jkda-nav-links a {

        display: block;

        padding: 12px 0;

        border-top: 1px solid rgba(255, 255, 255, 0.08);

    }



    .footer-top {

        grid-template-columns: 1fr 1fr;

    }



    .jkda-learning-paths-grid,

    .jkda-chapter-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 540px) {

    .jkda-nav {

        min-height: 52px !important;

        padding: 0 10px !important;

        gap: 6px !important;

    }



    .jkda-brand {

        gap: 6px !important;

    }



    .jkda-brand-logo {

        height: 26px !important;

        width: auto !important;

    }



    .jkda-brand-name {

        font-size: 13px !important;

    }



    .jkda-nav-actions {

        gap: 4px !important;

    }



    .jkda-lang-switcher {

        padding: 2px 5px !important;

    }



    .jkda-lang-btn {

        padding: 2px 4px !important;

        font-size: 10.5px !important;

    }



    .jkda-nav-search,

    .jkda-nav-cart {

        width: 27px !important;

        height: 27px !important;

    }



    .jkda-nav-toggle {

        width: 29px !important;

        height: 29px !important;

    }



    .jkda-container {

        padding: 0 16px;

    }



    .jkda-hero__title {

        font-size: 28px;

    }



    .jkda-hero__sub {

        font-size: 14px;

    }



    .jkda-hero__actions {

        flex-direction: column;

        align-items: stretch;

    }



    .jkda-steps-grid,

    .jkda-trust-bar__grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .jkda-book-grid {

        grid-template-columns: 1fr 1fr;

    }



    /* Shop grid (SHOP.md §5 mobile: 2-column minmax(140px,1fr)). */

    .jkda-books-grid {

        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

    }



    .jkda-learning-paths-grid,

    .jkda-chapter-grid {

        grid-template-columns: 1fr;

    }



    .jkda-brand {

        font-size: 17px;

        gap: 8px;

    }

}



@media (max-width: 480px) {

    .footer-top {

        grid-template-columns: 1fr;

    }

}



@media (pointer: coarse) {

    .jkda-nav-links a {

        min-height: 48px;

        display: flex;

        align-items: center;

    }



    .jkda-button--sm,

    .jkda-pill-cta {

        min-height: 44px;

    }



    .jkda-chapter-signup__input {

        min-height: 44px;

    }



    .jkda-shop-nav__link {

        min-height: 44px;

    }

}



@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation-duration: 0.001ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.001ms !important;

        scroll-behavior: auto !important;

    }

}



/* ==========================================================================

   BLOG LISTING (BLOG_LISTING.md §1) — builds on the locked tokens/classes.

   Reuses .jkda-page-header, .jkda-badge--saffron, .jkda-pill-cta,

   .jkda-button--teal, .jkda-chapter-signup. Defines only new blog classes;

   redefines no token or base component.

   ========================================================================== */



/* Filter bar: categories + topic pills */

.jkda-blog-filter {

    background: var(--jkda-paper2);

    border-bottom: 1px solid var(--jkda-border);

    padding: var(--jkda-sp-5) 0;

}



.jkda-blog-filter__row {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--jkda-sp-3);

}



.jkda-blog-filter__row + .jkda-blog-filter__row {

    margin-top: var(--jkda-sp-3);

}



.jkda-blog-filter__label {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--jkda-ink3);

}



.jkda-blog-filter__list {

    display: flex;

    flex-wrap: wrap;

    gap: var(--jkda-sp-2);

    margin: 0;

    padding: 0;

    list-style: none;

}



.jkda-blog-pill {

    display: inline-flex;

    align-items: center;

    padding: 6px 14px;

    border-radius: 999px;

    border: 1px solid var(--jkda-border2);

    background: #fff;

    color: var(--jkda-ink2);

    font-size: 13px;

    font-weight: 600;

    line-height: 1.2;

    transition: color var(--jkda-duration) var(--jkda-ease),

        background var(--jkda-duration) var(--jkda-ease),

        border-color var(--jkda-duration) var(--jkda-ease);

}



.jkda-blog-pill:hover,

.jkda-blog-pill:focus-visible {

    background: var(--jkda-saffron-light);

    color: var(--jkda-saffron);

    border-color: var(--jkda-saffron-mid);

}



.jkda-blog-pill--topic {

    color: var(--jkda-ink3);

}



/* Featured post card (prominent thumbnail + read time) */

.jkda-blog-featured {

    display: grid;

    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);

    gap: var(--jkda-sp-8);

    align-items: center;

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius3);

    box-shadow: var(--jkda-shadow);

    overflow: hidden;

}



.jkda-blog-featured__media {

    display: block;

    aspect-ratio: 16 / 9;

    background: var(--jkda-paper2);

    overflow: hidden;

}



.jkda-blog-featured__media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.jkda-blog-featured__placeholder,

.jkda-blog-card__placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--jkda-ink4);

    font-size: 13px;

    font-weight: 600;

    text-align: center;

}



.jkda-blog-featured__body {

    padding: var(--jkda-sp-8);

}



.jkda-blog-featured__title {

    margin: var(--jkda-sp-3) 0 0;

}



.jkda-blog-featured__title a {

    color: var(--jkda-ink);

}



.jkda-blog-featured__title a:hover,

.jkda-blog-featured__title a:focus-visible {

    color: var(--jkda-saffron);

}



.jkda-blog-featured__excerpt {

    margin-top: var(--jkda-sp-3);

    color: var(--jkda-ink2);

}



.jkda-blog-featured__actions {

    margin-top: var(--jkda-sp-5);

}



/* Shared meta row */

.jkda-blog-meta,

.jkda-blog-featured__meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--jkda-sp-2);

    margin-top: var(--jkda-sp-3);

    font-size: 12px;

    color: var(--jkda-ink3);

}



.jkda-blog-meta__sep {

    color: var(--jkda-ink4);

}



/* 2-column main layout */

.jkda-blog-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 300px;

    gap: var(--jkda-sp-8);

    align-items: start;

}



/* Left: 2-column post grid */

.jkda-blog-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--jkda-sp-6);

}



.jkda-blog-card {

    display: flex;

    flex-direction: column;

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    box-shadow: var(--jkda-shadow-sm);

    overflow: hidden;

    transition: transform var(--jkda-duration) var(--jkda-ease),

        box-shadow var(--jkda-duration) var(--jkda-ease);

}



.jkda-blog-card:hover,

.jkda-blog-card:focus-within {

    transform: translateY(-2px);

    box-shadow: var(--jkda-shadow-hover);

}



.jkda-blog-card__media {

    display: block;

    aspect-ratio: 16 / 9;

    background: var(--jkda-paper2);

    overflow: hidden;

}



.jkda-blog-card__media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.jkda-blog-card__body {

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-2);

    padding: var(--jkda-sp-5);

}



.jkda-blog-card__title {

    margin: var(--jkda-sp-1) 0 0;

}



.jkda-blog-card__title a {

    color: var(--jkda-ink);

}



.jkda-blog-card__title a:hover,

.jkda-blog-card__title a:focus-visible {

    color: var(--jkda-saffron);

}



.jkda-blog-card__excerpt {

    color: var(--jkda-ink3);

    margin: 0;

}



.jkda-blog-card__updated {

    margin: 0;

    font-size: 11px;

    color: var(--jkda-ink4);

}



/* Right: sticky sidebar */

.jkda-blog-sidebar {

    position: sticky;

    top: 88px;

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-6);

}



.jkda-blog-widget {

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    box-shadow: var(--jkda-shadow-sm);

    padding: var(--jkda-sp-5);

}



.jkda-blog-widget__title {

    font-family: var(--jkda-ff-display);

    font-size: 15px;

    font-weight: 700;

    margin: 0 0 var(--jkda-sp-3);

    color: var(--jkda-ink);

}



.jkda-blog-widget__list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-3);

}



.jkda-blog-widget__post a {

    display: block;

    font-size: 14px;

    font-weight: 600;

    color: var(--jkda-ink2);

    line-height: 1.4;

}



.jkda-blog-widget__post a:hover,

.jkda-blog-widget__post a:focus-visible {

    color: var(--jkda-saffron);

}



.jkda-blog-widget__date {

    display: block;

    font-size: 11px;

    color: var(--jkda-ink4);

    margin-top: 2px;

}



.jkda-blog-widget__cats li {

    font-size: 14px;

    padding: 4px 0;

    border-bottom: 1px solid var(--jkda-border);

}



.jkda-blog-widget__cats li:last-child {

    border-bottom: 0;

}



.jkda-blog-widget__cats a {

    color: var(--jkda-ink2);

}



.jkda-blog-widget__cats a:hover,

.jkda-blog-widget__cats a:focus-visible {

    color: var(--jkda-saffron);

}



.jkda-blog-widget--newsletter .jkda-body-sm {

    color: var(--jkda-ink3);

    margin: 0 0 var(--jkda-sp-3);

}



/* Empty-state */

.jkda-blog-empty {

    text-align: center;

    padding: var(--jkda-sp-12) var(--jkda-sp-5);

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    box-shadow: var(--jkda-shadow-sm);

}



.jkda-blog-empty .jkda-body {

    color: var(--jkda-ink3);

    max-width: 460px;

    margin: var(--jkda-sp-3) auto var(--jkda-sp-5);

}



/* Numeric pagination */

.jkda-pagination {

    margin-top: var(--jkda-sp-8);

}



.jkda-pagination .page-numbers {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: var(--jkda-sp-2);

}



.jkda-pagination .page-numbers li {

    margin: 0;

}



.jkda-pagination a.page-numbers,

.jkda-pagination span.page-numbers {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;

    padding: 8px 14px;

    border-radius: var(--jkda-radius);

    border: 1px solid var(--jkda-border2);

    background: #fff;

    color: var(--jkda-ink2);

    font-size: 14px;

    font-weight: 600;

    transition: color var(--jkda-duration) var(--jkda-ease),

        background var(--jkda-duration) var(--jkda-ease),

        border-color var(--jkda-duration) var(--jkda-ease);

}



.jkda-pagination a.page-numbers:hover,

.jkda-pagination a.page-numbers:focus-visible {

    background: var(--jkda-saffron-light);

    color: var(--jkda-saffron);

    border-color: var(--jkda-saffron-mid);

}



.jkda-pagination .page-numbers.current {

    background: var(--jkda-saffron);

    border-color: var(--jkda-saffron);

    color: #fff;

}



.jkda-pagination .page-numbers.dots {

    border-color: transparent;

    background: transparent;

}



/* Responsive — honors HOME.md §11 breakpoints (1400 / 860 / 540) */

@media (max-width: 860px) {

    .jkda-blog-layout {

        grid-template-columns: 1fr;

    }



    .jkda-blog-sidebar {

        position: static;

        top: auto;

    }



    .jkda-blog-featured {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 540px) {

    .jkda-blog-grid {

        grid-template-columns: 1fr;

    }



    .jkda-blog-filter__list {

        flex-wrap: nowrap;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }

}



@media (pointer: coarse) {

    .jkda-blog-pill,

    .jkda-pagination a.page-numbers,

    .jkda-pagination span.page-numbers {

        min-height: 44px;

    }

}



/* ==========================================================================

   BLOG POST / ARTICLE (BLOG_POST.md §2–§3) — builds on the locked

   tokens/classes. Reuses .jkda-page-header, .jkda-breadcrumb, .jkda-badge,

   .jkda-blog-card, .jkda-blog-sidebar, .jkda-blog-widget, .jkda-blog-pill,

   .jkda-pagination, .jkda-chapter-signup. Defines only new article classes;

   redefines no token or base component.

   ========================================================================== */



/* Hero header — article variant (category badge + title + meta) */

.jkda-article-header .jkda-badge {

    margin-bottom: var(--jkda-sp-4);

}



.jkda-article-title {

    font-family: var(--jkda-ff-display);

    font-size: clamp(28px, 4vw, 42px);

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.01em;

    color: #fff;

    margin: 0;

}



.jkda-article-meta {

    margin-top: var(--jkda-sp-5);

    color: #CBD5E1;

    font-size: 13px;

}



.jkda-article-meta .jkda-blog-meta__item {

    color: #CBD5E1;

}



.jkda-article-meta .jkda-blog-meta__sep {

    color: #6B7280;

}



.jkda-article-meta__author {

    display: inline-flex;

    align-items: center;

    gap: var(--jkda-sp-2);

}



.jkda-article-meta__avatar {

    width: 32px;

    height: 32px;

    border-radius: 999px;

    display: block;

}



/* Featured image (16:9, rounded, subtle shadow) */

.jkda-article-figure-wrap {

    padding-bottom: 0;

}



.jkda-article-figure {

    margin: 0;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: var(--jkda-radius2);

    box-shadow: var(--jkda-shadow);

    background: var(--jkda-paper2);

}



.jkda-article-figure img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.jkda-article-body-section {

    padding-top: var(--jkda-sp-12);

}



/* 2-column content layout */

.jkda-article-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 300px;

    gap: var(--jkda-sp-8);

    align-items: start;

}



.jkda-article-main {

    min-width: 0;

}



/* Social share bar */

.jkda-article-share {

    position: sticky;

    top: 88px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--jkda-sp-2);

    margin-bottom: var(--jkda-sp-6);

    padding-bottom: var(--jkda-sp-5);

    border-bottom: 1px solid var(--jkda-border);

}



.jkda-article-share__label {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--jkda-ink3);

    margin-right: var(--jkda-sp-1);

}



.jkda-article-share__link {

    display: inline-flex;

    align-items: center;

    padding: 6px 14px;

    border-radius: 999px;

    border: 1px solid var(--jkda-border2);

    background: #fff;

    color: var(--jkda-ink2);

    font-size: 13px;

    font-weight: 600;

    line-height: 1.2;

    cursor: pointer;

    transition: color var(--jkda-duration) var(--jkda-ease),

        background var(--jkda-duration) var(--jkda-ease),

        border-color var(--jkda-duration) var(--jkda-ease);

}



.jkda-article-share__link:hover,

.jkda-article-share__link:focus-visible {

    background: var(--jkda-saffron-light);

    color: var(--jkda-saffron);

    border-color: var(--jkda-saffron-mid);

}



/* Table of contents */

.jkda-toc {

    background: var(--jkda-paper2);

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    padding: var(--jkda-sp-5) var(--jkda-sp-6);

    margin-bottom: var(--jkda-sp-8);

}



.jkda-toc__title {

    font-family: var(--jkda-ff-display);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.02em;

    text-transform: uppercase;

    color: var(--jkda-ink3);

    margin: 0 0 var(--jkda-sp-3);

}



.jkda-toc__list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-2);

}



.jkda-toc__link {

    color: var(--jkda-ink2);

    font-size: 14px;

    font-weight: 600;

}



.jkda-toc__link:hover,

.jkda-toc__link:focus-visible {

    color: var(--jkda-saffron);

}



/* Prose body (16px / line-height 1.75) */

.jkda-prose {

    font-size: 16px;

    line-height: 1.75;

    color: var(--jkda-ink2);

    max-width: 72ch;

}



.jkda-prose > *:first-child {

    margin-top: 0;

}



.jkda-prose p {

    margin: 0 0 var(--jkda-sp-5);

}



.jkda-prose h2 {

    font-family: var(--jkda-ff-display);

    font-size: 26px;

    font-weight: 700;

    line-height: 1.25;

    color: var(--jkda-ink);

    margin: var(--jkda-sp-10) 0 var(--jkda-sp-4);

    scroll-margin-top: 96px;

}



.jkda-prose h3 {

    font-family: var(--jkda-ff-display);

    font-size: 20px;

    font-weight: 700;

    line-height: 1.3;

    color: var(--jkda-ink);

    margin: var(--jkda-sp-8) 0 var(--jkda-sp-3);

}



.jkda-prose h4 {

    font-family: var(--jkda-ff-brand);

    font-size: 17px;

    font-weight: 700;

    color: var(--jkda-ink);

    margin: var(--jkda-sp-6) 0 var(--jkda-sp-2);

}



.jkda-prose ul,

.jkda-prose ol {

    margin: 0 0 var(--jkda-sp-5);

    padding-left: var(--jkda-sp-6);

}



.jkda-prose li {

    margin-bottom: var(--jkda-sp-2);

}



.jkda-prose a {

    color: var(--jkda-teal);

    text-decoration: underline;

    text-underline-offset: 2px;

}



.jkda-prose a:hover,

.jkda-prose a:focus-visible {

    color: var(--jkda-teal2);

}



/* External links styled distinctly from internal links (BLOG_POST.md §5) */

.jkda-prose a[rel~="external"],

.jkda-prose a[target="_blank"] {

    color: var(--jkda-saffron);

}



.jkda-prose a[rel~="external"]::after,

.jkda-prose a[target="_blank"]::after {

    content: " \2197";

    font-size: 0.85em;

    text-decoration: none;

}



.jkda-prose blockquote {

    margin: 0 0 var(--jkda-sp-5);

    padding: var(--jkda-sp-3) var(--jkda-sp-6);

    border-left: 3px solid var(--jkda-saffron);

    background: var(--jkda-saffron-light);

    color: var(--jkda-ink2);

    font-style: italic;

}



.jkda-prose code {

    font-family: var(--jkda-font-mono, 'JetBrains Mono', Consolas, monospace);

    font-size: 0.9em;

    background: var(--jkda-paper2);

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius);

    padding: 2px 6px;

}



.jkda-prose pre {

    background: #0D1117;

    color: #E6EDF3;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: var(--jkda-radius2);

    padding: var(--jkda-sp-5);

    overflow-x: auto;

    margin: 0 0 var(--jkda-sp-5);

}



.jkda-prose pre code {

    background: transparent;

    color: inherit;

    border: 0;

    padding: 0;

    font-size: 14px;

    line-height: 1.6;

}



.jkda-prose img {

    border-radius: var(--jkda-radius2);

    margin: var(--jkda-sp-3) 0;

}



.jkda-prose figure {

    margin: 0 0 var(--jkda-sp-5);

}



.jkda-prose figcaption {

    font-size: 13px;

    color: var(--jkda-ink3);

    text-align: center;

    margin-top: var(--jkda-sp-2);

}



.jkda-prose table {

    width: 100%;

    border-collapse: collapse;

    margin: 0 0 var(--jkda-sp-5);

    font-size: 15px;

}



.jkda-prose th,

.jkda-prose td {

    border: 1px solid var(--jkda-border);

    padding: var(--jkda-sp-2) var(--jkda-sp-3);

    text-align: left;

}



.jkda-prose th {

    background: var(--jkda-paper2);

    font-weight: 700;

    color: var(--jkda-ink);

}



/* Article tag chips */

.jkda-article-tags {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--jkda-sp-2);

    margin-top: var(--jkda-sp-8);

    padding-top: var(--jkda-sp-6);

    border-top: 1px solid var(--jkda-border);

}



.jkda-article-tags__label {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--jkda-ink3);

}



.jkda-article-tags__list {

    display: flex;

    flex-wrap: wrap;

    gap: var(--jkda-sp-2);

    margin: 0;

    padding: 0;

    list-style: none;

}



/* Author bio box */

.jkda-author-box {

    display: flex;

    gap: var(--jkda-sp-4);

    align-items: flex-start;

    margin-top: var(--jkda-sp-8);

    padding: var(--jkda-sp-6);

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    box-shadow: var(--jkda-shadow-sm);

}



.jkda-author-box--sidebar {

    margin-top: 0;

    padding: 0;

    border: 0;

    box-shadow: none;

    background: transparent;

}



.jkda-author-box__avatar img {

    width: 72px;

    height: 72px;

    border-radius: 999px;

    display: block;

}



.jkda-author-box--sidebar .jkda-author-box__avatar img {

    width: 56px;

    height: 56px;

}



.jkda-author-box__name {

    font-family: var(--jkda-ff-display);

    font-size: 16px;

    font-weight: 700;

    color: var(--jkda-ink);

    margin: 0 0 var(--jkda-sp-2);

}



.jkda-author-box__bio {

    margin: 0;

    font-size: 14px;

    line-height: 1.6;

    color: var(--jkda-ink3);

}



/* Prev / Next post navigation */

.jkda-post-nav {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: var(--jkda-sp-4);

    margin-top: var(--jkda-sp-8);

    padding-top: var(--jkda-sp-6);

    border-top: 1px solid var(--jkda-border);

}



.jkda-post-nav__prev,

.jkda-post-nav__next {

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-1);

    max-width: 48%;

    padding: var(--jkda-sp-4);

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    background: #fff;

    transition: border-color var(--jkda-duration) var(--jkda-ease),

        box-shadow var(--jkda-duration) var(--jkda-ease);

}



.jkda-post-nav__next {

    text-align: right;

    margin-left: auto;

}



.jkda-post-nav__prev:hover,

.jkda-post-nav__prev:focus-visible,

.jkda-post-nav__next:hover,

.jkda-post-nav__next:focus-visible {

    border-color: var(--jkda-saffron-mid);

    box-shadow: var(--jkda-shadow-sm);

}



.jkda-post-nav__label {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.03em;

    text-transform: uppercase;

    color: var(--jkda-ink3);

}



.jkda-post-nav__title {

    font-size: 15px;

    font-weight: 600;

    color: var(--jkda-ink);

}



/* Related posts 3-card grid */

.jkda-related-posts {

    margin-top: var(--jkda-sp-12);

    padding-top: var(--jkda-sp-8);

    border-top: 1px solid var(--jkda-border);

}



.jkda-related-posts__title {

    margin: 0 0 var(--jkda-sp-6);

}



.jkda-related-posts__grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: var(--jkda-sp-6);

}



/* Sidebar Popular Tags cloud */

.jkda-blog-widget__tags {

    display: flex;

    flex-wrap: wrap;

    gap: var(--jkda-sp-2);

    margin: 0;

    padding: 0;

    list-style: none;

}



.jkda-blog-widget__empty {

    margin: 0;

    color: var(--jkda-ink3);

}



/* Responsive — honors HOME.md §11 breakpoints (1400 / 860 / 540) */

@media (max-width: 860px) {

    .jkda-article-layout {

        grid-template-columns: 1fr;

    }



    .jkda-article-share {

        position: static;

    }



    .jkda-prose {

        max-width: none;

    }



    .jkda-related-posts__grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 540px) {

    .jkda-related-posts__grid {

        grid-template-columns: 1fr;

    }



    .jkda-post-nav__prev,

    .jkda-post-nav__next {

        max-width: 100%;

    }



    .jkda-author-box {

        flex-direction: column;

    }

}



@media (pointer: coarse) {

    .jkda-article-share__link,

    .jkda-toc__link,

    .jkda-article-tags__list .jkda-blog-pill,

    .jkda-blog-widget__tags .jkda-blog-pill,

    .jkda-post-nav__prev,

    .jkda-post-nav__next {

        min-height: 44px;

    }

}



/* ==========================================================================

   SERIES / BUNDLE DETAIL (SERIES_DETAIL.md §2–§3) — builds on the locked

   tokens/classes. Reuses .jkda-page-header, .jkda-breadcrumb,

   .jkda-badge--saffron, .jkda-books-grid, .jkda-book-card, .jkda-button,

   .jkda-section*. Defines ONLY the new .jkda-series-hero* scaffold; redefines

   no token or base component. All colours/space/radius via --jkda-* tokens.

   ========================================================================== */



.jkda-breadcrumb__sep--series {

    color: #CBD5E1;

}



.jkda-series-hero__inner {

    display: grid;

    grid-template-columns: minmax(280px, 360px) 1fr;

    gap: var(--jkda-sp-8);

    align-items: start;

    margin-top: var(--jkda-sp-6);

}



.jkda-series-hero__cover {

    position: relative;

    aspect-ratio: var(--jkda-bundle-ratio);

    width: 100%;

    overflow: hidden;

    border-radius: var(--jkda-radius);

    background: rgba(255, 255, 255, 0.06);

    box-shadow: var(--jkda-shadow-lg);

}



.jkda-series-hero__cover img {

    width: 100%;

    height: 100%;

    object-fit: contain !important;

    background: #FFFFFF !important;

    display: block;

    image-rendering: -webkit-optimize-contrast;

}



.jkda-series-hero__cover-ph {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: var(--jkda-sp-4);

    color: #CBD5E1;

    font-size: 14px;

}



.jkda-series-hero__content {

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-4);

}



.jkda-series-hero__title {

    margin: 0;

}



.jkda-series-hero__summary {

    margin-top: 0;

    color: #CBD5E1;

}



.jkda-series-hero__count {

    font-weight: 600;

    color: #fff;

}



.jkda-series-hero__actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--jkda-sp-5);

    margin-top: var(--jkda-sp-2);

}



.jkda-series-hero__pricing {

    font-size: 28px;

    font-weight: 700;

    color: #fff;

}



.jkda-series-hero__pricing del {

    color: #94A3B8;

    font-weight: 500;

    margin-right: var(--jkda-sp-2);

}



.jkda-series-hero__cta {

    display: flex;

    flex-wrap: wrap;

    gap: var(--jkda-sp-3);

}



@media (max-width: 860px) {

    .jkda-series-hero__inner {

        grid-template-columns: 1fr;

    }



    .jkda-series-hero__cover {

        max-width: 320px;

        margin-inline: auto;

    }

}



@media (pointer: coarse) {

    .jkda-series-hero__cta .jkda-button {

        min-height: 44px;

    }

}



/* ==========================================================================

   SINGLE PRODUCT / PDP (PRODUCT_DETAIL.md §2–§4) — builds on the locked

   tokens/classes. Reuses .jkda-page-header, .jkda-breadcrumb,

   .jkda-badge--saffron, .jkda-book-sku, .jkda-price*, .jkda-button,

   .jkda-pill-cta, .jkda-books-grid, .jkda-book-card, .jkda-section*. Defines

   ONLY new .jkda-product-detail* / .jkda-whats-included* scaffold; redefines no

   token or base component. Sticky cover is desktop-only; single column §860px.

   ========================================================================== */



.jkda-product-header {

    padding-bottom: var(--jkda-sp-5);

}



/* §3 — 2-column grid: 400px cover + fluid body (minmax(0,1fr) guards overflow). */

.jkda-product-detail {

    display: grid;

    grid-template-columns: 400px minmax(0, 1fr);

    gap: var(--jkda-sp-8);

    align-items: start;

}



/* Col 1 — single sticky Book Cover. align-self:start so a short right column

   never stretches the cover; max-height + overflow guard a tall cover so it

   never clips under the sticky header or overflows the viewport. */

.jkda-product-detail-cover {

    position: sticky;

    top: 96px;

    align-self: start;

    aspect-ratio: var(--jkda-cover-ratio);

    width: 100%;

    max-height: calc(100vh - 110px);

    overflow: hidden;

    border-radius: var(--jkda-radius);

    background: var(--jkda-paper3);

    box-shadow: var(--jkda-shadow-lg);

    z-index: 10;

}



.jkda-product-detail-cover img {

    width: 100%;

    height: 100%;

    object-fit: contain !important;

    background: #FFFFFF !important;

    display: block;

    image-rendering: -webkit-optimize-contrast;

}



.jkda-product-detail-cover__ph {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: var(--jkda-sp-4);

    color: var(--jkda-ink4);

    font-size: 14px;

}



/* Col 2 — product content body (encapsulates all content per D-142). */

.jkda-product-detail-body {

    grid-column: 2;

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-4);

    min-width: 0;

    width: 100%;

    position: relative;

    z-index: 1;

}



.jkda-product-detail-meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--jkda-sp-3);

}



.jkda-product-detail-title {

    margin: 0;

}



.jkda-product-detail-tags {

    color: var(--jkda-ink3);

    font-size: 14px;

}



.jkda-product-detail-price {

    font-size: 28px;

    font-weight: 700;

    color: var(--jkda-ink);

}



.jkda-product-detail-price del {

    color: var(--jkda-ink4);

    font-weight: 500;

    margin-right: var(--jkda-sp-2);

}



.jkda-product-detail-cta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--jkda-sp-3);

    margin-top: var(--jkda-sp-2);

}



.jkda-product-detail-free {

    font-weight: 600;

    color: var(--jkda-teal);

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--jkda-sp-3);

}



.jkda-product-detail-free__link {

    font-weight: 500;

}



/* What's Included — FREE value stack card. */

.jkda-whats-included {

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius);

    background: var(--jkda-paper2);

    padding: var(--jkda-sp-5);

}



.jkda-whats-included__title {

    font-size: 18px;

    margin: 0 0 var(--jkda-sp-3);

}



.jkda-whats-included__list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-3);

}



.jkda-whats-included__item {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    justify-content: space-between;

    gap: var(--jkda-sp-3);

}



.jkda-whats-included__value {

    display: inline-flex;

    align-items: baseline;

    gap: var(--jkda-sp-2);

}



.jkda-product-detail-short {

    color: var(--jkda-ink2);

}



/* §4 — Long description encapsulated inside Column 2 (D-142 non-overlap invariant). */

.jkda-product-detail-long {

    margin-top: var(--jkda-sp-4);

    padding-top: var(--jkda-sp-6);

    border-top: 1px solid var(--jkda-border);

    width: 100%;

}



.jkda-product-detail-long__title {

    margin: 0 0 var(--jkda-sp-4);

}



/* §3 responsive — single column; cover static, centered, BEFORE body; sticky off. */

@media (max-width: 860px) {

    .jkda-product-detail {

        grid-template-columns: 1fr;

    }



    .jkda-product-detail-cover {

        position: static;

        max-height: none;

        max-width: 320px;

        margin-inline: auto;

    }



    .jkda-product-detail-body {

        max-width: none;

    }

}



/* Coarse pointers / reduced motion — disable sticky so it never harms touch UX. */

@media (pointer: coarse) {

    .jkda-product-detail-cover {

        position: static;

        max-height: none;

    }



    .jkda-product-detail-cta .jkda-button {

        min-height: 44px;

    }

}



@media (prefers-reduced-motion: reduce) {

    .jkda-product-detail-cover {

        position: static;

        max-height: none;

    }

}



/* ==========================================================================

   CART (BLUEPRINT §3) — builds on the locked tokens/components. Reuses

   .jkda-page-header, .jkda-breadcrumb, .jkda-section, .jkda-container,

   .jkda-button(+--outline/--teal), .jkda-price*, .jkda-book-sku. Defines only

   new .jkda-cart* scaffold + responsive stacking; redefines no token or base

   component. Mobile (§860 / §540) stacks each row into a card to avoid any

   horizontal overflow / broken table. USD / US-English only.

   ========================================================================== */



/* Cart header shares the dark .jkda-page-header; no sub so no extra rule. */

.jkda-cart-header .jkda-page-header__title {

    margin-top: var(--jkda-sp-2);

}



/* Two-column shell: items table (left) + totals card (right) on desktop. */

.jkda-cart {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 340px;

    gap: var(--jkda-sp-10);

    align-items: start;

}



.jkda-cart-form {

    min-width: 0;

}



.jkda-cart-collaterals {

    min-width: 0;

}



/* ----- Line items table ----- */

.jkda-cart-table {

    width: 100%;

    border-collapse: collapse;

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    overflow: hidden;

}



.jkda-cart-table thead th {

    text-align: left;

    font-family: var(--jkda-ff-display);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--jkda-ink3);

    padding: var(--jkda-sp-4) var(--jkda-sp-4);

    background: var(--jkda-paper2);

    border-bottom: 1px solid var(--jkda-border);

}



.jkda-cart-table td {

    padding: var(--jkda-sp-4) var(--jkda-sp-4);

    border-bottom: 1px solid var(--jkda-border);

    vertical-align: middle;

    color: var(--jkda-ink);

}



.jkda-cart-table tbody tr:last-child td {

    border-bottom: none;

}



.jkda-cart-thumb img {

    width: 64px;

    height: auto;

    border-radius: var(--jkda-radius);

    display: block;

}



.jkda-cart-name__link {

    font-family: var(--jkda-ff-display);

    font-weight: 600;

    color: var(--jkda-ink);

}



.jkda-cart-name__link:hover,

.jkda-cart-name__link:focus-visible {

    color: var(--jkda-saffron2);

}



.jkda-cart-sku {

    display: block;

    margin-top: var(--jkda-sp-1);

    font-size: 12px;

    color: var(--jkda-ink4);

}



.jkda-cart-price,

.jkda-cart-subtotal {

    font-family: var(--jkda-ff-display);

    font-weight: 600;

    white-space: nowrap;

}



/* Remove (S) control — 44px touch target. */

.jkda-cart-remove {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    min-width: 32px;

    border-radius: 50%;

    font-size: 20px;

    line-height: 1;

    color: var(--jkda-ink3);

    background: var(--jkda-paper2);

    text-decoration: none;

    transition: background var(--jkda-duration) var(--jkda-ease),

        color var(--jkda-duration) var(--jkda-ease);

}



.jkda-cart-remove:hover,

.jkda-cart-remove:focus-visible {

    background: var(--jkda-ruby-light);

    color: var(--jkda-ruby);

}



/* Quantity input (WooCommerce .quantity wrapper). */

.jkda-cart-table .quantity {

    display: inline-flex;

    align-items: center;

}



.jkda-cart-table .quantity .qty {

    width: 64px;

    min-height: 44px;

    padding: 8px 10px;

    text-align: center;

    font-family: var(--jkda-ff-sans);

    font-size: 15px;

    color: var(--jkda-ink);

    background: #fff;

    border: 1px solid var(--jkda-border2);

    border-radius: var(--jkda-radius);

}



.jkda-cart-table .quantity .qty:focus-visible {

    outline: 2px solid var(--jkda-saffron);

    outline-offset: 1px;

}



/* ----- Actions row (coupon + continue + update) ----- */

.jkda-cart-actions {

    background: var(--jkda-paper);

}



.jkda-cart-coupon {

    display: flex;

    flex-wrap: wrap;

    gap: var(--jkda-sp-3);

    align-items: center;

    margin-bottom: var(--jkda-sp-4);

}



.jkda-input {

    min-height: 44px;

    padding: 10px 14px;

    font-family: var(--jkda-ff-sans);

    font-size: 15px;

    color: var(--jkda-ink);

    background: #fff;

    border: 1px solid var(--jkda-border2);

    border-radius: var(--jkda-radius);

    min-width: 180px;

}



.jkda-input:focus-visible {

    outline: 2px solid var(--jkda-saffron);

    outline-offset: 1px;

}



.jkda-cart-actions__buttons {

    display: flex;

    flex-wrap: wrap;

    gap: var(--jkda-sp-3);

    justify-content: space-between;

}



.jkda-cart-actions .jkda-button {

    min-height: 44px;

}



/* ----- Totals card ----- */

.jkda-cart-totals {

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    padding: var(--jkda-sp-6);

    box-shadow: var(--jkda-shadow-sm);

    position: sticky;

    top: var(--jkda-sp-6);

}



.jkda-cart-totals__title {

    font-family: var(--jkda-ff-display);

    font-size: 20px;

    font-weight: 600;

    margin: 0 0 var(--jkda-sp-4);

}



.jkda-cart-totals__table {

    width: 100%;

    border-collapse: collapse;

    margin-bottom: var(--jkda-sp-5);

}



.jkda-cart-totals__table th,

.jkda-cart-totals__table td {

    padding: var(--jkda-sp-3) 0;

    text-align: left;

    border-bottom: 1px solid var(--jkda-border);

    font-size: 14px;

    vertical-align: top;

}



.jkda-cart-totals__table th {

    font-weight: 500;

    color: var(--jkda-ink2);

}



.jkda-cart-totals__table td {

    text-align: right;

    font-family: var(--jkda-ff-display);

    font-weight: 600;

    color: var(--jkda-ink);

}



.jkda-cart-totals__table .order-total th,

.jkda-cart-totals__table .order-total td {

    border-bottom: none;

    font-size: 18px;

    padding-top: var(--jkda-sp-4);

}



.jkda-cart-totals__table .cart-discount td {

    color: var(--jkda-teal);

}



/* Proceed to Checkout — WooCommerce outputs .checkout-button.button; map it to

   the locked primary button so there is no style drift. */

.jkda-cart-proceed {

    display: block;

}



.jkda-cart-proceed .checkout-button,

.jkda-cart-proceed .button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 48px;

    background: var(--jkda-saffron);

    color: #fff;

    border: none;

    padding: 14px 28px;

    border-radius: var(--jkda-radius);

    font-family: var(--jkda-ff-sans);

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition: background var(--jkda-duration) var(--jkda-ease);

}



.jkda-cart-proceed .checkout-button:hover,

.jkda-cart-proceed .checkout-button:focus-visible,

.jkda-cart-proceed .button:hover,

.jkda-cart-proceed .button:focus-visible {

    background: var(--jkda-saffron2);

    color: #fff;

}



/* ----- Empty state (§9) ----- */

.jkda-cart-empty {

    text-align: center;

    padding: var(--jkda-sp-16) var(--jkda-sp-4);

}



.jkda-cart-empty__msg {

    font-family: var(--jkda-ff-display);

    font-size: 18px;

    color: var(--jkda-ink2);

    margin: 0 0 var(--jkda-sp-6);

}



/* ----- Cross-sells (if WooCommerce emits them) ----- */

.jkda-cart-collaterals .cross-sells {

    margin-top: var(--jkda-sp-8);

}



/* ==========================================================================

   CART — Responsive (HOME.md §11 breakpoints 860 / 540). Below 860 the totals

   card drops under the items; below 540 each table row becomes a stacked card

   using the WooCommerce `data-title` labels so there is NO horizontal overflow.

   ========================================================================== */

@media (max-width: 860px) {

    .jkda-cart {

        grid-template-columns: 1fr;

        gap: var(--jkda-sp-8);

    }



    .jkda-cart-totals {

        position: static;

    }

}



@media (max-width: 540px) {

    .jkda-cart-table,

    .jkda-cart-table tbody,

    .jkda-cart-table tr,

    .jkda-cart-table td {

        display: block;

        width: 100%;

    }



    .jkda-cart-table thead {

        display: none;

    }



    .jkda-cart-table {

        border: none;

        background: transparent;

        overflow: visible;

    }



    .jkda-cart-table .jkda-cart-item {

        position: relative;

        background: #fff;

        border: 1px solid var(--jkda-border);

        border-radius: var(--jkda-radius2);

        margin-bottom: var(--jkda-sp-4);

        padding: var(--jkda-sp-4) var(--jkda-sp-4) var(--jkda-sp-3);

    }



    .jkda-cart-table .jkda-cart-item td {

        border-bottom: 1px dashed var(--jkda-border);

        padding: var(--jkda-sp-3) 0;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: var(--jkda-sp-4);

        text-align: right;

    }



    .jkda-cart-table .jkda-cart-item td:last-child {

        border-bottom: none;

    }



    /* Label column from WooCommerce data-title. */

    .jkda-cart-table .jkda-cart-item td::before {

        content: attr(data-title);

        font-family: var(--jkda-ff-display);

        font-size: 12px;

        font-weight: 600;

        letter-spacing: 0.04em;

        text-transform: uppercase;

        color: var(--jkda-ink3);

        text-align: left;

    }



    /* Thumbnail + remove: no label, centered content. */

    .jkda-cart-table .jkda-cart-item .product-thumbnail,

    .jkda-cart-table .jkda-cart-item .product-remove {

        justify-content: flex-start;

    }



    .jkda-cart-table .jkda-cart-item .product-thumbnail::before,

    .jkda-cart-table .jkda-cart-item .product-remove::before {

        content: "";

    }



    /* Remove sits top-right of each card. */

    .jkda-cart-table .jkda-cart-item .product-remove {

        position: absolute;

        top: var(--jkda-sp-2);

        right: var(--jkda-sp-2);

        padding: 0;

        border-bottom: none;

    }



    .jkda-cart-actions__buttons {

        flex-direction: column;

    }



    .jkda-cart-actions__buttons .jkda-button {

        width: 100%;

    }



    .jkda-cart-coupon .jkda-input,

    .jkda-cart-coupon .jkda-button {

        width: 100%;

    }



    .jkda-cart-totals__table td,

    .jkda-cart-totals__table th {

        font-size: 14px;

    }

}



/* Coarse pointers — guarantee 44px+ touch targets on cart controls. */

@media (pointer: coarse) {

    .jkda-cart-remove {

        width: 44px;

        height: 44px;

        min-width: 44px;

    }



    .jkda-cart-table .quantity .qty,

    .jkda-input,

    .jkda-cart-actions .jkda-button,

    .jkda-cart-proceed .checkout-button,

    .jkda-cart-proceed .button {

        min-height: 48px;

    }

}



/* Reduced motion — remove transitions on cart interactive elements. */

@media (prefers-reduced-motion: reduce) {

    .jkda-cart-remove,

    .jkda-cart-proceed .checkout-button,

    .jkda-cart-proceed .button {

        transition: none;

    }

}



/* ==========================================================================

   CHECKOUT (BLUEPRINT §4) — builds on the locked tokens/components. Reuses

   .jkda-page-header, .jkda-breadcrumb, .jkda-section, .jkda-container,

   .jkda-input, .jkda-button(+--teal). Defines only new .jkda-checkout* scaffold

   + maps the WooCommerce-native checkout fields / payment UI / #place_order

   button onto the locked look so there is no style drift. Billing fields,

   coupon/login forms, Razorpay & PayPal payment and the Place Order button are all

   WooCommerce-native; this only styles them. USD / US-English only.

   ========================================================================== */



.jkda-checkout-header .jkda-page-header__title {

    margin-top: var(--jkda-sp-2);

}



/* Two-column shell: customer/billing details (left) + order review + payment

   (right) on desktop; stacks on mobile. */

.jkda-checkout-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 360px;

    gap: var(--jkda-sp-10);

    align-items: start;

}



.jkda-checkout-details {

    min-width: 0;

}



.jkda-checkout-review {

    min-width: 0;

    position: sticky;

    top: var(--jkda-sp-6);

}



/* WooCommerce renders billing + (optional) shipping columns inside .col2-set;

   for a digital/downloadable store shipping is typically absent, so the columns

   stack naturally. */

.jkda-checkout-customer {

    display: block;

}



.jkda-checkout-col + .jkda-checkout-col {

    margin-top: var(--jkda-sp-8);

}



.jkda-checkout-details h3 {

    font-family: var(--jkda-ff-display);

    font-size: 20px;

    margin: 0 0 var(--jkda-sp-4);

}



/* ----- Map WooCommerce-native checkout fields onto the locked input look ----- */

.jkda-checkout-form .form-row {

    margin: 0 0 var(--jkda-sp-4);

}



.jkda-checkout-form label {

    display: block;

    font-family: var(--jkda-ff-display);

    font-weight: 500;

    color: var(--jkda-ink2);

    margin: 0 0 var(--jkda-sp-2);

}



.jkda-checkout-form .input-text,

.jkda-checkout-form input[type="text"],

.jkda-checkout-form input[type="email"],

.jkda-checkout-form input[type="tel"],

.jkda-checkout-form input[type="password"],

.jkda-checkout-form textarea,

.jkda-checkout-form .select2-selection,

.jkda-checkout-form select {

    width: 100%;

    min-height: 44px;

    padding: 10px 14px;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius);

    background: #fff;

    color: var(--jkda-ink);

    font-size: 15px;

}



.jkda-checkout-form .input-text:focus-visible,

.jkda-checkout-form select:focus-visible,

.jkda-checkout-form textarea:focus-visible {

    outline: 2px solid var(--jkda-saffron);

    outline-offset: 1px;

}



.jkda-checkout-form .required {

    color: var(--jkda-ruby);

    text-decoration: none;

}



/* ----- Order review panel ----- */

.jkda-checkout-review__title {

    font-family: var(--jkda-ff-display);

    font-size: 20px;

    margin: 0 0 var(--jkda-sp-4);

}



.jkda-checkout-review__panel {

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius);

    padding: var(--jkda-sp-6);

}



.jkda-checkout-order-table {

    width: 100%;

    border-collapse: collapse;

    margin: 0 0 var(--jkda-sp-5);

}



.jkda-checkout-order-table thead th {

    text-align: left;

    font-family: var(--jkda-ff-display);

    font-size: 13px;

    letter-spacing: .04em;

    text-transform: uppercase;

    color: var(--jkda-ink2);

    padding: 0 0 var(--jkda-sp-3);

    border-bottom: 1px solid var(--jkda-border);

}



.jkda-checkout-order-table thead th.product-total,

.jkda-checkout-order-table tfoot td,

.jkda-checkout-order-table .product-total {

    text-align: right;

}



.jkda-checkout-order-table tbody td {

    padding: var(--jkda-sp-3) 0;

    border-bottom: 1px solid var(--jkda-border);

    vertical-align: top;

}



.jkda-checkout-order-name {

    font-family: var(--jkda-ff-display);

    font-weight: 600;

}



.jkda-checkout-order-name .product-quantity {

    color: var(--jkda-ink2);

    font-weight: 500;

}



.jkda-checkout-order-table tfoot th,

.jkda-checkout-order-table tfoot td {

    padding: var(--jkda-sp-3) 0;

    border-bottom: 1px solid var(--jkda-border);

    font-size: 15px;

}



.jkda-checkout-order-table tfoot th {

    text-align: left;

    font-weight: 500;

    color: var(--jkda-ink2);

}



.jkda-checkout-order-table tfoot .cart-discount td {

    color: var(--jkda-teal);

}



.jkda-checkout-order-table tfoot .order-total th,

.jkda-checkout-order-table tfoot .order-total td {

    border-bottom: none;

    font-size: 18px;

    font-family: var(--jkda-ff-display);

    font-weight: 700;

}



/* ----- Payment box (WooCommerce-native payment.php incl. Razorpay & PayPal gateways) ----- */

.jkda-checkout-review__panel #payment,

.jkda-checkout-review__panel .woocommerce-checkout-payment {

    background: transparent;

    border-radius: var(--jkda-radius);

}



.jkda-checkout-review__panel .wc_payment_methods {

    list-style: none;

    margin: 0 0 var(--jkda-sp-4);

    padding: 0;

    border-top: 1px solid var(--jkda-border);

}



.jkda-checkout-review__panel .wc_payment_methods li {

    padding: var(--jkda-sp-3) 0;

    border-bottom: 1px solid var(--jkda-border);

}



.jkda-checkout-review__panel .payment_box {

    margin-top: var(--jkda-sp-2);

    font-size: 14px;

    color: var(--jkda-ink2);

}



/* Terms / legal acceptance (rendered by WooCommerce when a T&C page is set). */

.jkda-checkout-review__panel .woocommerce-terms-and-conditions-wrapper {

    margin: var(--jkda-sp-4) 0;

    font-size: 14px;

}



/* Place Order — WooCommerce outputs #place_order.button.alt; map it to the

   locked primary (teal) button so there is no style drift. */

.jkda-checkout-review__panel #place_order,

.jkda-checkout-review__panel .button.alt {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 48px;

    padding: 14px 24px;

    border: none;

    border-radius: var(--jkda-radius);

    background: var(--jkda-teal);

    color: #fff;

    font-family: var(--jkda-ff-display);

    font-weight: 700;

    font-size: 16px;

    cursor: pointer;

    transition: background .18s ease;

}



.jkda-checkout-review__panel #place_order:hover,

.jkda-checkout-review__panel #place_order:focus-visible,

.jkda-checkout-review__panel .button.alt:hover,

.jkda-checkout-review__panel .button.alt:focus-visible {

    background: var(--jkda-teal2);

    color: #fff;

}



/* Coupon + login toggles sit above the form (WooCommerce-native). */

.jkda-checkout .woocommerce-form-coupon-toggle,

.jkda-checkout .woocommerce-form-login-toggle {

    margin-bottom: var(--jkda-sp-5);

}



.jkda-checkout .checkout_coupon .form-row .jkda-input,

.jkda-checkout .checkout_coupon .input-text {

    max-width: 320px;

}



/* ==========================================================================

   CHECKOUT RESPONSIVE

   ========================================================================== */

@media (max-width: 860px) {

    .jkda-checkout-grid {

        grid-template-columns: 1fr;

        gap: var(--jkda-sp-8);

    }



    .jkda-checkout-review {

        position: static;

    }

}



@media (max-width: 540px) {

    .jkda-checkout-review__panel {

        padding: var(--jkda-sp-4);

    }



    .jkda-checkout-order-table tfoot th,

    .jkda-checkout-order-table tfoot td,

    .jkda-checkout-order-table tbody td {

        font-size: 14px;

    }

}



/* Coarse pointers — guarantee 44px+ touch targets on checkout controls. */

@media (pointer: coarse) {

    .jkda-checkout-form .input-text,

    .jkda-checkout-form select,

    .jkda-checkout-form textarea,

    .jkda-checkout-review__panel #place_order,

    .jkda-checkout-review__panel .button.alt {

        min-height: 48px;

    }

}



/* Reduced motion — remove transitions on checkout interactive elements. */

@media (prefers-reduced-motion: reduce) {

    .jkda-checkout-review__panel #place_order,

    .jkda-checkout-review__panel .button.alt {

        transition: none;

    }

}



/* ==========================================================================

   ORDER RECEIVED / THANK YOU (BLUEPRINT §6) — builds on the locked

   tokens/components. Reuses .jkda-page-header, .jkda-breadcrumb, .jkda-section,

   .jkda-container, .jkda-button(+--teal/--outline), and the WooCommerce-native

   order-details table / downloads block rendered by woocommerce_thankyou.

   Defines only new .jkda-order-received* scaffold; redefines no token or base

   component. All order/customer/payment data is WooCommerce-produced.

   ========================================================================== */



.jkda-order-received-header .jkda-page-header__title {

    margin-top: var(--jkda-sp-2);

}



.jkda-order-received {

    max-width: 760px;

    margin: 0 auto;

}



/* Confirmation / status notices. */

.jkda-order-received__notice {

    margin: 0 0 var(--jkda-sp-5);

    padding: var(--jkda-sp-4) var(--jkda-sp-5);

    border-radius: var(--jkda-radius);

    font-size: 16px;

    font-weight: 600;

}



.jkda-order-received__notice--success {

    background: var(--jkda-teal-light);

    color: var(--jkda-teal);

    border: 1px solid var(--jkda-teal);

}



.jkda-order-received__notice--error {

    background: var(--jkda-ruby-light);

    color: var(--jkda-ruby);

    border: 1px solid var(--jkda-ruby);

}



.jkda-order-received__notice--pending {

    background: var(--jkda-saffron-light);

    color: var(--jkda-saffron2);

    border: 1px solid var(--jkda-saffron-mid);

    font-weight: 500;

}



/* Order overview list (number / date / email / total / payment method). */

.jkda-order-received__overview {

    list-style: none;

    margin: 0 0 var(--jkda-sp-6);

    padding: var(--jkda-sp-5);

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    gap: var(--jkda-sp-4);

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius);

}



.jkda-order-received__overview li {

    display: flex;

    flex-direction: column;

    gap: 4px;

    font-size: 13px;

    color: var(--jkda-ink2);

}



.jkda-order-received__overview li strong {

    font-size: 16px;

    color: var(--jkda-ink);

}



/* Email-based digital-delivery note (VPS + n8n — Google Drive; no on-site engine). */

.jkda-order-received__delivery {

    margin: 0 0 var(--jkda-sp-6);

    padding: var(--jkda-sp-4) var(--jkda-sp-5);

    background: var(--jkda-paper2);

    border-left: 3px solid var(--jkda-teal);

    border-radius: var(--jkda-radius);

    color: var(--jkda-ink2);

    font-size: 15px;

}



/* Next-step navigation back into the account journey. */

.jkda-order-received__actions {

    display: flex;

    flex-wrap: wrap;

    gap: var(--jkda-sp-3);

    margin: 0 0 var(--jkda-sp-6);

}



@media (max-width: 540px) {

    .jkda-order-received__overview {

        padding: var(--jkda-sp-4);

    }



    .jkda-order-received__actions .jkda-button {

        width: 100%;

        min-height: 48px;

    }

}



/* ==========================================================================

   PAY FOR ORDER (BLUEPRINT §5) — native WooCommerce order-pay endpoint.

   Reuses the locked .jkda-checkout-order-table (order summary) and

   .jkda-checkout-review__panel (payment box + locked teal #place_order button)

   components; redefines no token or base component. All order/customer/payment

   data is WooCommerce-produced (ownership + order-key gate is native).

   Defines only new .jkda-order-pay* scaffold.

   ========================================================================== */



.jkda-order-pay-header .jkda-page-header__title {

    margin-top: var(--jkda-sp-2);

}



/* Center the native order-pay form on its own standalone page (it is not inside

   the checkout two-column grid here). */

.jkda-order-pay {

    max-width: 640px;

    margin: 0 auto;

}



/* D-133 USD billing disclosure (no Indian GSTIN / GST wording). */

.jkda-order-pay__disclosure {

    margin: 0 0 var(--jkda-sp-5);

    font-size: 14px;

    color: var(--jkda-ink2);

}



@media (max-width: 540px) {

    .jkda-order-pay {

        padding: var(--jkda-sp-4);

    }

}



/* ==========================================================================

   MY ACCOUNT (BLUEPRINT §7 / MY_ACCOUNT.md) — native WooCommerce My Account area.

   Fully responsive across Desktop (>1024px), Tablet (768px–1023px), and Mobile (<768px).

   Scoped strictly under .jkda-account-page, .jkda-myaccount, .woocommerce-MyAccount-*

   Zero customer-facing LUT / GST wording. 100% digital bookstore architecture.

   ========================================================================== */



.jkda-account-header .jkda-page-header__title {

    margin-top: var(--jkda-sp-2);

}



.jkda-account-header .jkda-page-header__sub {

    margin: var(--jkda-sp-2) 0 0;

    color: #94A3B8;

    font-size: 15px;

    max-width: 600px;

}



/* Base Account Container */

.jkda-account-page.woocommerce,

.jkda-account-page .woocommerce-MyAccount-navigation,

.jkda-account-page .woocommerce-MyAccount-content {

    box-sizing: border-box;

}



/* ----- LOGGED-IN: Two-column grid (Sidebar 280px + Content 1fr) ----- */

.jkda-account-page--logged-in,

.jkda-account-page.woocommerce:has(.woocommerce-MyAccount-navigation) {

    display: grid;

    grid-template-columns: 280px minmax(0, 1fr);

    gap: var(--jkda-sp-8);

    align-items: start;

}



/* ----- LOGGED-OUT: Centered single-column container (fixes 240px squash bug) ----- */

.jkda-account-page--logged-out,

.jkda-account-page.woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {

    display: block;

    width: 100%;

    max-width: 1040px;

    margin: 0 auto;

}



/* ==========================================================================

   ACCOUNT NAVIGATION (Sidebar on Desktop, Horizontal Pill Bar on Tablet/Mobile)

   ========================================================================== */

.jkda-account-nav {

    background: #fff;

    border: 1.5px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    padding: var(--jkda-sp-4);

    box-shadow: var(--jkda-shadow-sm);

    position: sticky;

    top: 96px;

    z-index: 10;

}



/* Student Profile Badge Card */

.jkda-account-nav__profile {

    display: flex;

    align-items: center;

    gap: var(--jkda-sp-3);

    padding-bottom: var(--jkda-sp-4);

    margin-bottom: var(--jkda-sp-3);

    border-bottom: 1.5px solid var(--jkda-border);

}



.jkda-account-nav__avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--jkda-navy) 0%, #1E293B 100%);

    color: var(--jkda-saffron);

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: var(--jkda-ff-sans);

    font-size: 18px;

    font-weight: 800;

    flex-shrink: 0;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}



.jkda-account-nav__meta {

    min-width: 0;

    display: flex;

    flex-direction: column;

}



.jkda-account-nav__name {

    font-family: var(--jkda-ff-sans);

    font-size: 15px;

    font-weight: 700;

    color: var(--jkda-ink);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.jkda-account-nav__email {

    font-size: 12px;

    color: var(--jkda-ink2);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.jkda-account-nav__badge {

    display: inline-block;

    align-self: flex-start;

    margin-top: 2px;

    padding: 1px 7px;

    background: var(--jkda-teal-light);

    color: var(--jkda-teal);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    border-radius: 999px;

}



/* Navigation List */

.jkda-account-nav__list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.jkda-account-nav__item {

    margin: 0;

}



.jkda-account-nav__link {

    display: flex;

    align-items: center;

    gap: var(--jkda-sp-3);

    padding: 10px 14px;

    border-radius: var(--jkda-radius);

    color: var(--jkda-ink2);

    font-family: var(--jkda-ff-sans);

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: all var(--jkda-duration) var(--jkda-ease);

}



.jkda-account-nav__icon {

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--jkda-ink2);

    transition: color var(--jkda-duration) var(--jkda-ease);

}



.jkda-account-nav__link:hover,

.jkda-account-nav__link:focus-visible {

    background: var(--jkda-paper2);

    color: var(--jkda-ink);

}



.jkda-account-nav__link:hover .jkda-account-nav__icon {

    color: var(--jkda-saffron2);

}



.jkda-account-nav__item.is-active > .jkda-account-nav__link {

    background: var(--jkda-navy);

    color: #fff;

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);

}



.jkda-account-nav__item.is-active > .jkda-account-nav__link .jkda-account-nav__icon {

    color: var(--jkda-saffron);

}



/* ==========================================================================

   ACCOUNT CONTENT CONTAINER

   ========================================================================== */

.jkda-account-content {

    min-width: 0;

    background: #fff;

    border: 1.5px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    padding: var(--jkda-sp-8);

    box-shadow: var(--jkda-shadow-sm);

}



.jkda-account-content a {

    color: var(--jkda-teal);

    text-decoration: underline;

}



.jkda-account-content a:hover {

    color: var(--jkda-teal-hover);

}



/* Section Sub-Headers */

.jkda-account-orders-header {

    margin-bottom: var(--jkda-sp-6);

    padding-bottom: var(--jkda-sp-4);

    border-bottom: 1.5px solid var(--jkda-border);

}



.jkda-account-orders__heading {

    margin: 0 0 var(--jkda-sp-1);

    font-family: var(--jkda-ff-sans);

    font-size: 22px;

    font-weight: 800;

    color: var(--jkda-ink);

}



.jkda-account-orders__sub {

    margin: 0;

    font-size: 14px;

    color: var(--jkda-ink2);

}



/* ==========================================================================

   DASHBOARD (Welcome Hero, Action Cards, Delivery Notice)

   ========================================================================== */

.jkda-account-dashboard {

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-6);

}



.jkda-account-dashboard__hero {

    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);

    border-radius: 14px;

    padding: var(--jkda-sp-6) var(--jkda-sp-8);

    color: #fff;

    position: relative;

    overflow: hidden;

    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);

}



.jkda-account-dashboard__hero::before {

    content: '';

    position: absolute;

    top: -40px;

    right: -40px;

    width: 140px;

    height: 140px;

    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

}



.jkda-account-dashboard__title {

    margin: 0 0 var(--jkda-sp-2);

    font-family: var(--jkda-ff-sans);

    font-size: 24px;

    font-weight: 800;

    color: #fff;

}



.jkda-account-dashboard__intro {

    margin: 0 0 var(--jkda-sp-4);

    font-size: 14px;

    color: #94A3B8;

    line-height: 1.6;

    max-width: 600px;

}



.jkda-account-dashboard__chips {

    display: flex;

    flex-wrap: wrap;

    gap: var(--jkda-sp-2);

}



.jkda-account-chip {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 10px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 999px;

    font-size: 12px;

    font-weight: 500;

    color: #E2E8F0;

}



.jkda-account-chip--accent {

    background: rgba(245, 158, 11, 0.12);

    border-color: rgba(245, 158, 11, 0.25);

    color: var(--jkda-saffron);

}



/* Quick Action Grid (4 Interactive Cards) */

.jkda-account-quick-cards {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--jkda-sp-4);

}



.jkda-account-card {

    background: #fff;

    border: 1.5px solid var(--jkda-border);

    border-radius: 12px;

    padding: var(--jkda-sp-5);

    display: flex;

    gap: var(--jkda-sp-4);

    align-items: flex-start;

    transition: all var(--jkda-duration) var(--jkda-ease);

}



.jkda-account-card:hover {

    border-color: var(--jkda-teal);

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);

    transform: translateY(-2px);

}



.jkda-account-card__icon {

    width: 44px;

    height: 44px;

    border-radius: 10px;

    background: var(--jkda-paper2);

    color: var(--jkda-ink);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.jkda-account-card:hover .jkda-account-card__icon {

    background: var(--jkda-teal-light);

    color: var(--jkda-teal);

}



.jkda-account-card__content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.jkda-account-card__title {

    margin: 0 0 4px;

    font-family: var(--jkda-ff-sans);

    font-size: 16px;

    font-weight: 700;

    color: var(--jkda-ink);

}



.jkda-account-card__desc {

    margin: 0 0 var(--jkda-sp-3);

    font-size: 13px;

    color: var(--jkda-ink2);

    line-height: 1.5;

}



.jkda-account-card .jkda-button {

    text-decoration: none;

}



/* ==========================================================================

   DIGITAL DELIVERY NOTICE CARDS (Consistent Storefront Pattern)

   ========================================================================== */

.jkda-delivery-notice-card {

    background: #F0FDFA;

    border: 1.5px solid #99F6E4;

    border-radius: 12px;

    padding: var(--jkda-sp-5);

    display: flex;

    gap: var(--jkda-sp-4);

    align-items: flex-start;

}



.jkda-delivery-notice-card--primary {

    background: #F8FAFC;

    border-color: #CBD5E1;

}



.jkda-delivery-notice-card__icon {

    color: #0D9488;

    flex-shrink: 0;

    margin-top: 2px;

}



.jkda-delivery-notice-card--primary .jkda-delivery-notice-card__icon {

    color: var(--jkda-navy);

}



.jkda-delivery-notice-card__content {

    min-width: 0;

}



.jkda-delivery-notice-card__title {

    margin: 0 0 4px;

    font-family: var(--jkda-ff-sans);

    font-size: 15px;

    font-weight: 700;

    color: #0F766E;

}



.jkda-delivery-notice-card--primary .jkda-delivery-notice-card__title {

    color: var(--jkda-ink);

}



.jkda-delivery-notice-card__text {

    margin: 0;

    font-size: 13.5px;

    color: #115E59;

    line-height: 1.55;

}



.jkda-delivery-notice-card--primary .jkda-delivery-notice-card__text {

    color: var(--jkda-ink2);

}



.jkda-delivery-notice-card__actions {

    margin-top: var(--jkda-sp-3);

}



/* ==========================================================================

   ORDERS TABLE & STATUS BADGES

   ========================================================================== */

.jkda-account-orders,

.jkda-account-content table.shop_table {

    width: 100%;

    border-collapse: collapse;

    margin: 0 0 var(--jkda-sp-5);

    font-size: 14px;

}



.jkda-account-orders th,

.jkda-account-content table.shop_table th {

    text-align: left;

    padding: 12px 14px;

    border-bottom: 2px solid var(--jkda-border);

    font-family: var(--jkda-ff-sans);

    font-size: 13px;

    font-weight: 700;

    color: var(--jkda-ink);

    background: var(--jkda-paper2);

}



.jkda-account-orders td,

.jkda-account-content table.shop_table td {

    padding: 14px;

    border-bottom: 1px solid var(--jkda-border);

    vertical-align: middle;

    color: var(--jkda-ink2);

}



.jkda-account-orders tbody tr:hover td {

    background: #F8FAFC;

}



.jkda-account-orders__num {

    font-weight: 700;

    color: var(--jkda-teal) !important;

    text-decoration: none !important;

}



.jkda-account-orders__num:hover {

    text-decoration: underline !important;

}



.jkda-account-orders__total {

    font-weight: 700;

    color: var(--jkda-ink);

}



.jkda-account-orders__actions {

    display: flex;

    gap: 8px;

    align-items: center;

    white-space: nowrap;

}



/* Order Status Badge Pills */

.jkda-order-status-badge {

    display: inline-flex;

    align-items: center;

    padding: 3px 10px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.02em;

    text-transform: capitalize;

}



.jkda-order-status-badge--completed {

    background: #ECFDF5;

    color: #065F46;

    border: 1px solid #A7F3D0;

}



.jkda-order-status-badge--processing {

    background: #EFF6FF;

    color: #1E40AF;

    border: 1px solid #BFDBFE;

}



.jkda-order-status-badge--pending,

.jkda-order-status-badge--on-hold {

    background: #FFFBEB;

    color: #92400E;

    border: 1px solid #FDE68A;

}



.jkda-order-status-badge--cancelled,

.jkda-order-status-badge--failed {

    background: #FEF2F2;

    color: #991B1B;

    border: 1px solid #FECACA;

}



/* Pagination */

.jkda-account-orders__pagination {

    display: flex;

    gap: var(--jkda-sp-3);

    margin-top: var(--jkda-sp-4);

}



/* Empty State Card */

.jkda-account-empty {

    padding: var(--jkda-sp-10) var(--jkda-sp-6);

    background: var(--jkda-paper2);

    border: 1.5px dashed var(--jkda-border2);

    border-radius: 14px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.jkda-account-empty__icon {

    width: 64px;

    height: 64px;

    border-radius: 50%;

    background: #fff;

    color: var(--jkda-ink2);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: var(--jkda-sp-4);

    box-shadow: var(--jkda-shadow-sm);

}



.jkda-account-empty__title {

    margin: 0 0 var(--jkda-sp-2);

    font-family: var(--jkda-ff-sans);

    font-size: 18px;

    font-weight: 700;

    color: var(--jkda-ink);

}



.jkda-account-empty__msg {

    margin: 0 0 var(--jkda-sp-5);

    font-size: 14px;

    color: var(--jkda-ink2);

    max-width: 440px;

    line-height: 1.6;

}



.jkda-account-empty .jkda-button {

    text-decoration: none;

}



/* ==========================================================================

   VIEW ORDER DETAILS

   ========================================================================== */

.jkda-account-view-order {

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-5);

}



.jkda-back-link {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 13.5px;

    font-weight: 600;

    color: var(--jkda-ink2) !important;

    text-decoration: none !important;

    transition: color var(--jkda-duration) var(--jkda-ease);

}



.jkda-back-link:hover {

    color: var(--jkda-teal) !important;

}



.jkda-account-view-order__header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: var(--jkda-sp-4);

    border-bottom: 1.5px solid var(--jkda-border);

}



.jkda-account-view-order__title {

    margin: 0 0 4px;

    font-family: var(--jkda-ff-sans);

    font-size: 22px;

    font-weight: 800;

    color: var(--jkda-ink);

}



.jkda-account-view-order__date {

    margin: 0;

    font-size: 13px;

    color: var(--jkda-ink2);

}



.jkda-account-view-order__notice {

    padding: var(--jkda-sp-4) var(--jkda-sp-5);

    border-radius: var(--jkda-radius2);

    font-size: 14px;

}



.jkda-account-view-order__notice--pending {

    background: #FFFBEB;

    border: 1.5px solid #FDE68A;

    color: #92400E;

}



.jkda-account-view-order__notice--pending .jkda-button {

    margin-top: var(--jkda-sp-3);

    text-decoration: none;

}



.jkda-account-view-order__notice--error {

    background: #FEF2F2;

    border: 1.5px solid #FECACA;

    color: #991B1B;

}



/* WooCommerce Order Details Container Overrides */

.woocommerce-order-details {

    margin-top: var(--jkda-sp-4);

}



.woocommerce-order-details__title,

.woocommerce-customer-details__title {

    font-family: var(--jkda-ff-sans);

    font-size: 18px;

    font-weight: 700;

    margin: 0 0 var(--jkda-sp-3);

    color: var(--jkda-ink);

}



.woocommerce-customer-details {

    margin-top: var(--jkda-sp-6);

    padding: var(--jkda-sp-5);

    background: var(--jkda-paper2);

    border: 1px solid var(--jkda-border);

    border-radius: 12px;

}



.woocommerce-customer-details address {

    font-style: normal;

    font-size: 14px;

    color: var(--jkda-ink2);

    line-height: 1.6;

}



/* ==========================================================================

   AUTH FORMS (LOGIN / REGISTER / LOST PASSWORD)

   ========================================================================== */

.jkda-account-forms-container--dual .jkda-account-forms {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--jkda-sp-8);

}



.jkda-account-forms-container--single .jkda-account-forms {

    max-width: 480px;

    margin: 0 auto;

}



.jkda-account-form-card {

    background: #fff;

    border: 1.5px solid var(--jkda-border);

    border-radius: 16px;

    padding: var(--jkda-sp-8);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

}



.jkda-account-form-card--centered {

    max-width: 500px;

    margin: 0 auto;

}



.jkda-lost-password-wrap {

    padding: var(--jkda-sp-4) 0;

}



.jkda-account-form-card__head {

    margin-bottom: var(--jkda-sp-6);

}



.jkda-account-form-card__icon {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: var(--jkda-paper2);

    color: var(--jkda-ink);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: var(--jkda-sp-3);

}



.jkda-account-forms__title {

    margin: 0 0 6px;

    font-family: var(--jkda-ff-sans);

    font-size: 20px;

    font-weight: 800;

    color: var(--jkda-ink);

}



.jkda-account-forms__sub {

    margin: 0;

    font-size: 13.5px;

    color: var(--jkda-ink2);

    line-height: 1.5;

}



.jkda-form-row {

    margin: 0 0 var(--jkda-sp-4);

}



.jkda-form-row label {

    display: block;

    margin-bottom: 6px;

    font-size: 13.5px;

    font-weight: 700;

    color: var(--jkda-ink);

}



.jkda-input,

.jkda-account-content input[type="text"],

.jkda-account-content input[type="email"],

.jkda-account-content input[type="password"] {

    width: 100%;

    box-sizing: border-box;

    min-height: 46px;

    padding: 10px 14px;

    border: 1.5px solid var(--jkda-border2);

    border-radius: var(--jkda-radius);

    font-family: var(--jkda-ff-sans);

    font-size: 15px;

    color: var(--jkda-ink);

    background: #fff;

    transition: all var(--jkda-duration) var(--jkda-ease);

}



.jkda-input:focus,

.jkda-account-content input:focus {

    outline: none;

    border-color: var(--jkda-saffron);

    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);

}



.jkda-form-grid-2 {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--jkda-sp-4);

}



.jkda-form-meta-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 0 0 var(--jkda-sp-5);

    font-size: 13.5px;

}



.jkda-form-remember {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--jkda-ink2);

    cursor: pointer;

}



.jkda-lost-password-link {

    color: var(--jkda-teal) !important;

    text-decoration: none !important;

    font-weight: 600;

}



.jkda-lost-password-link:hover {

    text-decoration: underline !important;

}



.jkda-form-row--submit {

    margin-top: var(--jkda-sp-2);

}



.jkda-form-row--submit .jkda-button {

    width: 100%;

    min-height: 48px;

    font-size: 15px;

    font-weight: 700;

    justify-content: center;

}



.jkda-form-help {

    display: block;

    margin-top: 4px;

    font-size: 12px;

    color: var(--jkda-ink2);

}



.jkda-form-help--notice {

    padding: 8px 12px;

    background: var(--jkda-paper2);

    border-radius: 6px;

    color: var(--jkda-ink2);

    margin: 0 0 var(--jkda-sp-4);

}



.jkda-account-form__footer-nav {

    margin-top: var(--jkda-sp-5);

    text-align: center;

}



/* Security Trust Bar */

.jkda-auth-trust-bar {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: var(--jkda-sp-6);

    margin-top: var(--jkda-sp-8);

    padding-top: var(--jkda-sp-6);

    border-top: 1px solid var(--jkda-border);

}



.jkda-auth-trust-item {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    color: #64748B;

    font-weight: 500;

}



.jkda-auth-trust-item svg {

    color: var(--jkda-teal);

    flex-shrink: 0;

}



/* Account Details Password Fieldset */

.jkda-account-form__password {

    border: 1.5px solid var(--jkda-border);

    border-radius: 12px;

    padding: var(--jkda-sp-5);

    margin: var(--jkda-sp-6) 0 var(--jkda-sp-5);

}



.jkda-account-form__password legend {

    padding: 0 var(--jkda-sp-2);

    font-family: var(--jkda-ff-sans);

    font-size: 15px;

    font-weight: 700;

    color: var(--jkda-ink);

}



/* ==========================================================================

   RESPONSIVE DESIGN: TABLET & MOBILE

   ========================================================================== */



/* Tablet (max-width: 860px) */

@media (max-width: 860px) {

    .jkda-account-page--logged-in,

    .jkda-account-page.woocommerce:has(.woocommerce-MyAccount-navigation) {

        grid-template-columns: 1fr;

        gap: var(--jkda-sp-6);

    }



    .jkda-account-nav {

        position: static;

        padding: var(--jkda-sp-3);

    }



    .jkda-account-nav__profile {

        padding-bottom: var(--jkda-sp-3);

        margin-bottom: var(--jkda-sp-2);

    }



    /* Horizontal scrollable nav strip on tablet/mobile */

    .jkda-account-nav__list {

        flex-direction: row;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        gap: 6px;

        padding-bottom: 2px;

        scrollbar-width: none;

    }



    .jkda-account-nav__list::-webkit-scrollbar {

        display: none;

    }



    .jkda-account-nav__link {

        white-space: nowrap;

        padding: 8px 12px;

        font-size: 13px;

        background: var(--jkda-paper2);

    }



    .jkda-account-nav__item.is-active > .jkda-account-nav__link {

        background: var(--jkda-navy);

        color: #fff;

    }



    .jkda-account-forms-container--dual .jkda-account-forms {

        grid-template-columns: 1fr;

        gap: var(--jkda-sp-6);

    }

}



/* Mobile (max-width: 640px) */

@media (max-width: 640px) {

    .jkda-account-content {

        padding: var(--jkda-sp-5);

    }



    .jkda-account-dashboard__hero {

        padding: var(--jkda-sp-5);

    }



    .jkda-account-dashboard__title {

        font-size: 20px;

    }



    .jkda-account-quick-cards {

        grid-template-columns: 1fr;

        gap: var(--jkda-sp-3);

    }



    .jkda-form-grid-2 {

        grid-template-columns: 1fr;

        gap: 0;

    }



    .jkda-account-form-card {

        padding: var(--jkda-sp-5);

    }



    .jkda-delivery-notice-card {

        flex-direction: column;

        padding: var(--jkda-sp-4);

    }



    /* Stacked responsive order table -> card view */

    .jkda-account-orders thead {

        display: none;

    }



    .jkda-account-orders tbody tr {

        display: block;

        background: #fff;

        border: 1.5px solid var(--jkda-border);

        border-radius: 12px;

        padding: var(--jkda-sp-4);

        margin-bottom: var(--jkda-sp-4);

        box-shadow: var(--jkda-shadow-sm);

    }



    .jkda-account-orders tbody td {

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: var(--jkda-sp-2);

        border: 0;

        border-bottom: 1px solid var(--jkda-border);

        padding: 8px 0;

        text-align: right;

    }



    .jkda-account-orders tbody td:last-child {

        border-bottom: 0;

        padding-top: 12px;

    }



    .jkda-account-orders tbody td::before {

        content: attr(data-title);

        font-weight: 700;

        color: var(--jkda-ink);

        text-align: left;

        font-size: 13px;

    }



    .jkda-account-orders__actions {

        width: 100%;

        display: flex;

        flex-direction: column;

    }



    .jkda-account-orders__actions .jkda-button {

        width: 100%;

        min-height: 44px;

        justify-content: center;

    }



    .jkda-auth-trust-bar {

        flex-direction: column;

        align-items: flex-start;

        gap: var(--jkda-sp-3);

    }

}



@media (prefers-reduced-motion: reduce) {

    .jkda-account-nav__link,

    .jkda-account-card,

    .jkda-input,

    .jkda-account-content input {

        transition: none;

        transform: none !important;

    }

}





/* ==========================================================================

   REVIEWS HUB (REVIEWS_HUB.md §3–§4) — route `/reviews/`, class prefix .jkda-rh-*

   Reuses the locked design tokens (ink / border / cover-ratio / spacing / radii).

   Primary/secondary CTA hexes (#2563EB / #1D4ED8) are the REVIEWS_HUB.md §3

   values, scoped to the hub so no global button drift is introduced.

   ========================================================================== */

.jkda-rh-head {

    padding: var(--jkda-sp-6) 0;

}



/* §3 — Reviews Hero (dark ink luxury) */

.jkda-rh-hero {

    background: var(--jkda-ink);

    color: #fff;

    padding: var(--jkda-sp-16) 0 var(--jkda-sp-12);

}



.jkda-rh-hero__eyebrow {

    display: inline-block;

    padding: 6px 14px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.14);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.01em;

}



.jkda-rh-hero__title {

    margin: var(--jkda-sp-4) 0 var(--jkda-sp-3);

    font-family: var(--jkda-ff-display);

    font-size: clamp(28px, 4vw, 44px);

    line-height: 1.15;

    font-weight: 800;

}



.jkda-rh-hero__sub {

    max-width: 680px;

    color: #9CA3AF;

    font-size: 16px;

    line-height: 1.7;

}



/* §2.2 — Live metric counter grid */

.jkda-rh-metrics {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: var(--jkda-sp-4);

    margin-top: var(--jkda-sp-8);

}



.jkda-rh-metric {

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: var(--jkda-radius2);

    padding: var(--jkda-sp-5);

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.jkda-rh-metric__value {

    font-family: var(--jkda-ff-display);

    font-size: 30px;

    font-weight: 800;

    line-height: 1;

    color: #fff;

}



.jkda-rh-metric__star {

    color: #F59E0B;

}



.jkda-rh-metric__label {

    font-size: 13px;

    color: #9CA3AF;

    font-weight: 600;

}



.jkda-rh-metric__sub {

    font-size: 12px;

    color: #6B7280;

    margin-top: 2px;

}



.jkda-rh-metric--cta {

    justify-content: center;

    align-items: flex-start;

}



/* §2.3 — Interactive toolbar & filter system */

.jkda-rh-toolbar {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    gap: var(--jkda-sp-4);

    justify-content: space-between;

    margin-bottom: var(--jkda-sp-5);

}



.jkda-rh-toolbar__search {

    flex: 1 1 280px;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.jkda-rh-toolbar__label {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--jkda-ink3);

}



.jkda-rh-search {

    width: 100%;

    padding: 12px 16px;

    border: 1px solid var(--jkda-border2);

    border-radius: var(--jkda-radius);

    font-family: var(--jkda-ff-sans);

    font-size: 14px;

    color: var(--jkda-ink);

    background: #fff;

}



.jkda-rh-pills {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.jkda-rh-pill {

    padding: 8px 16px;

    border-radius: 999px;

    border: 1px solid var(--jkda-border2);

    background: #fff;

    color: var(--jkda-ink2);

    font-family: var(--jkda-ff-sans);

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: background var(--jkda-duration) var(--jkda-ease), color var(--jkda-duration) var(--jkda-ease), border-color var(--jkda-duration) var(--jkda-ease);

}



.jkda-rh-pill:hover {

    border-color: var(--jkda-ink3);

}



.jkda-rh-pill.is-active {

    background: var(--jkda-ink);

    border-color: var(--jkda-ink);

    color: #fff;

}



.jkda-rh-count {

    font-size: 13px;

    color: var(--jkda-ink3);

    font-weight: 600;

    margin: 0 0 var(--jkda-sp-5);

}



/* §2.4 — Dynamic product reviews grid */

.jkda-rh-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}



.jkda-rh-card {

    display: flex;

    flex-direction: column;

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius3);

    box-shadow: var(--jkda-shadow-sm);

    overflow: hidden;

    transition: transform var(--jkda-duration) var(--jkda-ease), box-shadow var(--jkda-duration) var(--jkda-ease);

}



.jkda-rh-card:hover {

    transform: translateY(-2px);

    box-shadow: var(--jkda-shadow-hover);

}



.jkda-rh-card__cover {

    position: relative;

    display: block;

    aspect-ratio: var(--jkda-cover-ratio);

    background: var(--jkda-paper3);

    overflow: hidden;

}



.jkda-rh-card__cover img {

    width: 100%;

    height: 100%;

    object-fit: contain !important;

    background: #FFFFFF !important;

    display: block;

    image-rendering: -webkit-optimize-contrast;

}



.jkda-rh-card__cover-ph {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--jkda-ink4);

    font-size: 12px;

    text-align: center;

}



.jkda-rh-card__series {

    position: absolute;

    top: 10px;

    left: 10px;

    padding: 4px 10px;

    border-radius: 999px;

    background: var(--jkda-ink);

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.04em;

}



.jkda-rh-card__body {

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: var(--jkda-sp-5);

    flex: 1 1 auto;

}



.jkda-rh-card__title {

    font-family: var(--jkda-ff-display);

    font-size: 16px;

    font-weight: 700;

    line-height: 1.3;

    margin: 0;

}



.jkda-rh-card__title a {

    color: var(--jkda-ink);

    text-decoration: none;

}



.jkda-rh-card__title a:hover {

    text-decoration: underline;

}



.jkda-rh-card__sku {

    font-size: 11px;

    color: var(--jkda-ink4);

    letter-spacing: 0.02em;

}



.jkda-rh-card__rating {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap;

}



.jkda-rh-stars {

    letter-spacing: 1px;

    color: var(--jkda-border2);

    font-size: 15px;

}



.jkda-rh-stars .is-on {

    color: #F59E0B;

}



.jkda-rh-card__score {

    font-size: 13px;

    font-weight: 700;

    color: var(--jkda-ink);

}



.jkda-rh-card__rc {

    font-size: 12px;

    color: var(--jkda-ink3);

}



.jkda-rh-card__actions {

    display: flex;

    gap: 10px;

    margin-top: auto;

    padding-top: var(--jkda-sp-3);

}



.jkda-rh-card__actions .jkda-btn-primary,

.jkda-rh-card__actions .jkda-btn-secondary {

    flex: 1 1 auto;

    text-align: center;

    padding: 10px 14px;

    border-radius: var(--jkda-radius);

    font-family: var(--jkda-ff-sans);

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    transition: background var(--jkda-duration) var(--jkda-ease), border-color var(--jkda-duration) var(--jkda-ease);

}



.jkda-rh-card__actions .jkda-btn-primary {

    background: #2563EB;

    color: #fff;

    border: 1px solid #2563EB;

}



.jkda-rh-card__actions .jkda-btn-primary:hover {

    background: #1D4ED8;

    border-color: #1D4ED8;

}



.jkda-rh-card__actions .jkda-btn-secondary {

    background: #fff;

    color: #374151;

    border: 1px solid #D1D5DB;

}



.jkda-rh-card__actions .jkda-btn-secondary:hover {

    border-color: var(--jkda-ink3);

}



/* Sample review badge (REVIEWS_HUB.md §3) — teal/emerald, never a verified badge */

.jkda-rh-sample-badge {

    display: inline-block;

    padding: 3px 10px;

    border-radius: 999px;

    background: #ECFDF5;

    border: 1px solid #A7F3D0;

    color: #065F46;

    font-size: 11px;

    font-weight: 700;

}



/* Empty-state / no-results */

.jkda-rh-empty,

.jkda-rh-noresults {

    grid-column: 1 / -1;

    text-align: center;

    color: var(--jkda-ink3);

    padding: var(--jkda-sp-10) var(--jkda-sp-5);

}



.jkda-rh-empty .jkda-button {

    margin-top: var(--jkda-sp-4);

}



/* §2.5 — Inactive fallback state */

.jkda-rh-inactive {

    max-width: 560px;

    margin: 0 auto;

    text-align: center;

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius3);

    box-shadow: var(--jkda-shadow-sm);

    padding: var(--jkda-sp-12) var(--jkda-sp-6);

}



.jkda-rh-inactive__icon {

    font-size: 40px;

    line-height: 1;

}



.jkda-rh-inactive__title {

    font-family: var(--jkda-ff-display);

    font-size: 24px;

    font-weight: 800;

    margin: var(--jkda-sp-4) 0 var(--jkda-sp-3);

    color: var(--jkda-ink);

}



.jkda-rh-inactive__msg {

    color: var(--jkda-ink3);

    line-height: 1.7;

    margin: 0 0 var(--jkda-sp-5);

}



/* §4 — Responsive behavior */

@media (max-width: 1024px) {

    .jkda-rh-metrics {

        grid-template-columns: repeat(2, 1fr);

    }



    .jkda-rh-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 767px) {

    .jkda-rh-grid {

        grid-template-columns: 1fr;

    }



    .jkda-rh-toolbar {

        flex-direction: column;

        align-items: stretch;

    }



    .jkda-rh-pills {

        flex-wrap: nowrap;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        padding-bottom: 4px;

    }



    .jkda-rh-pill {

        flex: 0 0 auto;

        white-space: nowrap;

    }



    .jkda-rh-card__actions {

        flex-direction: column;

    }

}



/* ==========================================================================

   VIDEO HUB (VIDEO_HUB.md §2–§4) — builds on the locked tokens/components.

   Reuses .jkda-page-header, .jkda-breadcrumb, .jkda-section, .jkda-container,

   .jkda-button(+--outline). Defines ONLY new .jkda-video-hub-* / .jkda-video-*

   scaffold; redefines no token or base component. All colours/space/radius via

   --jkda-* tokens where one exists; the documented dark-ink hero + accent blue

   (#2563eb) / saffron (#f59e0b) are spec-literal values (VIDEO_HUB.md §3).

   ========================================================================== */



/* §2.2 — Hero (dark ink luxury background) */

.jkda-video-hub-hero {

    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    color: #fff;

    padding: var(--jkda-sp-20) 0;

    text-align: center;

}



.jkda-video-hub-hero__eyebrow {

    display: inline-block;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.04em;

    color: #f59e0b;

    background: rgba(245, 158, 11, 0.12);

    border: 1px solid rgba(245, 158, 11, 0.3);

    border-radius: 999px;

    padding: 6px 16px;

    margin-bottom: var(--jkda-sp-5);

}



.jkda-video-hub-hero__title {

    font-family: var(--jkda-ff-display);

    font-size: clamp(28px, 4vw, 44px);

    line-height: 1.15;

    margin: 0 0 var(--jkda-sp-4);

    color: #fff;

}



.jkda-video-hub-hero__sub {

    max-width: 680px;

    margin: 0 auto;

    color: #cbd5e1;

    font-size: 16px;

    line-height: 1.7;

}



/* §2.3 — Interactive showcase grid (desktop: player 65% / playlist 35%) */

.jkda-video-hub-layout {

    display: grid;

    grid-template-columns: 65fr 35fr;

    gap: var(--jkda-sp-8);

    align-items: start;

}



/* §2.3 — Featured 16:9 responsive player container (letterbox black) */

.jkda-video-player-container {

    position: relative;

    width: 100%;

    padding-top: 56.25%;

    background: #000;

    border-radius: var(--jkda-radius2);

    overflow: hidden;

    box-shadow: var(--jkda-shadow);

}



.jkda-video-player-container.is-loading::after {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.4);

    pointer-events: none;

}



.jkda-video-player {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: 0;

}



/* §2.3 — Metadata & controls panel */

.jkda-video-meta {

    background: #fff;

    border: 1px solid #e2e8f0;

    border-radius: var(--jkda-radius2);

    padding: var(--jkda-sp-6);

    margin-top: var(--jkda-sp-5);

}



.jkda-video-meta__series {

    display: inline-block;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: #2563eb;

    margin-bottom: var(--jkda-sp-2);

}



.jkda-video-meta__title {

    font-family: var(--jkda-ff-display);

    font-size: 22px;

    line-height: 1.3;

    color: #1e293b;

    margin: 0 0 var(--jkda-sp-3);

}



.jkda-video-meta__desc {

    color: #64748b;

    line-height: 1.7;

    margin: 0 0 var(--jkda-sp-5);

}



.jkda-video-meta__controls {

    display: flex;

    flex-wrap: wrap;

    gap: var(--jkda-sp-3);

}



.jkda-video-meta__controls .jkda-button {

    min-height: 44px;

}



/* §2.3 — Numbered interactive playlist */

.jkda-video-playlist {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-3);

    max-height: 640px;

    overflow-y: auto;

}



.jkda-video-playlist-item {

    display: flex;

    gap: var(--jkda-sp-4);

    padding: var(--jkda-sp-4);

    background: #fff;

    border: 1px solid #e2e8f0;

    border-left: 3px solid transparent;

    border-radius: var(--jkda-radius2);

    cursor: pointer;

    transition: border-color var(--jkda-duration) var(--jkda-ease),

        background var(--jkda-duration) var(--jkda-ease),

        box-shadow var(--jkda-duration) var(--jkda-ease);

}



.jkda-video-playlist-item:hover,

.jkda-video-playlist-item:focus-visible {

    box-shadow: var(--jkda-shadow-sm);

    border-color: #cbd5e1;

    outline: none;

}



.jkda-video-playlist-item.is-active {

    border-color: var(--jkda-primary, #2563eb);

    border-left-color: var(--jkda-primary, #2563eb);

    background: rgba(37, 99, 235, 0.06);

}



.jkda-video-playlist-item__index {

    flex: 0 0 auto;

    font-family: var(--jkda-ff-display);

    font-size: 18px;

    font-weight: 700;

    color: var(--jkda-primary, #2563eb);

    line-height: 1.2;

}



.jkda-video-playlist-item__body {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.jkda-video-playlist-item__title {

    font-weight: 600;

    color: #1e293b;

    line-height: 1.4;

}



.jkda-video-playlist-item__tag {

    font-size: 12px;

    font-weight: 600;

    color: #f59e0b;

}



.jkda-video-playlist-item__overview {

    font-size: 13px;

    color: #64748b;

    line-height: 1.6;

}



/* §2.5 — Empty state */

.jkda-video-hub-empty {

    text-align: center;

    max-width: 560px;

    margin: 0 auto;

    padding: var(--jkda-sp-12) var(--jkda-sp-6);

}



.jkda-video-hub-empty .jkda-button {

    margin-top: var(--jkda-sp-4);

}



/* §2.5 — Inactive fallback state */

.jkda-video-hub-inactive {

    text-align: center;

    max-width: 560px;

    margin: 0 auto;

    padding: var(--jkda-sp-12) var(--jkda-sp-6);

    background: #fff;

    border: 1px solid #e2e8f0;

    border-radius: var(--jkda-radius2);

}



.jkda-video-hub-inactive__icon {

    font-size: 40px;

    line-height: 1;

}



.jkda-video-hub-inactive__title {

    font-family: var(--jkda-ff-display);

    font-size: 24px;

    color: #1e293b;

    margin: var(--jkda-sp-4) 0 var(--jkda-sp-3);

}



.jkda-video-hub-inactive__msg {

    color: var(--jkda-ink3);

    line-height: 1.7;

    margin: 0 0 var(--jkda-sp-6);

}



/* §4 — Responsive behaviour */

@media (max-width: 1024px) {

    .jkda-video-hub-layout {

        grid-template-columns: 1fr;

    }



    .jkda-video-playlist {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        max-height: none;

        overflow: visible;

    }

}



@media (max-width: 767px) {

    .jkda-video-hub-hero {

        padding: var(--jkda-sp-16) 0;

    }



    .jkda-video-playlist {

        grid-template-columns: 1fr;

    }



    .jkda-video-meta__controls {

        flex-direction: column;

    }



    .jkda-video-meta__controls .jkda-button {

        width: 100%;

    }



    .jkda-video-playlist-item {

        min-height: 44px;

    }

}



/* ==========================================================================

   GLOBAL SEARCH (SEARCH.md §5/§8/§9) — results page scaffold. Builds on the

   locked tokens/components. Reuses .jkda-page-header, .jkda-breadcrumb,

   .jkda-section*, .jkda-container, .jkda-book-card, .jkda-premium-card,

   .jkda-bundle-card, .jkda-blog-card, .jkda-blog-grid, .jkda-pagination,

   .jkda-badge*, .jkda-button*, .jkda-pill-cta. Defines ONLY new .jkda-search-*

   classes; redefines no token or base component. All colours/space/radius via

   --jkda-* tokens.

   ========================================================================== */



/* On-page search form in the hero (SEARCH.md §3). */

.jkda-search-form {

    margin-top: var(--jkda-sp-5);

    max-width: 640px;

}



.jkda-search-form .search-form {

    display: flex;

    gap: var(--jkda-sp-2);

    flex-wrap: wrap;

}



.jkda-search-form .search-form label {

    flex: 1 1 220px;

    min-width: 0;

}



.jkda-search-form .search-field {

    width: 100%;

    padding: 12px 16px;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    background: #fff;

    color: var(--jkda-ink);

    font-size: 1rem;

    min-height: 44px;

}



.jkda-search-form .search-field:focus-visible {

    outline: 2px solid var(--jkda-saffron);

    outline-offset: 2px;

}



.jkda-search-form .search-submit {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding: 0 20px;

    border: none;

    border-radius: var(--jkda-radius2);

    background: var(--jkda-saffron);

    color: #fff;

    font-weight: 600;

    cursor: pointer;

}



.jkda-search-form .search-submit:hover,

.jkda-search-form .search-submit:focus-visible {

    background: var(--jkda-saffron-dark, var(--jkda-saffron));

}



/* Dedicated searchbox component */

.jkda-search-box-form {

    width: 100%;

}



.jkda-search-box-inner {

    display: flex;

    align-items: center;

    background: #fff;

    border: 1.5px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    padding: 6px 8px 6px 16px;

    box-shadow: var(--jkda-shadow-sm);

    transition: all var(--jkda-duration) var(--jkda-ease);

}



.jkda-search-box-inner:focus-within {

    border-color: var(--jkda-saffron);

    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);

}



.jkda-search-box-icon {

    color: var(--jkda-ink3);

    margin-right: 12px;

    flex-shrink: 0;

}



.jkda-search-box-input {

    flex: 1;

    border: none !important;

    outline: none !important;

    background: transparent !important;

    font-family: var(--jkda-ff-sans);

    font-size: 15px;

    color: var(--jkda-ink);

    padding: 8px 0;

}



.jkda-search-box-submit {

    flex-shrink: 0;

}



.jkda-search-form__hint {



    margin: var(--jkda-sp-2) 0 0;

    font-size: 0.85rem;

    color: #CBD5E1;

}



/* State blocks: empty/too-short, no-results, error (SEARCH.md §8). */

.jkda-search-state {

    text-align: center;

    padding: var(--jkda-sp-8) var(--jkda-sp-4);

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

}



.jkda-search-state .jkda-body {

    margin: var(--jkda-sp-3) auto var(--jkda-sp-5);

    max-width: 46ch;

}



/* Grouped result sections (SEARCH.md §5). */

.jkda-search-group {

    margin-bottom: var(--jkda-sp-10);

}



.jkda-search-group:last-child {

    margin-bottom: 0;

}



.jkda-search-group__header {

    display: flex;

    align-items: baseline;

    gap: var(--jkda-sp-3);

    margin-bottom: var(--jkda-sp-5);

    padding-bottom: var(--jkda-sp-3);

    border-bottom: 1px solid var(--jkda-border);

}



.jkda-search-count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 28px;

    padding: 2px 10px;

    border-radius: 999px;

    background: var(--jkda-saffron-light);

    color: var(--jkda-saffron);

    font-size: 0.85rem;

    font-weight: 700;

}



/* Per-type result grid (products/bundles/series). Blog reuses .jkda-blog-grid. */

.jkda-search-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: var(--jkda-sp-5);

}



/* Series result card (SEARCH.md §5). */

.jkda-search-series-card {

    display: flex;

    flex-direction: column;

    gap: var(--jkda-sp-3);

    padding: var(--jkda-sp-6);

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

}



.jkda-search-series-card .jkda-badge--saffron {

    align-self: flex-start;

}



.jkda-search-series-card__title {

    margin: 0;

}



.jkda-search-series-card__desc {

    margin: 0;

    color: var(--jkda-ink-soft, #475569);

}



.jkda-search-series-card .jkda-pill-cta {

    margin-top: auto;

    align-self: flex-start;

}



/* Categories & Tags list (SEARCH.md §5). */

.jkda-search-terms {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--jkda-sp-3);

}



.jkda-search-term__link {

    display: flex;

    align-items: center;

    gap: var(--jkda-sp-3);

    padding: 14px 18px;

    min-height: 44px;

    background: #fff;

    border: 1px solid var(--jkda-border);

    border-radius: var(--jkda-radius2);

    color: var(--jkda-ink);

    text-decoration: none;

}



.jkda-search-term__link:hover,

.jkda-search-term__link:focus-visible {

    border-color: var(--jkda-saffron);

    background: var(--jkda-saffron-light);

}



.jkda-search-term__name {

    font-weight: 600;

}



.jkda-search-term__count {

    font-size: 0.85rem;

    color: var(--jkda-ink-soft, #475569);

}



.jkda-search-term__cta {

    margin-left: auto;

    font-weight: 700;

    color: var(--jkda-saffron);

}



.jkda-search-viewall {

    margin-top: var(--jkda-sp-5);

}



/* Responsive (SEARCH.md §9) — existing 860 / 540 breakpoints. */

@media (max-width: 860px) {

    .jkda-search-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 540px) {

    .jkda-search-grid,

    .jkda-search-terms {

        grid-template-columns: 1fr;

    }



    .jkda-search-term__link {

        flex-wrap: wrap;

    }

}



@media (pointer: coarse) {

    .jkda-search-form .search-field,

    .jkda-search-form .search-submit,

    .jkda-search-term__link {

        min-height: 48px;

    }

}



@media (prefers-reduced-motion: reduce) {

    .jkda-search-series-card,

    .jkda-search-term__link {

        transition: none;

    }

}



/* ==========================================================================

   LEGAL / CONTENT PAGES (LEGAL_PAGES.md §2–§3) — route via page-legal.php,

   class prefix .jkda-page-*. Covers the 8 legal pages + About / Contact / FAQ.

   Reuses the locked .jkda-container and .jkda-breadcrumb. Defines ONLY new

   .jkda-page-hero / .jkda-page-container prose rules; redefines no token and no

   existing selector. All colours/space/type via --jkda-* tokens. The legal

   prose metrics (16px/1.7, H2 22px, H3 18px) are scoped under

   .jkda-page-container per spec and deliberately NOT applied to global

   .jkda-prose, so that component is not mutated.

   ========================================================================== */



/* Hero — paper background, bottom border (LEGAL_PAGES.md §2). */

.jkda-page-hero {

    background: var(--jkda-paper);

    border-bottom: 1px solid var(--jkda-border);

    padding: var(--jkda-sp-12) 0 var(--jkda-sp-8);

}



.jkda-page-hero__title {

    font-family: var(--jkda-ff-display);

    font-size: clamp(28px, 4vw, 40px);

    font-weight: 600;

    color: var(--jkda-ink);

    margin: var(--jkda-sp-3) 0 0;

}



/* Breadcrumb legibility on the light hero (reuses existing ink tokens — the

   base .jkda-breadcrumb colours target the dark .jkda-page-header). */

.jkda-page-hero .jkda-breadcrumb a {

    color: var(--jkda-ink3);

}



.jkda-page-hero .jkda-breadcrumb a:hover,

.jkda-page-hero .jkda-breadcrumb a:focus-visible {

    color: var(--jkda-saffron);

}



.jkda-page-hero .jkda-breadcrumb__sep {

    color: var(--jkda-ink4);

}



.jkda-page-hero .jkda-breadcrumb__current {

    color: var(--jkda-ink);

}



/* Prose container — 820px, centered (LEGAL_PAGES.md §2). */

.jkda-page-container {

    max-width: 820px;

    margin: 0 auto;

    padding: var(--jkda-sp-8) 24px var(--jkda-sp-16);

    font-size: 16px;

    line-height: 1.7;

    color: var(--jkda-ink2);

}



.jkda-page-container p {

    margin: 0 0 16px;

}



.jkda-page-container h2 {

    font-size: 22px;

    font-weight: 600;

    margin: 32px 0 12px;

    color: var(--jkda-ink);

}



.jkda-page-container h3 {

    font-size: 18px;

    font-weight: 600;

    margin: 24px 0 8px;

    color: var(--jkda-ink);

}



.jkda-page-container ul,

.jkda-page-container ol {

    margin: 0 0 16px;

    padding-left: 24px;

}



.jkda-page-container li {

    margin: 0 0 8px;

}



.jkda-page-container a {

    color: var(--jkda-saffron);

}



/* Tables — scrollable, touch-friendly (LEGAL_PAGES.md §2). */

.jkda-page-container table {

    display: block;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    width: 100%;

    margin: 0 0 16px;

    border-collapse: collapse;

    background: #fff;

    border: 1px solid var(--jkda-border);

}



.jkda-page-container th,

.jkda-page-container td {

    padding: 10px 14px;

    text-align: left;

    vertical-align: top;

    border: 1px solid var(--jkda-border);

}



.jkda-page-container th {

    font-weight: 600;

    color: var(--jkda-ink);

    background: var(--jkda-paper2);

}



/* Metadata Badge */

.jkda-legal-meta {

    margin-bottom: var(--jkda-sp-6);

}



.jkda-legal-badge {

    display: inline-block;

    padding: 4px 12px;

    background: var(--jkda-paper2);

    border: 1px solid var(--jkda-border);

    border-radius: 999px;

    font-size: 12.5px;

    font-weight: 600;

    color: var(--jkda-ink2);

}



/* Contact Quick Cards Strip */

.jkda-contact-quick-strip {

    background: #fff;

    border-bottom: 1px solid var(--jkda-border);

    padding: var(--jkda-sp-6) 0;

}



.jkda-contact-cards-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--jkda-sp-4);

}



.jkda-contact-card {

    background: var(--jkda-paper);

    border: 1.5px solid var(--jkda-border);

    border-radius: 12px;

    padding: var(--jkda-sp-4);

    display: flex;

    gap: var(--jkda-sp-3);

    align-items: flex-start;

    transition: all var(--jkda-duration) var(--jkda-ease);

}



.jkda-contact-card:hover {

    border-color: var(--jkda-teal);

    background: #fff;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

}



.jkda-contact-card__icon {

    width: 38px;

    height: 38px;

    border-radius: 8px;

    background: var(--jkda-teal-light);

    color: var(--jkda-teal);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.jkda-contact-card__info {

    min-width: 0;

    display: flex;

    flex-direction: column;

}



.jkda-contact-card__label {

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--jkda-ink3);

    margin-bottom: 2px;

}



.jkda-contact-card__link {

    font-size: 14px;

    font-weight: 700;

    color: var(--jkda-teal) !important;

    text-decoration: none !important;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.jkda-contact-card__link:hover {

    text-decoration: underline !important;

}



.jkda-contact-card__text {

    font-size: 14px;

    font-weight: 700;

    color: var(--jkda-ink);

}



.jkda-contact-card__sub {

    font-size: 11.5px;

    color: var(--jkda-ink3);

    margin-top: 2px;

}



/* Mobile (≤768px) & Tablet */

@media (max-width: 768px) {

    .jkda-page-container {

        padding: var(--jkda-sp-6) 20px var(--jkda-sp-12);

    }



    .jkda-contact-cards-grid {

        grid-template-columns: 1fr;

        gap: var(--jkda-sp-3);

    }

}



/* ============================================================

   BLOG ARTICLE UPSELL & DYNAMIC TOC ENHANCEMENTS (D-149)

   ============================================================ */

.jkda-toc-link,

.jkda-toc-link {

    display: block;

    color: var(--jkda-ink2, #3a3f4b);

    text-decoration: none;

    font-size: 13.5px;

    padding: 5px 8px;

    border-radius: 4px;

    transition: all 0.2s ease;

    border-left: 2px solid transparent;

}

.jkda-toc-link:hover,

.jkda-toc-link:hover {

    color: var(--jkda-saffron, #F59E0B);

    background: rgba(245, 158, 11, 0.06);

}

.jkda-toc-link.is-active,

.jkda-toc-link.is-active {

    color: var(--jkda-saffron, #F59E0B) !important;

    font-weight: 700;

    border-left-color: var(--jkda-saffron, #F59E0B);

    background: rgba(245, 158, 11, 0.08);

    padding-left: 10px;

}



/* Sidebar Upsell Widget Card */

.jkda-sidebar-upsell-card,

.jkda-sidebar-upsell-card {

    position: relative;

    background: #ffffff;

    border: 2px solid var(--jkda-saffron, #F59E0B);

    border-radius: 12px;

    padding: 16px 18px 18px;

    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.1);

    overflow: hidden;

}

.jkda-sidebar-upsell-ribbon,

.jkda-sidebar-upsell-ribbon {

    position: static;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    background: linear-gradient(135deg, var(--jkda-saffron, #F59E0B), #E04F00);

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.08em;

    padding: 8px 14px;

    margin: -16px -18px 14px -18px;

    text-transform: uppercase;

    text-align: center;

    transform: none;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

}

.jkda-sidebar-upsell-header,

.jkda-sidebar-upsell-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    margin-bottom: 10px;

    flex-wrap: wrap;

}

.jkda-upsell-sku,

.jkda-upsell-sku {

    font-family: monospace;

    font-size: 11px;

    color: var(--jkda-ink3, #6b7280);

    font-weight: 700;

}

.jkda-sidebar-upsell-title,

.jkda-sidebar-upsell-title {

    font-size: 16px;

    font-weight: 800;

    line-height: 1.3;

    color: var(--jkda-ink, #111827);

    margin: 0 0 8px 0;

}

.jkda-sidebar-upsell-tools,

.jkda-sidebar-upsell-tools {

    font-size: 12px;

    color: var(--jkda-ink2, #3a3f4b);

    margin: 0 0 10px 0;

    line-height: 1.4;

}

.jkda-sidebar-upsell-perks,

.jkda-sidebar-upsell-perks {

    display: flex;

    flex-direction: column;

    gap: 4px;

    font-size: 11.5px;

    color: var(--jkda-teal, #0D9488);

    font-weight: 600;

    margin-bottom: 12px;

}

.jkda-sidebar-upsell-pricing,

.jkda-sidebar-upsell-pricing {

    display: flex;

    align-items: baseline;

    gap: 8px;

    margin-bottom: 12px;

}

.jkda-upsell-price-original,

.jkda-upsell-price-original {

    font-size: 13px;

    text-decoration: line-through;

    color: var(--jkda-ink4, #9ca3af);

}

.jkda-upsell-price-sale,

.jkda-upsell-price-sale {

    font-size: 20px;

    font-weight: 800;

    color: var(--jkda-saffron, #F59E0B);

}

.jkda-button--full,

.jkda-button--full {

    display: block;

    width: 100%;

    text-align: center;

    box-sizing: border-box;

    font-weight: 700;

    padding: 11px 14px;

}

.jkda-sidebar-bundle-callout,

.jkda-sidebar-bundle-callout {

    margin-top: 12px;

    padding-top: 10px;

    border-top: 1px dashed var(--jkda-border, #ddd9cf);

    font-size: 12px;

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.jkda-sidebar-bundle-callout span,

.jkda-sidebar-bundle-callout span {

    color: var(--jkda-ink3, #6b7280);

    font-size: 11px;

}

.jkda-bundle-fast-link,

.jkda-bundle-fast-link {

    color: var(--jkda-teal, #0D9488);

    font-weight: 700;

    text-decoration: none;

}

.jkda-bundle-fast-link:hover,

.jkda-bundle-fast-link:hover {

    text-decoration: underline;

}

.jkda-safety-notice-mini,

.jkda-safety-notice-mini {

    margin-top: 10px;

    font-size: 11px;

    color: var(--jkda-ink3, #6b7280);

    background: #f8fafc;

    border-radius: 6px;

    padding: 6px 8px;

    line-height: 1.35;

}



/* ============================================================

   RESOURCES HERO 2-COLUMN LAYOUT WITH SHOWCASE IMAGE (D-150)

   ============================================================ */

.jkda-resources-hero-layout,

.jkda-resources-hero-layout {

	display: grid;

	grid-template-columns: 1.1fr 0.9fr;

	align-items: center;

	gap: 40px;

	padding: 8px 0;

}



.jkda-resources-hero-content,

.jkda-resources-hero-content {

	min-width: 0;

}



.jkda-resources-hero-actions,

.jkda-resources-hero-actions {

	display: flex;

	align-items: center;

	gap: 14px;

	margin-top: 24px;

	flex-wrap: wrap;

}



.jkda-resources-hero-actions .jkda-button,

.jkda-resources-hero-actions .jkda-button {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	padding: 12px 24px;

	font-family: var(--jkda-ff-display, 'Outfit', sans-serif);

	font-size: 14px;

	font-weight: 700;

	border-radius: 8px;

	text-decoration: none;

	cursor: pointer;

	transition: all 0.2s ease;

	line-height: 1.3;

	background: var(--jkda-saffron, #f5600a);

	color: #ffffff !important;

	border: 1.5px solid var(--jkda-saffron, #f5600a);

	box-shadow: 0 4px 14px rgba(245, 96, 10, 0.35);

}



.jkda-resources-hero-actions .jkda-button:hover,

.jkda-resources-hero-actions .jkda-button:hover {

	background: #ea580c;

	border-color: #ea580c;

	color: #ffffff !important;

	transform: translateY(-1px);

	box-shadow: 0 6px 18px rgba(245, 96, 10, 0.45);

}



.jkda-resources-hero-actions .jkda-button--outline,

.jkda-resources-hero-actions .jkda-button--outline,

.jkda-resources-hero-actions .jkda-button--outline-white,

.jkda-resources-hero-actions .jkda-button--outline-white,

.jkda-page-header .jkda-button--outline,

.jkda-page-header .jkda-button--outline {

	background: transparent;

	border: 1.5px solid rgba(255, 255, 255, 0.4);

	color: #ffffff !important;

}



.jkda-resources-hero-actions .jkda-button--outline:hover,

.jkda-resources-hero-actions .jkda-button--outline:focus-visible,

.jkda-resources-hero-actions .jkda-button--outline:hover,

.jkda-resources-hero-actions .jkda-button--outline:focus-visible,

.jkda-resources-hero-actions .jkda-button--outline-white:hover,

.jkda-resources-hero-actions .jkda-button--outline-white:focus-visible,

.jkda-resources-hero-actions .jkda-button--outline-white:hover,

.jkda-resources-hero-actions .jkda-button--outline-white:focus-visible,

.jkda-page-header .jkda-button--outline:hover,

.jkda-page-header .jkda-button--outline:focus-visible,

.jkda-page-header .jkda-button--outline:hover,

.jkda-page-header .jkda-button--outline:focus-visible {

	border-color: #ffffff;

	color: #ffffff !important;

	background: rgba(255, 255, 255, 0.12);

}



.jkda-resources-hero-visual,

.jkda-resources-hero-visual {

	display: flex;

	justify-content: center;

	align-items: center;

	position: relative;

}



.jkda-resources-hero-image-wrap,

.jkda-resources-hero-image-wrap {

	width: 100%;

	max-width: 560px;

	position: relative;

	border-radius: 14px;

	overflow: hidden;

	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.12);

	transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.jkda-resources-hero-image-wrap:hover,

.jkda-resources-hero-image-wrap:hover {

	transform: translateY(-2px);

	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 96, 10, 0.35);

}



.jkda-resources-hero-img,

.jkda-resources-hero-img {

	width: 100%;

	height: auto;

	display: block;

	object-fit: cover;

	aspect-ratio: 16 / 9;

}



@media (max-width: 960px) {

	.jkda-resources-hero-layout,

	.jkda-resources-hero-layout {

		grid-template-columns: 1fr;

		gap: 28px;

	}

	.jkda-resources-hero-image-wrap,

	.jkda-resources-hero-image-wrap {

		max-width: 100%;

	}

}



/* In-Article Upsell Banner (D-149 — High-Contrast Dark Theme) */

.jkda-article-upsell,

.jkda-article-upsell {

    margin: 40px 0 !important;

    clear: both;

}

.jkda-article-upsell-wrapper,

.jkda-article-upsell-wrapper {

    background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%) !important;

    color: #f8fafc !important;

    border-radius: 14px !important;

    padding: 28px 24px !important;

    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.25) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

}

.jkda-article-upsell-head,

.jkda-article-upsell-head {

    margin-bottom: 22px !important;

}

.jkda-article-upsell-heading,

.jkda-article-upsell-heading,

.jkda-prose .jkda-article-upsell-wrapper h3,

.jkda-prose .jkda-article-upsell-wrapper h3 {

    font-size: clamp(20px, 3.5vw, 24px) !important;

    font-weight: 800 !important;

    color: #ffffff !important;

    margin: 10px 0 6px 0 !important;

    line-height: 1.3 !important;

}

.jkda-article-upsell-sub,

.jkda-article-upsell-sub,

.jkda-prose .jkda-article-upsell-head p,

.jkda-prose .jkda-article-upsell-head p {

    font-size: 14.5px !important;

    color: #cbd5e1 !important;

    margin: 0 !important;

    line-height: 1.55 !important;

}

.jkda-article-upsell-grid,

.jkda-article-upsell-grid {

    display: grid !important;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;

    gap: 18px !important;

    margin-bottom: 18px !important;

}

.jkda-article-upsell-item,

.jkda-article-upsell-item {

    background: rgba(255, 255, 255, 0.06) !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;

    border-radius: 10px !important;

    padding: 18px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

}

.jkda-article-upsell-item--bundle,

.jkda-article-upsell-item--bundle {

    background: rgba(245, 158, 11, 0.1) !important;

    border: 1px solid rgba(245, 158, 11, 0.45) !important;

}



/* Item Badges */

.jkda-upsell-item-badge,

.jkda-upsell-item-badge {

    display: inline-block !important;

    align-self: flex-start !important;

    font-size: 11px !important;

    font-weight: 800 !important;

    letter-spacing: 0.05em !important;

    padding: 3px 8px !important;

    border-radius: 4px !important;

    margin-bottom: 10px !important;

    font-family: monospace !important;

    background: rgba(56, 189, 248, 0.18) !important;

    color: #38bdf8 !important;

    border: 1px solid rgba(56, 189, 248, 0.35) !important;

}

.jkda-article-upsell-item--bundle .jkda-upsell-item-badge,

.jkda-article-upsell-item--bundle .jkda-upsell-item-badge,

.jkda-article-upsell-wrapper .jkda-badge--gold,

.jkda-article-upsell-wrapper .jkda-badge--gold {

    background: rgba(245, 158, 11, 0.22) !important;

    color: #fbbf24 !important;

    border: 1px solid rgba(245, 158, 11, 0.5) !important;

    text-transform: uppercase !important;

}



/* Titles inside cards — STRICT OVERRIDE OF PROSE INK COLORS */

.jkda-prose .jkda-article-upsell-wrapper h4,

.jkda-prose .jkda-article-upsell-wrapper h4,

.jkda-upsell-item-title,

.jkda-upsell-item-title {

    font-size: 16px !important;

    font-weight: 700 !important;

    color: #ffffff !important;

    margin: 0 0 8px 0 !important;

    line-height: 1.35 !important;

    letter-spacing: normal !important;

}



/* Descriptions inside cards — STRICT OVERRIDE OF PROSE P COLORS */

.jkda-prose .jkda-article-upsell-wrapper p.jkda-upsell-item-desc,

.jkda-prose .jkda-article-upsell-wrapper p.jkda-upsell-item-desc,

.jkda-upsell-item-desc,

.jkda-upsell-item-desc {

    font-size: 13px !important;

    color: #e2e8f0 !important;

    line-height: 1.5 !important;

    margin: 0 0 14px 0 !important;

    flex-grow: 1 !important;

}



/* Price & Perks */

.jkda-upsell-item-meta,

.jkda-upsell-item-meta {

    display: flex !important;

    align-items: baseline !important;

    justify-content: space-between !important;

    margin-bottom: 14px !important;

    flex-wrap: wrap !important;

    gap: 6px !important;

}

.jkda-upsell-price,

.jkda-upsell-price {

    font-size: 19px !important;

    font-weight: 800 !important;

    color: #ffffff !important;

}

.jkda-article-upsell-wrapper .jkda-upsell-price-original,

.jkda-article-upsell-wrapper .jkda-upsell-price-original {

    font-size: 14px !important;

    color: #94a3b8 !important;

    text-decoration: line-through !important;

    margin-right: 8px !important;

}

.jkda-price-highlight,

.jkda-price-highlight {

    color: #fbbf24 !important;

}

.jkda-upsell-free-badge,

.jkda-upsell-free-badge {

    font-size: 11.5px !important;

    color: #34d399 !important;

    font-weight: 700 !important;

}



/* Buttons */

.jkda-article-upsell-item .jkda-button,

.jkda-article-upsell-item .jkda-button {

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    text-align: center !important;

    padding: 10px 16px !important;

    border-radius: 6px !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    background: #f5600a !important;

    color: #ffffff !important;

    border: none !important;

    transition: background 0.2s ease !important;

}

.jkda-article-upsell-item .jkda-button:hover,

.jkda-article-upsell-item .jkda-button:hover {

    background: #e04f00 !important;

    color: #ffffff !important;

}

.jkda-article-upsell-item--bundle .jkda-button--gold,

.jkda-article-upsell-item--bundle .jkda-button--gold {

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;

    color: #ffffff !important;

    border: none !important;

    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;

}

.jkda-article-upsell-item--bundle .jkda-button--gold:hover,

.jkda-article-upsell-item--bundle .jkda-button--gold:hover {

    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;

    color: #ffffff !important;

}



/* Advisory Strip — STRICT OVERRIDE OF PROSE STRONG */

.jkda-advisory-strip,

.jkda-advisory-strip {

    background: rgba(0, 0, 0, 0.35) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    border-left: 4px solid #f59e0b !important;

    padding: 12px 16px !important;

    border-radius: 6px !important;

    font-size: 12.5px !important;

    color: #e2e8f0 !important;

    line-height: 1.55 !important;

}

.jkda-prose .jkda-advisory-strip strong,

.jkda-prose .jkda-advisory-strip strong,

.jkda-advisory-strip strong,

.jkda-advisory-strip strong {

    color: #fbbf24 !important;

    font-weight: 700 !important;

}



/* ============================================================

   FEATURED PSS E-BOOKS SHOWCASE CONTAINER (D-151)

   ============================================================ */

.jkda-featured-books-section,

.jkda-featured-books-section {

	background: #ffffff;

	padding: 72px 0 80px;

	border-bottom: 1px solid var(--jkda-border, #e2e8f0);

}



.jkda-featured-books-grid,

.jkda-featured-books-grid {

	display: grid !important;

	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

	gap: 28px !important;

	max-width: 1100px !important;

	margin: 32px auto 0 !important;

	width: 100% !important;

}



.jkda-featured-book-card,

.jkda-featured-book-card,

.jkda-featured-books-section .jkda-book-card,

.jkda-featured-books-section .jkda-book-card {

	background: #ffffff !important;

	border: 1px solid var(--jkda-border, #e2e8f0) !important;

	border-radius: 12px !important;

	overflow: hidden !important;

	display: flex !important;

	flex-direction: column !important;

	max-width: 350px !important;

	width: 100% !important;

	margin: 0 auto !important;

	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

	position: relative !important;

	box-shadow: 0 4px 14px rgba(14, 26, 58, 0.06) !important;

}



.jkda-featured-book-card:hover,

.jkda-featured-book-card:hover,

.jkda-featured-books-section .jkda-book-card:hover,

.jkda-featured-books-section .jkda-book-card:hover {

	transform: translateY(-4px) !important;

	box-shadow: 0 16px 36px rgba(14, 26, 58, 0.12) !important;

	border-color: var(--jkda-saffron, #f5600a) !important;

}



/* Dedicated Cover Slot for WebP Product Syncing */

.jkda-featured-book__cover-slot,

.jkda-featured-book__cover-slot,

.jkda-featured-books-section .jkda-book-cover,

.jkda-featured-books-section .jkda-book-cover {

	position: relative !important;

	width: 100% !important;

	aspect-ratio: 400 / 550 !important;

	max-height: 480px !important;

	background: #ffffff !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	overflow: hidden !important;

	padding: 0 !important;

	margin: 0 !important;

}



.jkda-featured-book__img,

.jkda-featured-book__img,

.jkda-featured-books-section .jkda-book-cover img,

.jkda-featured-books-section .jkda-book-cover img,

.jkda-book-cover-img,

.jkda-book-cover-img {

	width: 100% !important;

	height: 100% !important;

	max-width: 100% !important;

	max-height: 100% !important;

	object-fit: contain !important;

	object-position: center !important;

	display: block !important;

	border-radius: 0 !important;

	box-shadow: none !important;

	margin: 0 !important;

	image-rendering: -webkit-optimize-contrast;

	transition: transform 0.3s ease;

}



.jkda-featured-book-card:hover .jkda-featured-book__img,

.jkda-featured-book-card:hover .jkda-featured-book__img,

.jkda-featured-books-section .jkda-book-card:hover img,

.jkda-featured-books-section .jkda-book-card:hover img {

	transform: scale(1.02);

}



.jkda-featured-book__badge,

.jkda-featured-book__badge {

	position: absolute;

	top: 14px;

	left: 14px;

	background: rgba(15, 23, 42, 0.88);

	color: #ffffff;

	backdrop-filter: blur(8px);

	-webkit-backdrop-filter: blur(8px);

	padding: 4px 10px;

	border-radius: 6px;

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 0.04em;

	border: 1px solid rgba(255, 255, 255, 0.2);

	z-index: 2;

}



.jkda-featured-book__sku,

.jkda-featured-book__sku {

	position: absolute;

	top: 14px;

	right: 14px;

	background: rgba(245, 96, 10, 0.92);

	color: #ffffff;

	padding: 4px 10px;

	border-radius: 6px;

	font-size: 11px;

	font-weight: 700;

	font-family: monospace;

	z-index: 2;

}



.jkda-featured-book__body,

.jkda-featured-book__body,

.jkda-book-card__body,

.jkda-book-card__body {

	padding: 18px 20px 20px !important;

	display: flex !important;

	flex-direction: column !important;

	flex-grow: 1 !important;

	gap: 8px;

}



.jkda-featured-book__series-label,

.jkda-featured-book__series-label,

.jkda-book-tag,

.jkda-book-card__series {

	font-size: 11px !important;

	font-weight: 700 !important;

	text-transform: uppercase !important;

	letter-spacing: 0.05em !important;

	color: var(--jkda-ink3, #64748b) !important;

	margin: 0 !important;

}



.jkda-featured-book__title,

.jkda-featured-book__title,

.jkda-book-title,

.jkda-book-title {

	font-family: var(--jkda-ff-display, 'Outfit', sans-serif) !important;

	font-size: 16px !important;

	font-weight: 700 !important;

	color: var(--jkda-ink, #0e1726) !important;

	line-height: 1.35 !important;

	margin: 0 !important;

}



.jkda-book-sku,

.jkda-book-sku {

	font-size: 11px !important;

	color: var(--jkda-ink4, #94a3b8) !important;

	font-family: monospace;

}



.jkda-featured-book__inclusions,

.jkda-featured-book__inclusions {

	background: rgba(245, 96, 10, 0.06) !important;

	border: 1px solid rgba(245, 96, 10, 0.18) !important;

	border-radius: 6px !important;

	padding: 6px 10px !important;

	font-size: 11.5px !important;

	font-weight: 600 !important;

	color: #c2410c !important;

	margin: 4px 0 !important;

	display: flex !important;

	align-items: center !important;

	gap: 6px !important;

}



.jkda-featured-book__footer,

.jkda-featured-book__footer,

.jkda-book-card__actions,

.jkda-book-actions {

	display: flex !important;

	align-items: center !important;

	justify-content: space-between !important;

	padding-top: 10px !important;

	margin-top: auto !important;

	gap: 10px !important;

}



.jkda-featured-book__price,

.jkda-featured-book__price,

.jkda-book-price,

.jkda-book-price {

	font-family: var(--jkda-ff-display, 'Outfit', sans-serif) !important;

	font-size: 18px !important;

	font-weight: 700 !important;

	color: var(--jkda-saffron, #f5600a) !important;

}



.jkda-featured-book__btn,

.jkda-featured-book__btn {

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	padding: 8px 16px !important;

	border-radius: 6px !important;

	font-size: 13px !important;

	font-weight: 700 !important;

	background: var(--jkda-saffron, #f5600a) !important;

	color: #ffffff !important;

	text-decoration: none !important;

	transition: background 0.2s ease, transform 0.2s ease;

}



.jkda-featured-book__btn:hover,

.jkda-featured-book__btn:hover {

	background: #ea580c !important;

	color: #ffffff !important;

	transform: translateY(-1px);

}



@media (max-width: 960px) {

	.jkda-featured-books-grid,

	.jkda-featured-books-grid {

		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

	}

}



@media (max-width: 640px) {

	.jkda-featured-books-grid,

	.jkda-featured-books-grid {

		grid-template-columns: 1fr !important;

		gap: 24px !important;

	}

}









/* ============================================================

   JKDA SINGLE PRODUCT DETAIL & BUNDLE DETAIL SYSTEM (D-142)

   ============================================================ */



.jkda-product-detail-grid {

	display: grid;

	grid-template-columns: 400px minmax(0, 1fr);

	gap: 48px;

	align-items: start;

	margin-top: 16px;

}



.jkda-pdp-sticky-cover {

	position: -webkit-sticky;

	position: sticky;

	top: 96px;

	width: 100%;

}



.jkda-pdp-cover-card {

	box-shadow: var(--jkda-shadow-lg);

	overflow: hidden;

	border-radius: var(--jkda-radius2);

}



.jkda-pdp-free-included {

	margin-top: 24px;

	background: #ffffff;

	border: 1px solid var(--jkda-border);

	border-radius: var(--jkda-radius2);

	padding: 20px;

	box-shadow: var(--jkda-shadow-sm);

}



.jkda-pdp-free-included__head {

	display: flex;

	align-items: center;

	justify-content: space-between;

	margin-bottom: 12px;

}



.jkda-pdp-free-included__head strong {

	font-size: 14px;

	text-transform: uppercase;

	letter-spacing: 0.05em;

	color: var(--jkda-ink2);

}



.jkda-pdp-free-included__list {

	list-style: none;

	padding: 0;

	margin: 0;

	font-size: 13.5px;

	color: var(--jkda-ink);

}



.jkda-pdp-free-included__list li {

	padding: 7px 0;

	border-bottom: 1px solid var(--jkda-paper2);

	display: flex;

	align-items: center;

	gap: 8px;

}



.jkda-pdp-free-included__list li:last-child {

	border-bottom: none;

}



.jkda-pdp-body {

	display: flex;

	flex-direction: column;

	gap: 24px;

	min-width: 0;

	max-width: 100%;

}



.jkda-pdp-badge-row {

	display: flex;

	gap: 8px;

	align-items: center;

	margin-bottom: 12px;

	flex-wrap: wrap;

}



.jkda-pdp-title {

	font-size: clamp(28px, 3.2vw, 36px);

	font-weight: 800;

	line-height: 1.25;

	letter-spacing: -0.02em;

	color: var(--jkda-ink);

	margin: 0 0 12px;

	word-break: break-word;

	overflow-wrap: break-word;

}



.jkda-pdp-subtitle {

	font-size: 16px;

	line-height: 1.6;

	color: var(--jkda-ink2);

	margin: 0;

}



.jkda-pdp-buy-box {

	background: #ffffff;

	border: 1px solid var(--jkda-border);

	border-radius: var(--jkda-radius2);

	padding: 24px;

	box-shadow: var(--jkda-shadow-sm);

}



.jkda-pdp-price-row {

	display: flex;

	align-items: baseline;

	gap: 12px;

	margin-bottom: 16px;

	flex-wrap: wrap;

}



.jkda-pdp-price {

	font-size: 32px;

	font-weight: 800;

	color: var(--jkda-ink);

	line-height: 1;

}



.jkda-pdp-price-note {

	font-size: 14px;

	color: var(--jkda-teal);

	font-weight: 600;

}



.jkda-pdp-actions {

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 12px;

	margin-bottom: 16px;

}



.jkda-pdp-trust-row {

	display: flex;

	gap: 16px;

	font-size: 13px;

	color: var(--jkda-ink3);

	flex-wrap: wrap;

}



.jkda-pdp-upsell-banner {

	background: linear-gradient(135deg, #FEF0E8 0%, #FFF7ED 100%);

	border: 2px solid var(--jkda-saffron);

	border-radius: 12px;

	padding: 20px;

	display: flex;

	justify-content: space-between;

	align-items: center;

	gap: 16px;

	flex-wrap: wrap;

}



.jkda-pdp-upsell-title {

	font-weight: 700;

	font-size: 16px;

	margin: 6px 0 2px;

	color: var(--jkda-ink);

}



.jkda-pdp-upsell-desc {

	font-size: 13.5px;

	color: var(--jkda-ink2);

}



.jkda-tabs-wrapper {

	margin-top: 16px;

}



.jkda-tab-nav {

	display: flex;

	gap: 8px;

	border-bottom: 2px solid var(--jkda-border);

	margin-bottom: 24px;

	overflow-x: auto;

	scrollbar-width: none;

}



.jkda-tab-nav::-webkit-scrollbar {

	display: none;

}



.jkda-tab-btn {

	white-space: nowrap;

	flex-shrink: 0;

	padding: 10px 18px;

	font-size: 14px;

	font-weight: 600;

	color: var(--jkda-ink2, #475569);

	background: transparent;

	border: none;

	border-bottom: 2px solid transparent;

	cursor: pointer;

	margin-bottom: -2px;

	transition: all 0.2s ease;

}



.jkda-tab-btn:hover {

	color: var(--jkda-saffron, #EA580C);

}



.jkda-tab-btn.is-active {

	color: var(--jkda-saffron, #EA580C) !important;

	border-bottom-color: var(--jkda-saffron, #EA580C) !important;

	background: rgba(234, 88, 12, 0.06);

	border-radius: 6px 6px 0 0;

}



.jkda-tab-pane {

	display: none;

}



.jkda-tab-pane.is-active {

	display: block !important;

}



.jkda-table-responsive {

	width: 100%;

	overflow-x: auto;

	-webkit-overflow-scrolling: touch;

	margin-top: 16px;

	border: 1px solid var(--jkda-border);

	border-radius: var(--jkda-radius2);

}



.jkda-chapter-card {

	padding: 16px;

	margin-bottom: 10px;

	border: 1px solid var(--jkda-border);

	border-radius: var(--jkda-radius);

	background: #fff;

}



.jkda-chapter-card strong {

	font-size: 14.5px;

	color: var(--jkda-ink);

}



.jkda-chapter-card p {

	font-size: 13px;

	color: var(--jkda-ink3);

	margin: 6px 0 0;

}



/* Universal Professional Practice & Data Safety Advisory (D-144) */

.jkda-safety-advisory {

	background: #f8fafc;

	border: 1px solid #e2e8f0;

	border-left: 4px solid var(--jkda-teal);

	border-radius: var(--jkda-radius);

	padding: 14px 18px;

	margin-top: 16px;

	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

}



.jkda-safety-advisory__head {

	display: flex;

	align-items: center;

	gap: 8px;

	margin-bottom: 6px;

}



.jkda-safety-advisory__icon {

	font-size: 16px;

	line-height: 1;

}



.jkda-safety-advisory__head strong {

	font-size: 13.5px;

	font-weight: 700;

	color: var(--jkda-ink);

	letter-spacing: -0.01em;

}



.jkda-safety-advisory__text {

	font-size: 13px;

	line-height: 1.55;

	color: var(--jkda-ink2);

	margin: 0;

}



/* Key Learning Highlights Component (D-143) */

.jkda-highlight-grid {

	display: flex;

	flex-direction: column;

	gap: 10px;

	margin-top: 16px;

}



.jkda-highlight-card {

	padding: 14px 18px;

	border: 1px solid var(--jkda-border);

	border-radius: var(--jkda-radius);

	background: #ffffff;

	display: flex;

	gap: 12px;

	align-items: flex-start;

	transition: border-color 0.15s ease;

}



.jkda-highlight-card:hover {

	border-color: #cbd5e1;

}



.jkda-highlight-num {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-width: 26px;

	height: 26px;

	border-radius: 6px;

	background: var(--jkda-paper2);

	color: var(--jkda-ink2);

	font-size: 12px;

	font-weight: 700;

	flex-shrink: 0;

	margin-top: 1px;

}



.jkda-highlight-content strong {

	display: block;

	font-size: 14px;

	font-weight: 700;

	color: var(--jkda-ink);

	margin-bottom: 3px;

}



.jkda-highlight-content p {

	font-size: 13px;

	line-height: 1.55;

	color: var(--jkda-ink2);

	margin: 0;

}



/* Single Product PDP Responsive Breakpoints */

@media (max-width: 900px) {

	.jkda-product-detail-grid {

		grid-template-columns: 1fr !important;

		gap: 28px !important;

	}



	.jkda-pdp-sticky-cover {

		position: static !important;

		top: auto !important;

		max-width: 320px !important;

		margin: 0 auto !important;

	}



	.jkda-pdp-cover-card {

		max-width: 100% !important;

	}



	.jkda-pdp-title {

		font-size: clamp(22px, 5.5vw, 26px) !important;

		line-height: 1.25 !important;

		margin-bottom: 10px !important;

	}



	.jkda-pdp-actions {

		grid-template-columns: 1fr !important;

		gap: 10px !important;

	}



	.jkda-pdp-upsell-banner {

		flex-direction: column !important;

		align-items: stretch !important;

		gap: 12px !important;

		padding: 16px !important;

	}



	.jkda-pdp-upsell-banner .jkda-btn {

		width: 100% !important;

		text-align: center !important;

		justify-content: center !important;

	}



	.jkda-tab-nav {

		flex-wrap: nowrap !important;

		overflow-x: auto !important;

		-webkit-overflow-scrolling: touch !important;

		scrollbar-width: none !important;

		gap: 6px !important;

		padding-bottom: 8px !important;

		margin-bottom: 16px !important;

	}



	.jkda-tab-btn {

		font-size: 12px !important;

		padding: 6px 12px !important;

	}



	.jkda-pdp-buy-box {

		padding: 18px 16px !important;

	}



	.jkda-pdp-price {

		font-size: 28px !important;

	}



	.jkda-pdp-free-included {

		padding: 16px 14px !important;

		margin-top: 18px !important;

	}



	.jkda-table-responsive {

		margin-top: 12px !important;

	}



	.jkda-table {

		min-width: 440px !important;

		font-size: 12px !important;

	}



	.jkda-table th,

	.jkda-table td {

		padding: 8px 10px !important;

		white-space: nowrap !important;

	}

}



@media (max-width: 480px) {

	.jkda-pdp-sticky-cover {

		max-width: 270px !important;

	}



	.jkda-pdp-title {

		font-size: 22px !important;

	}



	.jkda-pdp-subtitle {

		font-size: 14px !important;

	}



	.jkda-pdp-trust-row {

		flex-direction: column !important;

		gap: 8px !important;

	}

}













/* ============================================================

   BLOG DESIGN SYSTEM

   Source: UIUX/MOCKUPS/blog_listing.html + blog_post.html

   Decision: D-021 (mockups are the visual truth)

   ============================================================ */



/* ── Filter Bar (Blog Listing) ── */

.jkda-blog-filters, .jkda-blog-filters {

	background: #fff;

	border-bottom: 1px solid var(--jkda-border);

	padding: 0;

	position: sticky;

	top: 64px; /* clears the fixed header */

	z-index: 90;

}



.jkda-blog-filters__inner, .jkda-blog-filters__inner {

	display: flex;

	align-items: center;

	gap: 8px;

	flex-wrap: wrap;

	padding: 12px 0;

	overflow-x: auto;

	scrollbar-width: none;

}



.jkda-blog-filters__inner, .jkda-blog-filters__inner::-webkit-scrollbar {

	display: none;

}



.jkda-filter-chip, .jkda-filter-chip {

	display: inline-flex;

	align-items: center;

	padding: 6px 14px;

	border-radius: 99px;

	font-size: 13px;

	font-weight: 600;

	letter-spacing: 0.03em;

	color: var(--jkda-ink3);

	background: var(--jkda-paper2);

	border: 1px solid var(--jkda-border);

	text-decoration: none;

	white-space: nowrap;

	transition: background var(--jkda-duration) var(--jkda-ease),

	            color var(--jkda-duration) var(--jkda-ease),

	            border-color var(--jkda-duration) var(--jkda-ease);

}



.jkda-filter-chip, .jkda-filter-chip:hover {

	background: var(--jkda-saffron-light);

	color: var(--jkda-saffron2);

	border-color: var(--jkda-saffron-mid);

}



.jkda-filter-chip, .jkda-filter-chip.is-active {

	background: var(--jkda-saffron);

	color: #fff;

	border-color: var(--jkda-saffron);

}



/* ── Blog Layout (2-column: main + sidebar) ── */

.jkda-blog-layout, .jkda-blog-layout {

	display: grid;

	grid-template-columns: 1fr 300px;

	gap: 48px;

	align-items: start;

}



/* ── Blog Grid (post cards) ── */

.jkda-blog-grid, .jkda-blog-grid {

	display: grid;

	grid-template-columns: repeat(2, 1fr);

	gap: 24px;

}



/* ── Post Card ── */

.jkda-post-card {

	display: flex;

	flex-direction: column;

	background: #fff;

	border: 1px solid var(--jkda-border);

	border-radius: var(--jkda-radius3);

	overflow: hidden;

	text-decoration: none;

	transition: box-shadow var(--jkda-duration) var(--jkda-ease),

	            transform var(--jkda-duration) var(--jkda-ease),

	            border-color var(--jkda-duration) var(--jkda-ease);

	box-shadow: var(--jkda-shadow-sm);

}



.jkda-post-card:hover {

	box-shadow: var(--jkda-shadow-hover);

	transform: translateY(-3px);

	border-color: var(--jkda-saffron-mid);

}



/* Featured card spans full width, horizontal layout */

.jkda-post-card--featured {

	grid-column: 1 / -1;

}



.jkda-post-card--featured .jkda-post-card__inner {

	display: grid;

	grid-template-columns: 1fr 1fr;

}



.jkda-post-card--featured .jkda-post-card__thumb {

	aspect-ratio: 16 / 10;

}



.jkda-post-card__thumb {

	overflow: hidden;

	aspect-ratio: 16 / 9;

	flex-shrink: 0;

	background: var(--jkda-paper2);

}



.jkda-post-card__thumb img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	display: block;

	transition: transform 0.4s var(--jkda-ease);

}



.jkda-post-card:hover .jkda-post-card__thumb img {

	transform: scale(1.04);

}



.jkda-post-card__body {

	padding: 20px 22px 22px;

	display: flex;

	flex-direction: column;

	gap: 10px;

	flex: 1;

}



.jkda-post-card--featured .jkda-post-card__body {

	padding: 28px 28px 28px;

	justify-content: center;

	gap: 14px;

}



.jkda-post-card__cat {

	display: inline-block;

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 0.1em;

	text-transform: uppercase;

	color: var(--jkda-saffron);

	background: var(--jkda-saffron-light);

	border-radius: 4px;

	padding: 3px 8px;

	align-self: flex-start;

}



.jkda-post-card__title {

	font-family: var(--jkda-ff-display);

	font-size: 16px;

	font-weight: 700;

	line-height: 1.35;

	color: var(--jkda-ink);

	margin: 0;

}



.jkda-post-card--featured .jkda-post-card__title {

	font-size: clamp(20px, 2.5vw, 26px);

}



.jkda-post-card__excerpt {

	font-size: 14px;

	line-height: 1.6;

	color: var(--jkda-ink3);

	margin: 0;

	display: -webkit-box;

	-webkit-line-clamp: 3;

	-webkit-box-orient: vertical;

	overflow: hidden;

}



.jkda-post-card--featured .jkda-post-card__excerpt {

	-webkit-line-clamp: 4;

}



.jkda-post-card__meta {

	display: flex;

	align-items: center;

	gap: 6px;

	font-size: 12px;

	color: var(--jkda-ink4);

	margin-top: auto;

}



.jkda-post-card__meta-sep {

	color: var(--jkda-border2);

}



.jkda-post-card__read-more {

	display: inline-flex;

	align-items: center;

	gap: 4px;

	font-size: 13px;

	font-weight: 600;

	color: var(--jkda-saffron);

	margin-top: 4px;

	transition: gap var(--jkda-duration) var(--jkda-ease);

}



.jkda-post-card:hover .jkda-post-card__read-more {

	gap: 8px;

}



/* ── Pagination ── */

.jkda-pagination {

	display: flex;

	align-items: center;

	gap: 6px;

	flex-wrap: wrap;

	margin-top: 36px;

}



.jkda-pagination a,

.jkda-pagination span {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-width: 36px;

	height: 36px;

	padding: 0 10px;

	border-radius: var(--jkda-radius);

	font-size: 14px;

	font-weight: 500;

	text-decoration: none;

	border: 1px solid var(--jkda-border);

	background: #fff;

	color: var(--jkda-ink2);

	transition: background var(--jkda-duration) var(--jkda-ease),

	            color var(--jkda-duration) var(--jkda-ease),

	            border-color var(--jkda-duration) var(--jkda-ease);

}



.jkda-pagination a:hover {

	background: var(--jkda-saffron-light);

	color: var(--jkda-saffron);

	border-color: var(--jkda-saffron-mid);

}



.jkda-pagination span.is-current {

	background: var(--jkda-saffron);

	color: #fff;

	border-color: var(--jkda-saffron);

	font-weight: 700;

}



.jkda-pagination__dots {

	border: none;

	background: transparent;

	color: var(--jkda-ink4);

	padding: 0 4px;

	min-width: auto;

}



/* ── Sidebar ── */

.jkda-sidebar {

	display: flex;

	flex-direction: column;

	gap: 24px;

	position: sticky;

	top: 120px;

}



.jkda-sidebar-widget {

	background: #fff;

	border: 1px solid var(--jkda-border);

	border-radius: var(--jkda-radius3);

	padding: 20px 22px;

	box-shadow: var(--jkda-shadow-sm);

}



.jkda-sidebar-widget__title {

	font-family: var(--jkda-ff-display);

	font-size: 14px;

	font-weight: 700;

	letter-spacing: 0.05em;

	text-transform: uppercase;

	color: var(--jkda-ink2);

	margin: 0 0 14px;

	padding-bottom: 10px;

	border-bottom: 2px solid var(--jkda-saffron);

}



/* Sidebar Category List */

.jkda-sidebar-cat-list {

	list-style: none;

	margin: 0;

	padding: 0;

	display: flex;

	flex-direction: column;

	gap: 4px;

}



.jkda-sidebar-cat-list li {

	display: flex;

	align-items: center;

	justify-content: space-between;

	padding: 6px 0;

	border-bottom: 1px solid var(--jkda-paper2);

}



.jkda-sidebar-cat-list li:last-child {

	border-bottom: none;

}



.jkda-sidebar-cat-list a {

	font-size: 14px;

	color: var(--jkda-ink2);

	text-decoration: none;

	font-weight: 500;

	transition: color var(--jkda-duration) var(--jkda-ease);

}



.jkda-sidebar-cat-list a:hover {

	color: var(--jkda-saffron);

}



.jkda-sidebar-cat-count {

	font-size: 12px;

	font-weight: 600;

	color: var(--jkda-ink4);

	background: var(--jkda-paper2);

	border-radius: 99px;

	padding: 2px 8px;

}



/* Sidebar Tags */

.jkda-sidebar-tags {

	display: flex;

	flex-wrap: wrap;

	gap: 6px;

}



.jkda-sidebar-tag {

	display: inline-block;

	font-size: 12px;

	font-weight: 500;

	color: var(--jkda-ink3);

	background: var(--jkda-paper2);

	border: 1px solid var(--jkda-border);

	border-radius: 4px;

	padding: 4px 10px;

	text-decoration: none;

	transition: background var(--jkda-duration) var(--jkda-ease),

	            color var(--jkda-duration) var(--jkda-ease),

	            border-color var(--jkda-duration) var(--jkda-ease);

}



.jkda-sidebar-tag:hover {

	background: var(--jkda-saffron-light);

	color: var(--jkda-saffron);

	border-color: var(--jkda-saffron-mid);

}



/* Sidebar Recent Posts */

.jkda-sidebar-recent {

	list-style: none;

	margin: 0;

	padding: 0;

	display: flex;

	flex-direction: column;

	gap: 14px;

}



.jkda-sidebar-recent__item {

	display: flex;

	gap: 12px;

	align-items: flex-start;

}



.jkda-sidebar-recent__thumb {

	flex-shrink: 0;

	width: 56px;

	height: 56px;

	border-radius: var(--jkda-radius);

	overflow: hidden;

	display: block;

}



.jkda-sidebar-recent__thumb img {

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.jkda-sidebar-recent__title {

	font-size: 13px;

	font-weight: 600;

	line-height: 1.4;

	color: var(--jkda-ink);

	text-decoration: none;

	display: block;

	transition: color var(--jkda-duration) var(--jkda-ease);

}



.jkda-sidebar-recent__title:hover {

	color: var(--jkda-saffron);

}



.jkda-sidebar-recent__date {

	font-size: 11px;

	color: var(--jkda-ink4);

	margin-top: 4px;

}



/* Sidebar CTA */

.jkda-sidebar-cta {

	background: linear-gradient(135deg, var(--jkda-saffron-light), #fff8f4);

	border-color: var(--jkda-saffron-mid);

}



.jkda-sidebar-cta .jkda-sidebar-widget__title {

	color: var(--jkda-saffron2);

	border-bottom-color: var(--jkda-saffron);

}



.jkda-sidebar-cta__text {

	font-size: 13px;

	line-height: 1.6;

	color: var(--jkda-ink2);

	margin: 0 0 14px;

}



/* ── Blog Post Layout (article + sidebar) ── */

.jkda-post-layout, .jkda-post-layout {

	display: grid;

	grid-template-columns: 1fr 300px;

	gap: 48px;

	align-items: start;

}



/* Featured Image */

.jkda-post-featured-img, .jkda-post-featured-img {

	border-radius: var(--jkda-radius3, 12px);

	overflow: hidden;

	margin-bottom: 24px;

	aspect-ratio: 16 / 7;

	max-height: 420px;

	width: 100%;

}



.jkda-post-featured-img img, .jkda-post-featured-img img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	display: block;

}



/* Meta Bar */

.jkda-post-meta-bar, .jkda-post-meta-bar {

	display: flex;

	align-items: center;

	gap: 8px;

	flex-wrap: wrap;

	font-size: 13px;

	color: var(--jkda-ink3);

	margin-bottom: 20px;

	padding-bottom: 16px;

	border-bottom: 1px solid var(--jkda-border);

}



.jkda-post-meta-bar__cat, .jkda-post-meta-bar__cat {

	display: inline-block;

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 0.1em;

	text-transform: uppercase;

	color: var(--jkda-saffron);

	background: var(--jkda-saffron-light);

	border-radius: 4px;

	padding: 3px 8px;

	text-decoration: none;

}



.jkda-post-meta-bar__sep, .jkda-post-meta-bar__sep {

	color: var(--jkda-border2);

}



.jkda-post-meta-bar__date, .jkda-post-meta-bar__date {

	color: var(--jkda-ink3);

}



.jkda-post-meta-bar__read, .jkda-post-meta-bar__read {

	color: var(--jkda-ink3);

	font-weight: 500;

}



/* ── Prose (Article Body) ── */

.jkda-prose, .jkda-prose {

	font-size: 16px;

	line-height: 1.75;

	color: var(--jkda-ink2);

	max-width: 720px;

}



.jkda-prose, .jkda-prose h2 {

	font-family: var(--jkda-ff-display);

	font-size: clamp(20px, 2.5vw, 26px);

	font-weight: 800;

	line-height: 1.25;

	color: var(--jkda-ink);

	margin: 36px 0 14px;

	padding-top: 8px;

}



.jkda-prose, .jkda-prose h3 {

	font-family: var(--jkda-ff-display);

	font-size: 18px;

	font-weight: 700;

	color: var(--jkda-ink);

	margin: 28px 0 10px;

}



.jkda-prose, .jkda-prose p {

	margin: 0 0 18px;

}



.jkda-prose, .jkda-prose ul,

.jkda-prose, .jkda-prose ol {

	margin: 0 0 18px;

	padding-left: 24px;

}



.jkda-prose, .jkda-prose li {

	margin-bottom: 8px;

}



.jkda-prose, .jkda-prose a {

	color: var(--jkda-teal);

	text-decoration: underline;

	text-decoration-color: var(--jkda-teal-light);

	text-underline-offset: 3px;

	transition: color var(--jkda-duration) var(--jkda-ease);

}



.jkda-prose, .jkda-prose a:hover {

	color: var(--jkda-saffron);

}



.jkda-prose, .jkda-prose strong {

	font-weight: 700;

	color: var(--jkda-ink);

}



.jkda-prose, .jkda-prose blockquote {

	margin: 24px 0;

	padding: 18px 20px 18px 24px;

	background: var(--jkda-saffron-light);

	border-left: 4px solid var(--jkda-saffron);

	border-radius: 0 var(--jkda-radius2) var(--jkda-radius2) 0;

}



.jkda-prose, .jkda-prose blockquote p {

	font-size: 15px;

	font-style: italic;

	color: var(--jkda-ink2);

	margin: 0;

}



.jkda-prose, .jkda-prose pre {

	background: #1a1f2e;

	border-radius: var(--jkda-radius2);

	padding: 16px 20px;

	overflow-x: auto;

	margin: 0 0 18px;

	font-size: 14px;

	line-height: 1.6;

}



.jkda-prose, .jkda-prose code {

	font-family: 'Courier New', monospace;

	font-size: 0.875em;

	background: var(--jkda-paper2);

	color: var(--jkda-teal);

	border: 1px solid var(--jkda-border);

	border-radius: 4px;

	padding: 2px 6px;

}



.jkda-prose, .jkda-prose pre code {

	background: none;

	color: #e2e8f0;

	border: none;

	padding: 0;

	font-size: 14px;

}



.jkda-prose, .jkda-prose table {

	width: 100%;

	border-collapse: collapse;

	margin: 0 0 24px;

	font-size: 14px;

	border-radius: var(--jkda-radius2);

	overflow: hidden;

	box-shadow: var(--jkda-shadow-sm);

	border: 1px solid var(--jkda-border);

}



.jkda-prose, .jkda-prose table th {

	background: var(--jkda-ink);

	color: #fff;

	font-weight: 700;

	font-size: 13px;

	padding: 10px 14px;

	text-align: left;

	letter-spacing: 0.03em;

}



.jkda-prose, .jkda-prose table td {

	padding: 10px 14px;

	border-bottom: 1px solid var(--jkda-border);

	color: var(--jkda-ink2);

}



.jkda-prose, .jkda-prose table tr:last-child td {

	border-bottom: none;

}



.jkda-prose, .jkda-prose table tr:nth-child(even) {

	background: var(--jkda-paper);

}



.jkda-prose, .jkda-prose hr {

	border: none;

	border-top: 1px solid var(--jkda-border);

	margin: 32px 0;

}



/* Code Block Header */

.jkda-code-header, .jkda-code-header {

	display: flex;

	align-items: center;

	justify-content: space-between;

	background: #252d3d;

	padding: 8px 16px;

	border-radius: var(--jkda-radius2) var(--jkda-radius2) 0 0;

	margin-top: 8px;

}



.jkda-code-lang, .jkda-code-lang {

	font-size: 11px;

	font-weight: 600;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	color: #94a3b8;

}



.jkda-code-copy, .jkda-code-copy {

	font-size: 12px;

	font-weight: 600;

	color: #94a3b8;

	background: none;

	border: 1px solid #3d4a5e;

	border-radius: 4px;

	padding: 4px 10px;

	cursor: pointer;

	transition: color var(--jkda-duration) var(--jkda-ease),

	            border-color var(--jkda-duration) var(--jkda-ease);

}



.jkda-code-copy, .jkda-code-copy:hover {

	color: #fff;

	border-color: #94a3b8;

}



.jkda-code-header, .jkda-code-header + pre {

	margin-top: 0;

	border-radius: 0 0 var(--jkda-radius2) var(--jkda-radius2);

}



/* Callout Boxes */

.jkda-callout, .jkda-callout {

	display: flex;

	gap: 12px;

	align-items: flex-start;

	padding: 14px 16px;

	border-radius: var(--jkda-radius2);

	margin: 20px 0;

	font-size: 14px;

	line-height: 1.6;

}



.jkda-callout__icon, .jkda-callout__icon {

	font-style: normal;

	font-size: 18px;

	flex-shrink: 0;

	line-height: 1;

	margin-top: 2px;

}



.jkda-callout--tip, .jkda-callout--tip {

	background: var(--jkda-teal-light);

	border-left: 4px solid var(--jkda-teal);

	color: var(--jkda-ink2);

}



.jkda-callout--warning, .jkda-callout--warning {

	background: var(--jkda-gold-light);

	border-left: 4px solid var(--jkda-gold);

	color: var(--jkda-ink2);

}



.jkda-callout--note, .jkda-callout--note {

	background: var(--jkda-saffron-light);

	border-left: 4px solid var(--jkda-saffron);

	color: var(--jkda-ink2);

}



/* ── Share Bar ── */

.jkda-share-bar, .jkda-share-bar {

	display: flex;

	align-items: center;

	gap: 10px;

	margin: 32px 0;

	padding: 20px 0;

	border-top: 1px solid var(--jkda-border);

	border-bottom: 1px solid var(--jkda-border);

}



.jkda-share-bar__label, .jkda-share-bar__label {

	font-size: 13px;

	font-weight: 600;

	text-transform: uppercase;

	letter-spacing: 0.08em;

	color: var(--jkda-ink3);

	margin-right: 4px;

}



.jkda-share-btn, .jkda-share-btn {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 36px;

	height: 36px;

	border-radius: 50%;

	background: var(--jkda-paper2);

	border: 1px solid var(--jkda-border);

	color: var(--jkda-ink2);

	font-size: 14px;

	font-weight: 700;

	text-decoration: none;

	transition: background var(--jkda-duration) var(--jkda-ease),

	            color var(--jkda-duration) var(--jkda-ease),

	            transform var(--jkda-duration) var(--jkda-ease);

}



.jkda-share-btn, .jkda-share-btn:hover {

	background: var(--jkda-saffron);

	color: #fff;

	border-color: var(--jkda-saffron);

	transform: scale(1.1);

}



/* ── Author Box ── */

.jkda-author-box, .jkda-author-box {

	display: flex;

	gap: 16px;

	align-items: flex-start;

	padding: 20px 22px;

	background: var(--jkda-paper);

	border: 1px solid var(--jkda-border);

	border-radius: var(--jkda-radius3);

	margin: 0 0 32px;

}



.jkda-author-box__avatar, .jkda-author-box__avatar {

	flex-shrink: 0;

}



.jkda-author-box__avatar, .jkda-author-box__avatar img {

	width: 56px;

	height: 56px;

	border-radius: 50%;

	object-fit: cover;

}



.jkda-author-box__name, .jkda-author-box__name {

	font-family: var(--jkda-ff-display);

	font-size: 15px;

	font-weight: 700;

	color: var(--jkda-ink);

	margin: 0 0 6px;

}



.jkda-author-box__bio, .jkda-author-box__bio {

	font-size: 13px;

	line-height: 1.6;

	color: var(--jkda-ink3);

	margin: 0;

}



/* ── Related Posts ── */

.jkda-related-posts, .jkda-related-posts {

	margin-top: 36px;

}



.jkda-related-grid, .jkda-related-grid {

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 20px;

}



/* ============================================================

   BLOG RESPONSIVE

   ============================================================ */



@media (max-width: 1024px) {

	.jkda-blog-layout, .jkda-blog-layout,

	.jkda-post-layout, .jkda-post-layout {

		grid-template-columns: 1fr !important;

		gap: 32px !important;

	}



	.jkda-post-layout, .jkda-post-layout > article,

	.jkda-blog-layout, .jkda-blog-layout > div,

	.jkda-prose, .jkda-prose {

		min-width: 0 !important;

		max-width: 100% !important;

		width: 100% !important;

	}



	.jkda-sidebar, .jkda-sidebar {

		position: static !important;

		width: 100% !important;

		max-width: 100% !important;

	}



	.jkda-related-grid, .jkda-related-grid {

		grid-template-columns: repeat(2, 1fr);

	}

}



@media (max-width: 768px) {

	/* Page header mobile padding */

	.jkda-page-header, .jkda-page-header {

		padding: 24px 0 20px !important;

	}



	.jkda-breadcrumb, .jkda-breadcrumb {

		font-size: 12px !important;

		margin-bottom: 10px !important;

		display: flex !important;

		flex-wrap: wrap !important;

		gap: 4px 6px !important;

	}



	/* Page header title & sub sizing on mobile */

	.jkda-page-header__title, .jkda-page-header__title {

		font-size: clamp(20px, 5.2vw, 24px) !important;

		line-height: 1.25 !important;

		margin-bottom: 8px !important;

		word-break: break-word !important;

		overflow-wrap: break-word !important;

		letter-spacing: -0.3px !important;

	}



	.jkda-page-header__sub, .jkda-page-header__sub {

		font-size: 13.5px !important;

		line-height: 1.5 !important;

	}



	/* Blog Grid — single column on mobile */

	.jkda-blog-grid, .jkda-blog-grid {

		grid-template-columns: 1fr !important;

		gap: 16px !important;

	}



	/* Featured post — vertical stack on mobile */

	.jkda-post-card--featured, .jkda-post-card--featured .jkda-post-card__inner, .jkda-post-card__inner {

		grid-template-columns: 1fr !important;

	}



	.jkda-post-card--featured, .jkda-post-card--featured .jkda-post-card__thumb, .jkda-post-card__thumb {

		aspect-ratio: 16 / 9 !important;

		width: 100% !important;

		border-radius: var(--jkda-radius2) var(--jkda-radius2) 0 0 !important;

	}



	.jkda-post-card--featured, .jkda-post-card--featured .jkda-post-card__body, .jkda-post-card__body {

		padding: 16px 14px !important;

	}



	.jkda-post-card--featured, .jkda-post-card--featured .jkda-post-card__title, .jkda-post-card__title {

		font-size: 17px !important;

		line-height: 1.3 !important;

		margin: 6px 0 !important;

	}



	.jkda-post-card--featured, .jkda-post-card--featured .jkda-post-card__excerpt, .jkda-post-card__excerpt {

		font-size: 13px !important;

		line-height: 1.5 !important;

		margin-bottom: 10px !important;

	}



	/* Related posts — single column on mobile */

	.jkda-related-grid, .jkda-related-grid {

		grid-template-columns: 1fr !important;

		gap: 14px !important;

	}



	/* Prose body sizing on mobile */

	.jkda-prose, .jkda-prose {

		font-size: 14.5px !important;

		line-height: 1.7 !important;

		min-width: 0 !important;

		max-width: 100% !important;

		width: 100% !important;

		word-wrap: break-word !important;

		overflow-wrap: break-word !important;

	}



	.jkda-prose, .jkda-prose h2 {

		font-size: 19px !important;

		line-height: 1.3 !important;

		margin: 26px 0 10px !important;

	}



	.jkda-prose, .jkda-prose h3 {

		font-size: 16px !important;

		line-height: 1.3 !important;

		margin: 20px 0 8px !important;

	}



	/* Featured image — 16:9 on mobile */

	.jkda-post-featured-img, .jkda-post-featured-img {

		aspect-ratio: 16 / 9 !important;

		border-radius: var(--jkda-radius2) !important;

		margin-bottom: 16px !important;

		width: 100% !important;

		height: auto !important;

		object-fit: cover !important;

	}

}



/* ============================================================

   SINGLE PRODUCT PDP UPSELL BANNER FIX (NO FONT OVERLAP)

   ============================================================ */

.jkda-pdp-upsell-banner {

	background: linear-gradient(135deg, #FEF0E8 0%, #FFF7ED 100%) !important;

	border: 2px solid #EA580C !important;

	border-radius: 12px !important;

	padding: 20px 24px !important;

	display: flex !important;

	flex-direction: row !important;

	justify-content: space-between !important;

	align-items: center !important;

	gap: 24px !important;

	margin: 24px 0 !important;

	box-sizing: border-box !important;

}



.jkda-pdp-upsell-info {

	flex: 1 1 auto !important;

	min-width: 0 !important;

}



.jkda-pdp-upsell-info .jkda-badge--bundle {

	display: inline-block !important;

	background: #EA580C !important;

	color: #ffffff !important;

	font-size: 11px !important;

	font-weight: 800 !important;

	padding: 3px 8px !important;

	border-radius: 4px !important;

	margin-bottom: 6px !important;

	line-height: 1.2 !important;

}



.jkda-pdp-upsell-title {

	font-weight: 700 !important;

	font-size: 16px !important;

	margin: 0 0 4px !important;

	color: #0F172A !important;

	line-height: 1.35 !important;

}



.jkda-pdp-upsell-desc {

	font-size: 13.5px !important;

	color: #475569 !important;

	line-height: 1.45 !important;

	margin: 0 !important;

}



.jkda-pdp-upsell-action {

	flex-shrink: 0 !important;

}



.jkda-pdp-upsell-action .jkda-btn {

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	padding: 10px 18px !important;

	background: #EA580C !important;

	color: #ffffff !important;

	border-radius: 6px !important;

	font-weight: 700 !important;

	font-size: 14px !important;

	text-decoration: none !important;

	white-space: nowrap !important;

	border: none !important;

	box-shadow: 0 2px 4px rgba(234, 88, 12, 0.25) !important;

	transition: background 0.15s ease !important;

}



.jkda-pdp-upsell-action .jkda-btn:hover {

	background: #C2410C !important;

	color: #ffffff !important;

}



@media (max-width: 768px) {

	.jkda-pdp-upsell-banner {

		flex-direction: column !important;

		align-items: stretch !important;

		gap: 14px !important;

		padding: 16px !important;

	}

	.jkda-pdp-upsell-action .jkda-btn {

		width: 100% !important;

	}

}







/* ============================================================

   5-SERIES SWITCHER BAR & BUTTONS (MATCHES "ADD TO CART" STYLE)

   ============================================================ */

.jkda-series-switcher-bar {

	background: #08101E !important;

	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

	padding: 12px 0 !important;

	position: relative !important;

	z-index: 40 !important;

	width: 100% !important;

}



.jkda-series-switcher-inner {

	display: flex !important;

	align-items: center !important;

	gap: 16px !important;

	overflow-x: auto !important;

	padding: 2px 0 !important;

	-webkit-overflow-scrolling: touch !important;

	scrollbar-width: none !important;

}



.jkda-series-switcher-inner::-webkit-scrollbar {

	display: none !important;

}



.jkda-series-switcher-label {

	color: #94A3B8 !important;

	font-size: 12px !important;

	font-weight: 700 !important;

	text-transform: uppercase !important;

	letter-spacing: 0.06em !important;

	white-space: nowrap !important;

	flex-shrink: 0 !important;

}



.jkda-series-switcher-list {

	display: flex !important;

	align-items: center !important;

	gap: 10px !important;

	flex-wrap: nowrap !important;

}



.jkda-series-switcher-bar .jkda-series-switcher-btn,

.jkda-series-switcher-bar .jkda-series-switcher-pill {

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	gap: 8px !important;

	background: transparent !important;

	border: 1.5px solid rgba(255, 255, 255, 0.38) !important;

	border-radius: 8px !important;

	padding: 9px 18px !important;

	color: #FFFFFF !important;

	text-decoration: none !important;

	font-family: var(--jkda-ff-sans, 'Outfit', -apple-system, sans-serif) !important;

	font-size: 13.5px !important;

	font-weight: 600 !important;

	line-height: 1.4 !important;

	white-space: nowrap !important;

	cursor: pointer !important;

	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;

}



.jkda-series-switcher-bar .jkda-series-switcher-btn:hover,

.jkda-series-switcher-bar .jkda-series-switcher-btn:focus-visible,

.jkda-series-switcher-bar .jkda-series-switcher-pill:hover,

.jkda-series-switcher-bar .jkda-series-switcher-pill:focus-visible {

	border-color: #FFFFFF !important;

	color: #FFFFFF !important;

	background: rgba(255, 255, 255, 0.12) !important;

	transform: translateY(-1px) !important;

	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;

}



.jkda-series-switcher-bar .jkda-series-switcher-btn.is-active,

.jkda-series-switcher-bar .jkda-series-switcher-pill.is-active {

	background: #F5600A !important;

	border-color: #F5600A !important;

	color: #FFFFFF !important;

	font-weight: 700 !important;

	box-shadow: 0 4px 16px rgba(245, 96, 10, 0.45) !important;

	transform: translateY(-1px) !important;

}



.jkda-series-switcher-bar .jkda-series-switcher-btn.is-active:hover {

	background: #E8510A !important;

	border-color: #E8510A !important;

}



.jkda-series-switcher-code {

	font-weight: 800 !important;

	font-family: 'JetBrains Mono', monospace !important;

	letter-spacing: 0.04em !important;

	font-size: 13.5px !important;

	color: #FFFFFF !important;

}



.jkda-series-switcher-sep {

	opacity: 0.45 !important;

	font-size: 12px !important;

	color: #FFFFFF !important;

}



.jkda-series-switcher-badge {

	font-size: 12.5px !important;

	font-weight: 600 !important;

	opacity: 0.95 !important;

	color: #FFFFFF !important;

}



.jkda-series-switcher-discount {

	font-size: 10.5px !important;

	font-weight: 800 !important;

	background: rgba(245, 96, 10, 0.22) !important;

	color: #FED7AA !important;

	border: 1px solid rgba(245, 96, 10, 0.45) !important;

	padding: 2px 6px !important;

	border-radius: 4px !important;

	letter-spacing: 0.03em !important;

	line-height: 1.2 !important;

}



.jkda-series-switcher-bar .is-active .jkda-series-discount,

.jkda-series-switcher-bar .is-active .jkda-series-switcher-discount {

	background: rgba(0, 0, 0, 0.35) !important;

	color: #FEF08A !important;

	border-color: rgba(0, 0, 0, 0.2) !important;

}



/* ============================================================

   RESOURCES PAGE COMPLETE DESIGN SYSTEM (MATCHES resources.html)

   ============================================================ */



/* Hero Section with Dark Background */

.jkda-resources-hero-section,

.jkda-resources-hero-section {

	background: #08101E !important;

	color: #FFFFFF !important;

	padding: 48px 0 56px !important;

	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

}



.jkda-resources-hero-layout,

.jkda-resources-hero-layout {

	display: grid !important;

	grid-template-columns: 1.1fr 0.9fr !important;

	align-items: center !important;

	gap: 40px !important;

}



.jkda-resources-hero-content,

.jkda-resources-hero-content {

	min-width: 0 !important;

}



.jkda-resources-hero-content .jkda-breadcrumb,

.jkda-resources-hero-content .jkda-breadcrumb {

	margin-bottom: 16px !important;

	font-size: 13px !important;

	color: #94A3B8 !important;

}



.jkda-resources-hero-content .jkda-breadcrumb a,

.jkda-resources-hero-content .jkda-breadcrumb a {

	color: #94A3B8 !important;

	text-decoration: none !important;

}



.jkda-resources-hero-content .jkda-breadcrumb a:hover,

.jkda-resources-hero-content .jkda-breadcrumb a:hover {

	color: #FFFFFF !important;

}



.jkda-resources-hero-content .jkda-page-header__eyebrow,

.jkda-resources-hero-content .jkda-page-header__eyebrow {

	color: #F5600A !important;

	font-size: 13px !important;

	font-weight: 700 !important;

	text-transform: uppercase !important;

	letter-spacing: 0.08em !important;

	margin: 0 0 8px !important;

}



.jkda-resources-hero-content .jkda-page-header__title,

.jkda-resources-hero-content .jkda-page-header__title {

	color: #FFFFFF !important;

	font-family: var(--jkda-ff-display, 'Outfit', sans-serif) !important;

	font-size: clamp(32px, 4.2vw, 48px) !important;

	font-weight: 800 !important;

	line-height: 1.15 !important;

	letter-spacing: -0.02em !important;

	margin: 0 0 16px !important;

}



.jkda-resources-hero-content .jkda-page-header__sub,

.jkda-resources-hero-content .jkda-page-header__sub {

	color: #CBD5E1 !important;

	font-size: 16px !important;

	line-height: 1.65 !important;

	max-width: 540px !important;

	margin: 0 0 24px !important;

}



.jkda-resources-hero-actions,

.jkda-resources-hero-actions {

	display: flex !important;

	align-items: center !important;

	gap: 14px !important;

	flex-wrap: wrap !important;

}



.jkda-resources-hero-actions .jkda-button,

.jkda-resources-hero-actions .jkda-button {

	background: #F5600A !important;

	color: #FFFFFF !important;

	border: 1.5px solid #F5600A !important;

	padding: 12px 24px !important;

	border-radius: 8px !important;

	font-size: 14px !important;

	font-weight: 700 !important;

	text-decoration: none !important;

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	transition: all 0.2s ease !important;

	box-shadow: 0 4px 14px rgba(245, 96, 10, 0.4) !important;

}



.jkda-resources-hero-actions .jkda-button:hover,

.jkda-resources-hero-actions .jkda-button:hover {

	background: #E8510A !important;

	border-color: #E8510A !important;

	transform: translateY(-1px) !important;

}



.jkda-resources-hero-actions .jkda-button--outline-white,

.jkda-resources-hero-actions .jkda-button--outline-white {

	background: transparent !important;

	border: 1.5px solid rgba(255, 255, 255, 0.4) !important;

	color: #FFFFFF !important;

	box-shadow: none !important;

}



.jkda-resources-hero-actions .jkda-button--outline-white:hover,

.jkda-resources-hero-actions .jkda-button--outline-white:hover {

	background: rgba(255, 255, 255, 0.12) !important;

	border-color: #FFFFFF !important;

}



.jkda-resources-hero-visual,

.jkda-resources-hero-visual {

	display: flex !important;

	justify-content: center !important;

	align-items: center !important;

}



.jkda-resources-hero-image-wrap,

.jkda-resources-hero-image-wrap {

	width: 100% !important;

	max-width: 540px !important;

	border-radius: 14px !important;

	overflow: hidden !important;

	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;

	transition: transform 0.3s ease, box-shadow 0.3s ease !important;

}



.jkda-resources-hero-image-wrap:hover,

.jkda-resources-hero-image-wrap:hover {

	transform: translateY(-2px) !important;

	box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 96, 10, 0.4) !important;

}



.jkda-resources-hero-img,

.jkda-resources-hero-img {

	width: 100% !important;

	height: auto !important;

	display: block !important;

	object-fit: cover !important;

	aspect-ratio: 16 / 9 !important;

}



/* Stats Bar */

.jkda-resources-stats,

.jkda-resources-stats {

	display: grid !important;

	grid-template-columns: repeat(4, 1fr) !important;

	gap: 0 !important;

	background: #F3F2EE !important;

	border-top: 1px solid #DDD9CF !important;

	border-bottom: 1px solid #DDD9CF !important;

}



.jkda-resources-stat,

.jkda-resources-stat {

	text-align: center !important;

	padding: 20px 16px !important;

	border-right: 1px solid #DDD9CF !important;

}



.jkda-resources-stat:last-child,

.jkda-resources-stat:last-child {

	border-right: none !important;

}



.jkda-resources-stat__num,

.jkda-resources-stat__num {

	font-family: var(--jkda-ff-display, 'Outfit', sans-serif) !important;

	font-size: 28px !important;

	font-weight: 800 !important;

	color: #111827 !important;

	line-height: 1.1 !important;

}



.jkda-resources-stat__label,

.jkda-resources-stat__label {

	font-size: 12px !important;

	color: #6B7280 !important;

	margin-top: 4px !important;

	font-weight: 600 !important;

	text-transform: uppercase !important;

	letter-spacing: 0.04em !important;

}



/* Sections General */

.jkda-section,

.jkda-section {

	padding: 64px 0 !important;

}



.jkda-section--alt,

.jkda-section--alt {

	background: #F8FAFC !important;

	border-top: 1px solid #E2E8F0 !important;

	border-bottom: 1px solid #E2E8F0 !important;

}



.jkda-section-header,

.jkda-section-header {

	margin-bottom: 36px !important;

}



.jkda-section-eyebrow,

.jkda-section-eyebrow {

	color: #F5600A !important;

	font-size: 12px !important;

	font-weight: 700 !important;

	text-transform: uppercase !important;

	letter-spacing: 0.08em !important;

	margin: 0 0 6px !important;

}



.jkda-section-title,

.jkda-section-title {

	font-family: var(--jkda-ff-display, 'Outfit', sans-serif) !important;

	font-size: clamp(24px, 3vw, 32px) !important;

	font-weight: 800 !important;

	color: #0F172A !important;

	margin: 0 0 8px !important;

}



.jkda-section-sub,

.jkda-section-sub {

	color: #64748B !important;

	font-size: 15px !important;

	line-height: 1.6 !important;

	max-width: 680px !important;

	margin: 0 !important;

}



/* Mastery Track Cards (LP Grid) */

.jkda-lp-grid,

.jkda-lp-grid {

	display: grid !important;

	grid-template-columns: repeat(2, 1fr) !important;

	gap: 28px !important;

}



.jkda-lp-card,

.jkda-lp-card {

	background: #FFFFFF !important;

	border: 1.5px solid #E2E8F0 !important;

	border-radius: 14px !important;

	overflow: hidden !important;

	display: flex !important;

	flex-direction: column !important;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;

	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;

}



.jkda-lp-card:hover,

.jkda-lp-card:hover {

	transform: translateY(-4px) !important;

	box-shadow: 0 10px 24px rgba(234, 88, 12, 0.12) !important;

	border-color: #EA580C !important;

}



.jkda-lp-card__accent,

.jkda-lp-card__accent {

	height: 4px !important;

	width: 100% !important;

}

.jkda-lp-card__accent--saffron, .jkda-lp-card__accent--saffron { background: #EA580C !important; }

.jkda-lp-card__accent--teal, .jkda-lp-card__accent--teal       { background: #0D9488 !important; }

.jkda-lp-card__accent--blue, .jkda-lp-card__accent--blue       { background: #2563EB !important; }

.jkda-lp-card__accent--purple, .jkda-lp-card__accent--purple   { background: #7C3AED !important; }

.jkda-lp-card__accent--ruby, .jkda-lp-card__accent--ruby       { background: #E11D48 !important; }



.jkda-lp-card__head,

.jkda-lp-card__head {

	padding: 20px 22px 14px !important;

	display: flex !important;

	gap: 14px !important;

	align-items: flex-start !important;

	border-bottom: 1px solid #F1F5F9 !important;

}



.jkda-lp-card__icon,

.jkda-lp-card__icon {

	width: 44px !important;

	height: 44px !important;

	border-radius: 10px !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	font-size: 22px !important;

	flex-shrink: 0 !important;

	background: #FFF7ED !important;

}



.jkda-lp-card__name,

.jkda-lp-card__name {

	font-size: 1.05rem !important;

	font-weight: 700 !important;

	color: #0F172A !important;

	margin-bottom: 4px !important;

}



.jkda-lp-card__desc,

.jkda-lp-card__desc {

	font-size: 13px !important;

	color: #64748B !important;

	line-height: 1.55 !important;

}



.jkda-lp-card__books,

.jkda-lp-card__books {

	padding: 10px 22px !important;

	max-height: 320px !important;

	overflow-y: auto !important;

	flex-grow: 1 !important;

}



.jkda-lp-book,

.jkda-lp-book {

	display: flex !important;

	align-items: center !important;

	justify-content: space-between !important;

	padding: 9px 6px !important;

	border-bottom: 1px solid #F1F5F9 !important;

	text-decoration: none !important;

	border-radius: 6px !important;

	transition: background 0.15s ease !important;

}



.jkda-lp-book:last-child,

.jkda-lp-book:last-child {

	border-bottom: none !important;

}



.jkda-lp-book:hover,

.jkda-lp-book:hover {

	background: #F8FAFC !important;

}



.jkda-lp-book__info,

.jkda-lp-book__info {

	display: flex !important;

	align-items: center !important;

	gap: 10px !important;

	min-width: 0 !important;

	flex: 1 !important;

}



.jkda-lp-book__dot,

.jkda-lp-book__dot {

	width: 7px !important;

	height: 7px !important;

	border-radius: 2px !important;

	flex-shrink: 0 !important;

}

.jkda-lp-book__dot--saffron, .jkda-lp-book__dot--saffron { background: #EA580C !important; }

.jkda-lp-book__dot--teal, .jkda-lp-book__dot--teal       { background: #0D9488 !important; }

.jkda-lp-book__dot--blue, .jkda-lp-book__dot--blue       { background: #2563EB !important; }

.jkda-lp-book__dot--purple, .jkda-lp-book__dot--purple   { background: #7C3AED !important; }

.jkda-lp-book__dot--ruby, .jkda-lp-book__dot--ruby       { background: #E11D48 !important; }



.jkda-lp-book__num,

.jkda-lp-book__num {

	font-size: 11px !important;

	font-weight: 700 !important;

	color: #94A3B8 !important;

	min-width: 18px !important;

	font-family: monospace !important;

}



.jkda-lp-book__title,

.jkda-lp-book__title {

	font-size: 13px !important;

	color: #1E293B !important;

	font-weight: 500 !important;

	white-space: nowrap !important;

	overflow: hidden !important;

	text-overflow: ellipsis !important;

}



.jkda-lp-book__price,

.jkda-lp-book__price {

	font-size: 12.5px !important;

	font-weight: 700 !important;

	color: #EA580C !important;

	white-space: nowrap !important;

	margin-left: 12px !important;

}



.jkda-lp-card__footer,

.jkda-lp-card__foot {

	padding: 14px 22px !important;

	background: #F8FAFC !important;

	border-top: 1px solid #E2E8F0 !important;

	display: flex !important;

	align-items: center !important;

	justify-content: space-between !important;

	border-radius: 0 0 14px 14px !important;

	box-sizing: border-box !important;

	width: 100% !important;

}



.jkda-lp-card__total {

	font-size: 13px !important;

	color: #64748B !important;

}



.jkda-lp-card__footer .jkda-button,

.jkda-lp-card__foot .jkda-button {

	background: #EA580C !important;

	color: #FFFFFF !important;

	padding: 8px 16px !important;

	border-radius: 6px !important;

	font-size: 13px !important;

	font-weight: 700 !important;

	text-decoration: none !important;

	display: inline-flex !important;

	align-items: center !important;

	border: none !important;

	transition: all 0.2s ease !important;

}



.jkda-lp-card__footer .jkda-button.jkda-button--teal,

.jkda-lp-card__foot .jkda-button.jkda-button--teal {

	background: #0D9488 !important;

}



.jkda-lp-card__footer .jkda-button:hover,

.jkda-lp-card__foot .jkda-button:hover {

	background: #C2410C !important;

	transform: translateY(-1px) !important;

}



.jkda-lp-card__footer .jkda-button.jkda-button--teal:hover,

.jkda-lp-card__foot .jkda-button.jkda-button--teal:hover {

	background: #0F766E !important;

	transform: translateY(-1px) !important;

}



/* Companion Tools (Premium Grid) */

.jkda-premium-grid,

.jkda-premium-grid {

	display: grid !important;

	grid-template-columns: repeat(3, 1fr) !important;

	gap: 24px !important;

}



.jkda-premium-detail-card,

.jkda-premium-detail-card {

	background: #FFFFFF !important;

	border: 1.5px solid #E2E8F0 !important;

	border-radius: 14px !important;

	padding: 28px !important;

	display: flex !important;

	flex-direction: column !important;

	gap: 14px !important;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;

	transition: all 0.2s ease !important;

}



.jkda-premium-detail-card:hover,

.jkda-premium-detail-card:hover {

	transform: translateY(-3px) !important;

	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;

	border-color: #CBD5E1 !important;

}



.jkda-premium-detail-card__icon,

.jkda-premium-detail-card__icon {

	width: 48px !important;

	height: 48px !important;

	border-radius: 12px !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	font-size: 24px !important;

}



.jkda-premium-detail-card__icon--gold, .jkda-premium-detail-card__icon--gold { background: #FEF3C7 !important; color: #B45309 !important; }

.jkda-premium-detail-card__icon--teal, .jkda-premium-detail-card__icon--teal { background: #CCFBF1 !important; color: #0F766E !important; }

.jkda-premium-detail-card__icon--ruby, .jkda-premium-detail-card__icon--ruby { background: #FFE4E6 !important; color: #BE123C !important; }



.jkda-premium-detail-card__name,

.jkda-premium-detail-card__name {

	font-size: 18px !important;

	font-weight: 700 !important;

	color: #0F172A !important;

	margin: 0 !important;

}



.jkda-premium-detail-card__desc,

.jkda-premium-detail-card__desc {

	font-size: 13.5px !important;

	color: #64748B !important;

	line-height: 1.6 !important;

	flex: 1 !important;

	margin: 0 !important;

}



.jkda-premium-detail-card__features,

.jkda-premium-detail-card__features {

	list-style: none !important;

	margin: 0 !important;

	padding: 12px 0 0 !important;

	border-top: 1px solid #F1F5F9 !important;

	display: flex !important;

	flex-direction: column !important;

	gap: 8px !important;

}



.jkda-premium-detail-card__features li,

.jkda-premium-detail-card__features li {

	font-size: 13px !important;

	color: #334155 !important;

	display: flex !important;

	align-items: center !important;

	gap: 8px !important;

}



.jkda-premium-detail-card__features li::before,

.jkda-premium-detail-card__features li::before {

	content: '✓' !important;

	color: #0D9488 !important;

	font-weight: 800 !important;

	font-size: 13px !important;

}



.jkda-premium-detail-card__pricing,

.jkda-premium-detail-card__pricing {

	display: flex !important;

	align-items: baseline !important;

	gap: 8px !important;

	margin-top: 4px !important;

}



.jkda-premium-detail-card__price,

.jkda-premium-detail-card__price {

	font-size: 20px !important;

	font-weight: 800 !important;

	color: #16A34A !important;

}



.jkda-premium-detail-card .jkda-button,

.jkda-premium-detail-card .jkda-button {

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	padding: 9px 18px !important;

	border: 1.5px solid #CBD5E1 !important;

	border-radius: 8px !important;

	background: transparent !important;

	color: #0F172A !important;

	font-weight: 600 !important;

	font-size: 13.5px !important;

	text-decoration: none !important;

	transition: all 0.2s ease !important;

}



.jkda-premium-detail-card .jkda-button:hover,

.jkda-premium-detail-card .jkda-button:hover {

	border-color: #0F172A !important;

	background: #0F172A !important;

	color: #FFFFFF !important;

}



/* Bundles Grid & 2-Column Highlight Cards */

.jkda-bundle-grid,

.jkda-bundle-grid {

	display: grid !important;

	grid-template-columns: repeat(2, 1fr) !important;

	gap: 24px !important;

}



.jkda-bundle-highlight,

.jkda-bundle-highlight {

	background: #FFFFFF !important;

	border: 2px solid #EA580C !important;

	border-radius: 14px !important;

	padding: 24px !important;

	display: grid !important;

	grid-template-columns: 1fr auto !important;

	gap: 20px !important;

	align-items: center !important;

	box-shadow: 0 4px 16px rgba(234, 88, 12, 0.08) !important;

	transition: all 0.2s ease !important;

}



.jkda-bundle-highlight:hover,

.jkda-bundle-highlight:hover {

	box-shadow: 0 8px 28px rgba(234, 88, 12, 0.18) !important;

	transform: translateY(-2px) !important;

}



.jkda-bundle-highlight__badge,

.jkda-bundle-highlight__badge {

	display: inline-block !important;

	font-size: 11px !important;

	background: #FFF7ED !important;

	color: #EA580C !important;

	border: 1px solid #FFEDD5 !important;

	padding: 3px 10px !important;

	border-radius: 20px !important;

	font-weight: 800 !important;

	margin-bottom: 8px !important;

	letter-spacing: 0.02em !important;

}



.jkda-bundle-highlight__name,

.jkda-bundle-highlight__name {

	font-size: 16px !important;

	font-weight: 800 !important;

	color: #0F172A !important;

	margin-bottom: 4px !important;

	line-height: 1.35 !important;

}



.jkda-bundle-highlight__sub,

.jkda-bundle-highlight__sub {

	font-size: 13px !important;

	color: #64748B !important;

	line-height: 1.5 !important;

}



.jkda-bundle-highlight__pricing,

.jkda-bundle-highlight__pricing {

	text-align: right !important;

}



.jkda-bundle-highlight__old,

.jkda-bundle-highlight__old {

	font-size: 13px !important;

	color: #94A3B8 !important;

	text-decoration: line-through !important;

}



.jkda-bundle-highlight__new,

.jkda-bundle-highlight__new {

	font-family: var(--jkda-ff-display, 'Outfit', sans-serif) !important;

	font-size: 26px !important;

	font-weight: 800 !important;

	color: #EA580C !important;

	line-height: 1.1 !important;

}



.jkda-bundle-highlight__save,

.jkda-bundle-highlight__save {

	font-size: 11.5px !important;

	color: #0D9488 !important;

	font-weight: 700 !important;

}



.jkda-bundle-highlight__pricing .jkda-button,

.jkda-bundle-highlight__pricing .jkda-button {

	margin-top: 10px !important;

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	background: #EA580C !important;

	color: #FFFFFF !important;

	padding: 9px 18px !important;

	border-radius: 6px !important;

	font-size: 13px !important;

	font-weight: 700 !important;

	text-decoration: none !important;

	border: none !important;

	transition: all 0.2s ease !important;

}



.jkda-bundle-highlight__pricing .jkda-button:hover,

.jkda-bundle-highlight__pricing .jkda-button:hover {

	background: #C2410C !important;

	transform: translateY(-1px) !important;

}



/* Course / Video Teaser */

.jkda-course-teaser,

.jkda-course-teaser {

	background: #FFFFFF !important;

	border: 1.5px solid #E2E8F0 !important;

	border-radius: 16px !important;

	padding: 32px !important;

	display: flex !important;

	align-items: center !important;

	gap: 24px !important;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;

}



.jkda-course-teaser__icon,

.jkda-course-teaser__icon {

	font-size: 40px !important;

	background: #FFF7ED !important;

	width: 80px !important;

	height: 80px !important;

	border-radius: 12px !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	flex-shrink: 0 !important;

}



.jkda-course-teaser h3 {

	font-size: 1.25rem !important;

	font-weight: 700 !important;

	margin: 0 0 6px !important;

	color: #0F172A !important;

}



.jkda-course-teaser p {

	color: #475569 !important;

	margin: 0 0 14px !important;

	line-height: 1.55 !important;

}



.jkda-course-teaser .jkda-button,

.jkda-course-teaser .jkda-button {

	background: #EA580C !important;

	color: #FFFFFF !important;

	padding: 9px 20px !important;

	border-radius: 6px !important;

	font-size: 13.5px !important;

	font-weight: 700 !important;

	text-decoration: none !important;

	display: inline-flex !important;

	align-items: center !important;

	border: none !important;

}



/* Responsive Media Queries */

@media (max-width: 960px) {

	.jkda-resources-hero-layout,

	.jkda-resources-hero-layout {

		grid-template-columns: 1fr !important;

		gap: 28px !important;

	}

	.jkda-resources-hero-image-wrap,

	.jkda-resources-hero-image-wrap {

		max-width: 100% !important;

	}

	.jkda-lp-grid,

	.jkda-lp-grid {

		grid-template-columns: 1fr !important;

	}

	.jkda-premium-grid,

	.jkda-premium-grid {

		grid-template-columns: 1fr !important;

	}

	.jkda-bundle-grid,

	.jkda-bundle-grid {

		grid-template-columns: 1fr !important;

	}

	.jkda-resources-stats,

	.jkda-resources-stats {

		grid-template-columns: repeat(2, 1fr) !important;

	}

	.jkda-resources-stat:nth-child(2),

	.jkda-resources-stat:nth-child(2) {

		border-right: none !important;

	}

	.jkda-resources-stat:nth-child(3),

	.jkda-resources-stat:nth-child(3) {

		border-top: 1px solid #DDD9CF !important;

	}

	.jkda-resources-stat:nth-child(4),

	.jkda-resources-stat:nth-child(4) {

		border-top: 1px solid #DDD9CF !important;

		border-right: none !important;

	}

}



/* ============================================================

   LANGUAGE SWITCHER WIDGET (CR-002)

   ============================================================ */

.jkda-lang-switcher {

	display: inline-flex;

	align-items: center;

	gap: 4px;

	padding: 4px 8px;

	background: rgba(255, 255, 255, 0.08);

	border: 1px solid rgba(255, 255, 255, 0.16);

	border-radius: 20px;

	font-size: 13px;

	font-weight: 700;

	margin-right: 4px;

	line-height: 1;

	white-space: nowrap !important;

}

.jkda-lang-btn {

	background: transparent;

	border: none;

	color: #94A3B8;

	cursor: pointer;

	padding: 4px 8px;

	border-radius: 12px;

	font-weight: 700;

	font-family: inherit;

	font-size: 12.5px;

	line-height: 1;

	letter-spacing: 0.04em;

	transition: all 0.2s ease;

}

.jkda-lang-btn:hover {

	color: #FFFFFF;

}

.jkda-lang-btn.is-active {

	color: #FFFFFF !important;

	font-weight: 800 !important;

	background: rgba(255, 255, 255, 0.24) !important;

	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

}

.jkda-lang-sep {

	color: rgba(255, 255, 255, 0.3);

	font-size: 11px;

	user-select: none;

}

@media (max-width: 640px) {

	.jkda-lang-switcher {

		padding: 3px 6px;

		margin-right: 4px;

	}

	.jkda-lang-btn {

		padding: 2px 5px;

		font-size: 11.5px;

	}

}



/* ==========================================================================

   GLOBAL SEARCH RESULTS GRID & CARDS (SYNCHRONIZED WITH MOCKUPS/search.html)

   ========================================================================== */

.jkda-search-results-section {

    padding: 44px 0 72px;

    min-height: 520px;

    background: #F8FAFC;

    width: 100%;

}

.jkda-search-results-section .jkda-container {

    max-width: 1240px !important;

    margin: 0 auto !important;

    padding: 0 24px !important;

    width: 100% !important;

    box-sizing: border-box !important;

}

#search-results-grid {

    display: grid !important;

    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;

    gap: 24px !important;

    width: 100% !important;

    box-sizing: border-box !important;

}

.jkda-search-card {

    background: #FFFFFF !important;

    border: 1px solid #E2E8F0 !important;

    border-radius: 12px !important;

    overflow: hidden !important;

    display: flex !important;

    flex-direction: column !important;

    transition: transform 0.2s, box-shadow 0.2s !important;

    width: 100% !important;

    box-sizing: border-box !important;

}

.jkda-search-card:hover {

    transform: translateY(-4px) !important;

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;

}

.jkda-search-card__cover {

    height: 160px !important;

    max-height: 160px !important;

    min-height: 160px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 20px !important;

    text-align: center !important;

    text-decoration: none !important;

    position: relative !important;

    overflow: hidden !important;

    flex-shrink: 0 !important;

    box-sizing: border-box !important;

}

.jkda-search-card__cover-img {

    max-height: 100% !important;

    max-width: 100% !important;

    object-fit: contain !important;

    border-radius: 4px !important;

    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;

}

.jkda-search-card__body {

    padding: 20px !important;

    display: flex !important;

    flex-direction: column !important;

    flex: 1 !important;

}

.jkda-search-card__meta {

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    margin-bottom: 10px !important;

}

.jkda-search-card__badge {

    font-size: 11px !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.04em !important;

}

.jkda-search-card__sku {

    font-size: 11px !important;

    color: #64748B !important;

    font-family: monospace !important;

}

.jkda-search-card__title {

    font-size: 16px !important;

    font-weight: 700 !important;

    margin: 0 0 8px !important;

    line-height: 1.35 !important;

}

.jkda-search-card__title a {

    color: #0F172A !important;

    text-decoration: none !important;

}

.jkda-search-card__title a:hover {

    color: #EA580C !important;

}

.jkda-search-card__desc {

    font-size: 13px !important;

    color: #475569 !important;

    line-height: 1.5 !important;

    margin: 0 0 16px !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 3 !important;

    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

    flex: 1 !important;

}

.jkda-search-card__tools {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 6px !important;

    margin-bottom: 16px !important;

}

.jkda-search-card__tool-pill {

    background: #F1F5F9 !important;

    color: #475569 !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    padding: 3px 8px !important;

    border-radius: 4px !important;

    border: 1px solid #E2E8F0 !important;

    display: inline-flex !important;

    align-items: center !important;

}

.jkda-search-card__footer {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 8px !important;

    padding-top: 14px !important;

    border-top: 1px solid #F1F5F9 !important;

}

.jkda-search-card__price {

    font-size: 17px !important;

    font-weight: 800 !important;

    color: #EA580C !important;

}

.jkda-search-card__cta {

    background: #EA580C !important;

    color: #FFFFFF !important;

    padding: 6px 14px !important;

    border-radius: 6px !important;

    font-size: 12.5px !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    display: inline-flex !important;

    align-items: center !important;

}

.jkda-search-card__cta:hover {

    background: #C2410C !important;

}



/* Shop Section Anchor Offsets & Edition Filter Bar */

#jkda-shop-books,

#jkda-shop-bundles,

#jkda-shop-pfs,

#jkda-shop-csp,

#jkda-shop-snp {

    scroll-margin-top: 140px !important;

}



.jkda-edition-tab:hover {

    background: #F97316 !important;

    color: #FFFFFF !important;

}



/* ==========================================================================

   GLOBAL SEARCH HERO, TOOLBAR & FILTER STYLES (MATCHING MOCKUPS/search.html)

   ========================================================================== */

.jkda-search-hero {

    background: linear-gradient(180deg, #0B1120 0%, #0F172A 100%) !important;

    padding: 56px 24px 48px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

    width: 100% !important;

    box-sizing: border-box !important;

}

.jkda-search-hero__inner {

    max-width: 1240px !important;

    margin: 0 auto !important;

    padding: 0 24px !important;

    box-sizing: border-box !important;

}

.jkda-search-breadcrumb {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin-bottom: 16px !important;

    font-size: 13.5px !important;

}

.jkda-search-breadcrumb a {

    color: #94A3B8 !important;

    text-decoration: none !important;

    transition: color 0.2s !important;

}

.jkda-search-breadcrumb a:hover {

    color: #FFFFFF !important;

}

.jkda-search-breadcrumb-sep {

    color: #475569 !important;

}

.jkda-search-title {

    font-size: clamp(2rem, 3.8vw, 2.6rem) !important;

    font-weight: 800 !important;

    color: #FFFFFF !important;

    margin: 0 0 12px !important;

    letter-spacing: -0.02em !important;

    line-height: 1.2 !important;

}

.jkda-search-subtitle {

    font-size: 16px !important;

    color: #94A3B8 !important;

    max-width: 760px !important;

    margin: 0 0 28px !important;

    line-height: 1.6 !important;

}

.jkda-search-form-wrap {

    max-width: 780px !important;

}

.jkda-live-search-box {

    display: flex !important;

    gap: 10px !important;

    background: #FFFFFF !important;

    padding: 6px !important;

    border-radius: 12px !important;

    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35) !important;

    border: 2px solid rgba(255, 255, 255, 0.2) !important;

}

.jkda-live-search-input-wrap {

    display: flex !important;

    align-items: center !important;

    flex: 1 !important;

    padding-left: 14px !important;

}

.jkda-live-search-icon {

    font-size: 18px !important;

    color: #64748B !important;

    margin-right: 10px !important;

}

.jkda-live-search-input {

    border: none !important;

    box-shadow: none !important;

    font-size: 16px !important;

    padding: 12px 0 !important;

    flex: 1 !important;

    outline: none !important;

    color: #0F172A !important;

    background: transparent !important;

    font-family: inherit !important;

}

.jkda-search-clear-btn {

    display: none;

    background: none !important;

    border: none !important;

    font-size: 18px !important;

    color: #94A3B8 !important;

    cursor: pointer !important;

    padding: 6px 12px !important;

    line-height: 1 !important;

}

.jkda-search-clear-btn:hover {

    color: #0F172A !important;

}

.jkda-search-submit-btn {

    padding: 0 32px !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    border-radius: 8px !important;

    background: #EA580C !important;

    color: #FFFFFF !important;

    border: none !important;

    cursor: pointer !important;

    transition: background 0.2s ease !important;

}

.jkda-search-submit-btn:hover {

    background: #C2410C !important;

}

.jkda-topic-tags-row {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    flex-wrap: wrap !important;

    margin-top: 16px !important;

}

.jkda-topic-tag-label {

    font-size: 12.5px !important;

    font-weight: 700 !important;

    color: #F59E0B !important;

    text-transform: uppercase !important;

    letter-spacing: 0.05em !important;

}

.jkda-topic-tag {

    background: rgba(255, 255, 255, 0.08) !important;

    color: #E2E8F0 !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    padding: 5px 12px !important;

    border-radius: 20px !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;

    text-decoration: none !important;

    font-family: inherit !important;

}

.jkda-topic-tag:hover {

    background: #EA580C !important;

    color: #FFFFFF !important;

    border-color: #EA580C !important;

}

.jkda-search-toolbar {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    flex-wrap: wrap !important;

    gap: 18px !important;

    margin-bottom: 28px !important;

    padding-bottom: 20px !important;

    border-bottom: 1px solid #E2E8F0 !important;

    width: 100% !important;

}

.jkda-search-query-heading {

    font-size: 18px !important;

    color: #0F172A !important;

    font-weight: 700 !important;

}

.jkda-search-query-text {

    color: #EA580C !important;

}

.jkda-search-matches-badge {

    font-size: 14px !important;

    font-weight: 500 !important;

    color: #64748B !important;

    margin-left: 8px !important;

}

.jkda-search-catalog-note {

    font-size: 13px !important;

    color: #94A3B8 !important;

    margin-top: 4px !important;

}

.jkda-search-filter-chips, .jkda-filter-chips {

    display: flex !important;

    gap: 10px !important;

    flex-wrap: wrap !important;

    margin-bottom: 32px !important;

    width: 100% !important;

}

.jkda-topic-tag {

    background: rgba(255, 255, 255, 0.08) !important;

    color: #E2E8F0 !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    border-radius: 20px !important;

    padding: 6px 14px !important;

    font-size: 12.5px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;

    font-family: inherit !important;

    line-height: 1.4 !important;

    white-space: nowrap !important;

    outline: none !important;

}

.jkda-topic-tag:hover {

    background: #FF9933 !important;

    color: #FFFFFF !important;

    border-color: #FF9933 !important;

    transform: translateY(-1px) !important;

}

.jkda-chip, .jkda-search-chip {

    padding: 8px 18px !important;

    border-radius: 24px !important;

    border: 1px solid #CBD5E1 !important;

    background: #FFFFFF !important;

    color: #475569 !important;

    font-size: 13.5px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;

    font-family: inherit !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    outline: none !important;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;

}

.jkda-chip:hover, .jkda-search-chip:hover {

    border-color: #FF9933 !important;

    color: #FF9933 !important;

    transform: translateY(-1px) !important;

}

.jkda-chip.is-active, .jkda-search-chip.is-active {

    background: #0F172A !important;

    color: #FFFFFF !important;

    border-color: #0F172A !important;

    box-shadow: 0 4px 12px rgba(15,23,42,0.18) !important;

}

.jkda-search-card__badge {

    font-size: 11px !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.05em !important;

}

.jkda-search-card__sku {

    font-size: 11px !important;

    font-family: monospace, monospace !important;

    color: #94A3B8 !important;

}

.jkda-search-card__cta {

    font-size: 12.5px !important;

    font-weight: 700 !important;

    color: #FFFFFF !important;

    background: #0F172A !important;

    padding: 7px 14px !important;

    border-radius: 6px !important;

    text-decoration: none !important;

    transition: background 0.2s ease !important;

    white-space: nowrap !important;

    display: inline-block !important;

}

.jkda-search-card__cta:hover {

    background: #FF9933 !important;

    color: #FFFFFF !important;

}

.jkda-search-card__tool-pill.is-matched {

    background: #FEF08A !important;

    color: #854D0E !important;

    border-color: #FACC15 !important;

    font-weight: 700 !important;

    box-shadow: 0 0 6px rgba(250, 204, 21, 0.45) !important;

}

mark.jkda-search-highlight {

    background: #FEF08A !important;

    color: #854D0E !important;

    padding: 1px 4px !important;

    border-radius: 3px !important;

    font-weight: 700 !important;

    box-shadow: 0 0 4px rgba(254, 240, 138, 0.6) !important;

}