/* ============================================================
   FUNDA THEME — main.css v1.1.0
   Updated: dark #1c2233, tighter spacing, gradient enroll btn,
   2-col mobile courses, redesigned single-course, contact page.
   ============================================================ */

/* ============================================================
   1. ROOT VARIABLES
   ============================================================ */
:root {
    /* === CORE BRAND === */
    --color-primary: #E63012;
    --color-primary-dark: #C4280F;
    --color-primary-light: #FEE2E2;
    --color-orange: #FF8C00;
    --color-orange-light: #FFF3E0;
    --color-gradient: linear-gradient(135deg, #E63012 0%, #FF8C00 100%);

    /* === ENROLLMENT / POSITIVE — warm orange-red gradient per reference === */
    --color-enroll: #E63012;
    --color-enroll-end: #FF8C00;
    --color-enroll-gradient: linear-gradient(135deg, #E63012 0%, #FF8C00 100%);
    --color-success: #E63012;
    --color-success-dark: #C4280F;
    --color-success-light: #FEE2E2;
    --color-success-lighter: #FFF8F5;
    --color-success-gradient: linear-gradient(135deg, #E63012 0%, #FF8C00 100%);

    /* === NEUTRALS — #1c2233 replaces #0D0D0D === */
    --color-dark: #1c2233;
    --color-dark-soft: #2a3347;
    --color-text: #3d4a63;
    --color-text-light: #64748B;
    --color-text-lighter: #94A3B8;
    --color-border: #E2E8F0;
    --color-border-light: #F1F5F9;
    --color-bg: #FFFFFF;
    --color-bg-subtle: #F8FAFC;
    --color-bg-warm: #FFF8F5;
    --color-bg-dark: #1c2233;

    /* === LMS SEMANTIC === */
    --color-level-beginner: #10B981;
    --color-level-intermediate: #FF8C00;
    --color-level-advanced: #E63012;
    --color-quiz-correct: #10B981;
    --color-quiz-correct-light: #D1FAE5;
    --color-quiz-wrong: #E63012;
    --color-quiz-wrong-light: #FEE2E2;
    --color-video-bg: #1c2233;
    --progress-track: var(--color-border-light);
    --progress-fill: #E63012;

    /* === FONTS === */
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; /* overridden by Customizer */
    --font-body: 'DM Sans', system-ui, sans-serif; /* overridden by Customizer */

    /* === RADIUS === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* === SHADOWS === */
    --shadow-sm: 0 1px 3px rgba(28,34,51,.06);
    --shadow-md: 0 4px 16px rgba(28,34,51,.1);
    --shadow-lg: 0 12px 40px rgba(28,34,51,.12);
    --shadow-xl: 0 24px 60px rgba(28,34,51,.16);
    --shadow-glow: 0 8px 32px rgba(230,48,18,.25);
    --shadow-glow-success: 0 8px 32px rgba(230,48,18,.2);

    /* === LAYOUT === */
    --container-max: 1200px;
    --header-height: 70px;
    --section-pad: 40px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) { :root { --section-pad: 56px; } }
@media (min-width: 1024px) { :root { --section-pad: 72px; } }

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-primary); }
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-dark);
    margin: 0 0 .5em;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.375rem, 4vw, 2rem); }
h3 { font-size: clamp(1.125rem, 3vw, 1.375rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.5em; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
::selection { background: var(--color-primary); color: #fff; }

/* ============================================================
   3. LAYOUT UTILITIES
   ============================================================ */
.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.sec { padding: var(--section-pad) 0; }
.sec-head { text-align: center; margin-bottom: 36px; }
.sec-head .eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}
.sec-head p { color: var(--color-text-light); max-width: 600px; margin: 8px auto 0; }
.text-gradient {
    background: var(--color-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: fixed; top: 16px; left: 16px; z-index: 9999; padding: 12px 20px; background: var(--color-dark); color: #fff; border-radius: var(--radius-md); }

/* ============================================================
   4. BUTTONS — all use gradient per reference image
   ============================================================ */
.btn, .button, button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    line-height: 1;
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
}
.btn-lg { padding: 14px 36px; font-size: .95rem; }
.btn-sm { padding: 8px 18px; font-size: .8rem; }

/* Primary = brand gradient */
.btn-primary {
    background: linear-gradient(135deg, #E63012 0%, #FF8C00 100%);
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(230,48,18,.28);
}
.btn-primary:hover { box-shadow: 0 6px 28px rgba(230,48,18,.4); transform: translateY(-1px); color: #fff !important; }

/* Enroll / Success = same gradient per reference (not green) */
.btn-enroll, .btn-success {
    background: linear-gradient(135deg, #E63012 0%, #FF8C00 100%);
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(230,48,18,.28);
}
.btn-enroll:hover, .btn-success:hover { box-shadow: 0 6px 28px rgba(230,48,18,.4); transform: translateY(-1px); color: #fff !important; }

.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-dark); }
.btn-outline:hover { background: var(--color-bg-subtle); border-color: var(--color-dark); color: var(--color-dark); }
.btn-outline-dark { background: transparent; border-color: var(--color-dark); color: var(--color-dark); }
.btn-outline-dark:hover { background: var(--color-dark); color: #fff; }
.btn-outline-white { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn-outline-white:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn-white { background: #fff; color: var(--color-dark); }
.btn-white:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-danger { background: var(--color-primary); color: #fff; }
.btn-ghost { background: transparent; color: var(--color-text); }
.btn-ghost:hover { background: var(--color-border-light); color: var(--color-dark); }
.btn-block { display: flex; width: 100%; }

/* ============================================================
   5. BADGES
   ============================================================ */
.badge, .pill {
    display: inline-block; padding: 3px 10px;
    border-radius: var(--radius-full); font-size: .72rem; font-weight: 700; line-height: 1.4;
}
.badge-primary { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-orange { background: var(--color-orange-light); color: #B45309; }
.badge-success { background: var(--color-success-light); color: var(--color-success-dark); }
.badge-dark { background: var(--color-dark); color: #fff; }
.badge-new { background: var(--color-orange); color: #fff; }
.badge-sale { background: var(--color-primary); color: #fff; }
.level-beginner { background: #D1FAE5; color: #065F46; }
.level-intermediate { background: var(--color-orange-light); color: #B45309; }
.level-advanced { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* ============================================================
   6. SITE HEADER
   ============================================================ */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    height: var(--header-height);
    display: flex; align-items: center;
    transition: box-shadow 0.2s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.site-branding { display: flex; align-items: center; gap: 10px; }
.site-branding img { max-height: 38px; width: auto; }
.site-branding .site-title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--color-dark); }

/* Primary nav */
.primary-nav { display: none; }
@media (min-width: 1024px) {
    .primary-nav { display: block; }
    .primary-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
    .primary-nav a { display: block; padding: 8px 14px; font-weight: 500; font-size: .9rem; color: var(--color-text); border-radius: var(--radius-md); transition: var(--transition); }
    .primary-nav a:hover, .primary-nav .current-menu-item > a { background: var(--color-bg-subtle); color: var(--color-dark); }
    .primary-nav .menu-item-has-children { position: relative; }
    .primary-nav .sub-menu {
        position: absolute; top: calc(100% + 8px); left: 0;
        background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
        min-width: 200px; padding: 8px; box-shadow: var(--shadow-lg);
        opacity: 0; visibility: hidden; transform: translateY(-6px);
        transition: var(--transition); list-style: none;
    }
    .primary-nav .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
    .primary-nav .sub-menu a { padding: 9px 12px; border-radius: var(--radius-sm); }
}

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--radius-md);
    color: var(--color-dark); background: transparent; transition: var(--transition); position: relative;
}
.header-icon:hover { background: var(--color-bg-subtle); color: var(--color-primary); }
.header-icon svg { width: 19px; height: 19px; }
.funda-cart-count {
    position: absolute; top: -4px; right: -4px;
    min-width: 17px; height: 17px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
    background: var(--color-primary); color: #fff;
    border-radius: var(--radius-full); font-size: .65rem; font-weight: 700;
    opacity: 0; transform: scale(0.8); transition: var(--transition);
}
.funda-cart-count.has-items { opacity: 1; transform: scale(1); }

/* Hamburger — 3 UNEQUAL lines */
.menu-toggle {
    display: inline-flex; flex-direction: column; justify-content: center;
    align-items: flex-end; gap: 5px;
    width: 38px; height: 38px; background: transparent;
    border-radius: var(--radius-md); padding: 8px;
}
.menu-toggle:hover { background: var(--color-bg-subtle); }
.menu-toggle span { display: block; height: 2px; background: var(--color-dark); border-radius: 2px; transition: var(--transition); }
.menu-toggle span:nth-child(1) { width: 100%; }
.menu-toggle span:nth-child(2) { width: 65%; }
.menu-toggle span:nth-child(3) { width: 80%; }
@media (min-width: 1024px) { .menu-toggle { display: none; } }

/* Hamburger open state */
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 100%; }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 100%; }
body.menu-open { overflow: hidden; }

/* ============================================================
   7. MOBILE MENU
   ============================================================ */
.mobile-menu-overlay { position: fixed; inset: 0; background: rgba(28,34,51,.5); z-index: 998; opacity: 0; visibility: hidden; transition: var(--transition); }
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }
.mobile-menu {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(300px, 85vw); background: #fff; z-index: 999;
    transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column; overflow-y: auto;
}
.mobile-menu.active { transform: translateX(0); }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.mobile-menu-close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); }
.mobile-menu-close:hover { background: var(--color-bg-subtle); }
.mobile-menu nav { padding: 12px 0; }
.mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu a { display: block; padding: 12px 20px; font-weight: 500; color: var(--color-text); }
.mobile-menu a:hover { background: var(--color-bg-subtle); color: var(--color-primary); }
.mobile-menu .sub-menu { display: none; background: var(--color-bg-subtle); padding: 4px 0; }
.mobile-menu .sub-menu.active { display: block; }
.mobile-menu .sub-menu a { padding-left: 36px; font-size: .88rem; }
.mobile-menu-footer { margin-top: auto; padding: 16px 20px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; }

/* ============================================================
   8. SEARCH OVERLAY
   ============================================================ */
.search-overlay { position: fixed; inset: 0; background: rgba(28,34,51,.6); z-index: 1000; opacity: 0; visibility: hidden; transition: var(--transition); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.search-overlay.active { opacity: 1; visibility: visible; }
.search-overlay-inner { width: min(600px, 90vw); background: #fff; border-radius: var(--radius-xl); padding: 28px; box-shadow: var(--shadow-xl); transform: translateY(-16px); transition: var(--transition); }
.search-overlay.active .search-overlay-inner { transform: translateY(0); }
.search-overlay h3 { margin: 0 0 16px; font-size: 1.1rem; }
.search-overlay form { display: flex; gap: 8px; }
.search-overlay input[type="search"] { flex: 1; padding: 12px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: .95rem; }
.search-overlay input[type="search"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.search-overlay-close { position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; background: #fff; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }

/* ============================================================
   9. SIDE CART
   ============================================================ */
.side-cart-overlay { position: fixed; inset: 0; background: rgba(28,34,51,.5); z-index: 998; opacity: 0; visibility: hidden; transition: var(--transition); }
.side-cart-overlay.active { opacity: 1; visibility: visible; }
.side-cart { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 90vw); background: #fff; z-index: 999; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; }
.side-cart.active { transform: translateX(0); }
.side-cart-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--color-border); }
.side-cart-header h3 { margin: 0; font-size: 1rem; }
.side-cart-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.side-cart .mini_cart_item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border-light); position: relative; }
.side-cart .mini_cart_item img { width: 60px; height: 60px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; }
.side-cart .mini_cart_item a:not(.remove) { display: block; font-weight: 600; color: var(--color-dark); flex: 1; font-size: .9rem; }
.side-cart .mini_cart_item .remove { position: absolute; top: 12px; right: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--color-border-light); color: var(--color-text-light) !important; text-align: center; line-height: 22px; font-size: 14px; }
.side-cart .mini_cart_item .remove:hover { background: var(--color-primary); color: #fff !important; }
.side-cart .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 14px 0; border-top: 2px solid var(--color-border); font-weight: 700; }
.side-cart .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--color-border); }
.side-cart .woocommerce-mini-cart__buttons .button { display: inline-flex; align-items: center; justify-content: center; padding: 13px 20px; border-radius: var(--radius-full); font-weight: 600; font-size: .9rem; }
.side-cart .woocommerce-mini-cart__buttons .wc-forward:not(.checkout) { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-dark); }
.side-cart .woocommerce-mini-cart__buttons .checkout { background: linear-gradient(135deg, #E63012 0%, #FF8C00 100%); color: #fff; box-shadow: 0 4px 18px rgba(230,48,18,.28); }
.side-cart .woocommerce-mini-cart__empty-message { text-align: center; color: var(--color-text-light); padding: 40px 0; }

/* ============================================================
   10. HERO
   ============================================================ */
.funda-hero {
    position: relative; padding: var(--section-pad) 0;
    background: var(--color-bg-warm); overflow: hidden;
}
.funda-hero::before {
    content: ''; position: absolute; top: -80px; right: -80px;
    width: 340px; height: 340px;
    background: var(--color-gradient); border-radius: 50%;
    opacity: 0.07; filter: blur(60px);
}
.funda-hero::after {
    content: ''; position: absolute; bottom: -60px; left: -80px;
    width: 260px; height: 260px;
    background: linear-gradient(135deg, #FF8C00, #E63012); border-radius: 50%;
    opacity: 0.05; filter: blur(60px);
}
.funda-hero .wrap { position: relative; z-index: 2; }
.funda-hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 1024px) { .funda-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.funda-hero h1 { margin-bottom: 14px; }
.funda-hero .lead { font-size: 1.05rem; color: var(--color-text-light); margin-bottom: 28px; max-width: 520px; }
.funda-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.funda-hero-stats { display: flex; flex-wrap: wrap; gap: 24px; }
.funda-hero-stat .num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--color-dark); line-height: 1; }
.funda-hero-stat .label { font-size: .8rem; color: var(--color-text-light); margin-top: 3px; }
.funda-hero-visual { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); }
.funda-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-float-card { position: absolute; background: #fff; padding: 10px 14px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; }
.hero-float-card.top { top: 14px; right: 14px; }
.hero-float-card.bottom { bottom: 14px; left: 14px; }
.hero-float-card .icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: linear-gradient(135deg, #E63012, #FF8C00); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hero-float-card .text .num { font-weight: 800; color: var(--color-dark); line-height: 1; font-size: .9rem; }
.hero-float-card .text .label { font-size: .7rem; color: var(--color-text-light); }
@media (max-width: 600px) { .hero-float-card { display: none; } }

/* ============================================================
   11. COURSE CARD
   ============================================================ */
.course-card {
    display: flex; flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: var(--transition); height: 100%;
}
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.course-card-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--color-bg-subtle); }
.course-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.course-card:hover .course-card-thumb img { transform: scale(1.04); }
.course-card-thumb .level { position: absolute; top: 10px; left: 10px; }
.course-card-thumb .price-tag { position: absolute; bottom: 10px; right: 10px; background: #fff; padding: 5px 10px; border-radius: var(--radius-full); font-weight: 700; font-size: .85rem; color: var(--color-dark); box-shadow: var(--shadow-sm); }
.course-card-thumb .price-tag.free { background: linear-gradient(135deg, #E63012, #FF8C00); color: #fff; }
.course-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.course-card-category { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.course-card h3 { font-size: 1rem; margin: 0 0 10px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-card h3 a { color: var(--color-dark); }
.course-card h3 a:hover { color: var(--color-primary); }
.course-card-instructor { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--color-text-light); margin-bottom: 10px; }
.course-card-instructor img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.course-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .75rem; color: var(--color-text-light); margin-bottom: 12px; margin-top: auto; }
.course-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.course-card-meta svg { width: 13px; height: 13px; }
.course-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--color-border-light); }
.course-card-rating .stars { color: var(--color-orange); font-weight: 700; font-size: .85rem; }
.course-card-rating .count { font-size: .75rem; color: var(--color-text-light); }
.course-card-footer .price-display { font-weight: 800; color: var(--color-dark); font-family: var(--font-display); font-size: .95rem; }
.course-card-footer .price-display del { color: var(--color-text-lighter); font-weight: 400; font-size: .8em; margin-right: 4px; }
/* Add-to-cart button on card */
.course-card-footer .btn-enroll-sm {
    font-size: .8rem; padding: 7px 14px;
    background: linear-gradient(135deg, #E63012 0%, #FF8C00 100%);
    color: #fff; border-radius: var(--radius-full); font-weight: 700;
    box-shadow: 0 3px 12px rgba(230,48,18,.2);
}
.course-card-footer .btn-enroll-sm:hover { box-shadow: 0 4px 18px rgba(230,48,18,.35); transform: translateY(-1px); color: #fff; }

/* ============================================================
   12. COURSE GRID — 2 cols mobile (Rule 20 extended to courses)
   ============================================================ */
.funda-course-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 on mobile */
    gap: 14px;
}
@media (min-width: 768px) { .funda-course-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1024px) { .funda-course-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (min-width: 1280px) { .funda-course-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   13. CATEGORY CARDS
   ============================================================ */
.funda-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .funda-categories { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .funda-categories { grid-template-columns: repeat(6, 1fr); gap: 16px; } }
.category-card { display: flex; flex-direction: column; align-items: center; padding: 22px 12px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-align: center; transition: var(--transition); }
.category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.category-card .icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-bg-warm); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.4rem; transition: var(--transition); }
.category-card:hover .icon { background: linear-gradient(135deg, #E63012, #FF8C00); color: #fff; }
.category-card .name { font-family: var(--font-display); font-weight: 700; color: var(--color-dark); font-size: .88rem; }
.category-card .count { font-size: .75rem; color: var(--color-text-light); margin-top: 2px; }

/* ============================================================
   14. FEATURE CARDS
   ============================================================ */
.funda-features { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .funda-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .funda-features { grid-template-columns: repeat(4, 1fr); } }
.feature-card { background: var(--color-bg); padding: 24px 20px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); transition: var(--transition); }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.feature-card .icon { width: 44px; height: 44px; background: linear-gradient(135deg, #E63012, #FF8C00); color: #fff; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.feature-card h3 { font-size: 1rem; margin-bottom: 6px; }
.feature-card p { margin: 0; color: var(--color-text-light); font-size: .88rem; }

/* ============================================================
   15. INSTRUCTOR CARDS
   ============================================================ */
.instructor-card { text-align: center; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px 16px; transition: var(--transition); }
.instructor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.instructor-card img { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 12px; object-fit: cover; border: 3px solid var(--color-bg-warm); }
.instructor-card h3 { font-size: .95rem; margin-bottom: 4px; }
.instructor-card .bio { font-size: .82rem; color: var(--color-text-light); margin-bottom: 10px; }
.instructor-card .stats { display: flex; justify-content: center; gap: 14px; font-size: .78rem; color: var(--color-text-light); }
.instructor-card .stats span strong { color: var(--color-dark); font-weight: 700; }

/* ============================================================
   16. TESTIMONIALS
   ============================================================ */
.funda-testimonials { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .funda-testimonials { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.testimonial { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px 20px; position: relative; }
.testimonial::before { content: '\201C'; position: absolute; top: 12px; right: 18px; font-size: 3.5rem; font-family: Georgia, serif; color: var(--color-primary-light); line-height: 1; }
.testimonial .rating { color: var(--color-orange); margin-bottom: 10px; font-size: .9rem; }
.testimonial p { color: var(--color-text); line-height: 1.7; font-size: .9rem; }
.testimonial .author { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border-light); }
.testimonial .author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.testimonial .author .name { font-weight: 700; color: var(--color-dark); font-size: .88rem; }
.testimonial .author .role { font-size: .78rem; color: var(--color-text-light); }

/* ============================================================
   17. CTA SECTION
   ============================================================ */
.funda-cta {
    position: relative; overflow: hidden;
    background: var(--color-dark); color: #fff;
    border-radius: var(--radius-xl); padding: 52px 32px; text-align: center;
}
.funda-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #E63012, #FF8C00); opacity: 0.12; }
.funda-cta > * { position: relative; z-index: 2; }
.funda-cta h2 { color: #fff; font-size: clamp(1.5rem, 4vw, 2.25rem); }
.funda-cta p { color: rgba(255,255,255,.75); max-width: 540px; margin: 0 auto 24px; }
.funda-cta .cta-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ============================================================
   18. SINGLE COURSE — redesigned, less black, tighter
   ============================================================ */
.single-course-hero {
    background: var(--color-dark);
    color: #fff; padding: 40px 0;
    position: relative; overflow: hidden;
}
.single-course-hero::before {
    content: ''; position: absolute;
    top: -120px; right: -120px; width: 400px; height: 400px;
    background: linear-gradient(135deg, #E63012, #FF8C00);
    border-radius: 50%; opacity: 0.12; filter: blur(60px);
}
.single-course-hero::after {
    content: ''; position: absolute;
    bottom: -80px; left: 30%; width: 300px; height: 300px;
    background: #FF8C00; border-radius: 50%; opacity: 0.06; filter: blur(60px);
}
.single-course-hero .wrap { position: relative; z-index: 2; }
.single-course-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 1024px) { .single-course-grid { grid-template-columns: 1.35fr 1fr; gap: 44px; } }
.single-course-breadcrumb { font-size: .78rem; color: rgba(255,255,255,.5); margin-bottom: 14px; }
.single-course-breadcrumb a { color: rgba(255,255,255,.7); }
.single-course-breadcrumb a:hover { color: #fff; }
.single-course-category {
    display: inline-block; background: linear-gradient(135deg, #E63012, #FF8C00);
    color: #fff; padding: 4px 12px; border-radius: var(--radius-full);
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px;
}
.single-course-hero h1 { color: #fff; margin-bottom: 12px; font-size: clamp(1.5rem, 4vw, 2.25rem); }
.single-course-subtitle { color: rgba(255,255,255,.8); font-size: 1rem; margin-bottom: 20px; line-height: 1.6; }
.single-course-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; font-size: .83rem; color: rgba(255,255,255,.75); }
.single-course-meta span { display: inline-flex; align-items: center; gap: 5px; }
.single-course-meta .rating { color: var(--color-orange); font-weight: 700; }
.single-course-instructor-meta { display: flex; align-items: center; gap: 8px; }
.single-course-instructor-meta img { width: 28px; height: 28px; border-radius: 50%; }
.single-course-instructor-meta a { color: var(--color-orange); font-weight: 600; font-size: .88rem; }

/* Price card */
.course-price-card {
    background: #fff; color: var(--color-text);
    border-radius: var(--radius-xl); overflow: hidden;
    box-shadow: var(--shadow-xl);
    position: sticky; top: calc(var(--header-height) + 14px);
}
.course-price-card .preview { position: relative; aspect-ratio: 16/9; background: var(--color-dark); overflow: hidden; }
.course-price-card .preview img { width: 100%; height: 100%; object-fit: cover; }
.course-price-card .preview .play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(28,34,51,.45); color: #fff; cursor: pointer; transition: var(--transition);
}
.course-price-card .preview .play:hover { background: rgba(28,34,51,.6); }
.course-price-card .preview .play-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,.92); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.course-price-card .preview .play:hover .play-icon { transform: scale(1.1); background: #fff; }
.course-price-card-body { padding: 20px; }
.course-price { font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; color: var(--color-dark); line-height: 1; margin-bottom: 4px; }
.course-price del { color: var(--color-text-lighter); font-weight: 400; font-size: .9rem; margin-right: 6px; }
.course-price-save { color: var(--color-primary); font-weight: 600; font-size: .85rem; margin-bottom: 16px; }
.course-price-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.course-includes { border-top: 1px solid var(--color-border); padding-top: 16px; }
.course-includes h4 { font-size: .88rem; margin-bottom: 10px; }
.course-includes ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.course-includes li { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--color-text-light); }
.course-includes li svg { color: var(--color-primary); flex-shrink: 0; }

/* Mobile sticky enroll */
.course-mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: #fff; border-top: 1px solid var(--color-border); box-shadow: var(--shadow-xl);
    padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    transform: translateY(100%); transition: transform 0.3s ease;
}
.course-mobile-cta.active { transform: translateY(0); }
.course-mobile-cta .price { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--color-dark); }
.course-mobile-cta .btn { flex: 1; max-width: 180px; }
@media (min-width: 1024px) { .course-mobile-cta { display: none !important; } }

/* Content tabs */
.course-content-tabs { background: #fff; border-bottom: 1px solid var(--color-border); position: sticky; top: var(--header-height); z-index: 50; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.course-content-tabs ul { display: flex; list-style: none; padding: 0; margin: 0; max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.course-content-tabs a { display: block; padding: 14px 18px; font-weight: 600; font-size: .85rem; color: var(--color-text-light); border-bottom: 3px solid transparent; white-space: nowrap; transition: var(--transition); }
.course-content-tabs a:hover, .course-content-tabs a.active { color: var(--color-dark); border-bottom-color: var(--color-primary); }

/* Course content sections */
.single-course-section { padding: 36px 0; }
.single-course-section h2 { margin-bottom: 20px; }
.learning-points { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0; }
@media (min-width: 640px) { .learning-points { grid-template-columns: 1fr 1fr; } }
.learning-points li { display: flex; gap: 8px; align-items: flex-start; list-style: none; font-size: .9rem; }
.learning-points svg { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }

/* Curriculum */
.curriculum-section { margin-bottom: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.curriculum-section > summary { padding: 14px 18px; background: var(--color-bg-subtle); font-weight: 700; font-size: .9rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.curriculum-section > summary::-webkit-details-marker { display: none; }
.curriculum-section > summary::after { content: '+'; font-size: 1.25rem; color: var(--color-text-light); font-weight: 300; }
.curriculum-section[open] > summary::after { content: '−'; }
.curriculum-section[open] > summary { background: var(--color-bg-warm); }
.curriculum-section .lessons { list-style: none; padding: 0; margin: 0; }
.curriculum-section .lessons li { padding: 10px 18px; border-top: 1px solid var(--color-border-light); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .85rem; }
.curriculum-section .lessons .lesson-title { display: flex; align-items: center; gap: 8px; flex: 1; }
.curriculum-section .lessons .lesson-title svg { color: var(--color-text-light); flex-shrink: 0; width: 15px; height: 15px; }
.curriculum-section .lessons .duration { color: var(--color-text-light); font-size: .8rem; }
.curriculum-section .lessons .preview { color: var(--color-primary); font-weight: 700; font-size: .75rem; }

/* Reviews */
.course-reviews-summary { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; padding: 22px; background: var(--color-bg-subtle); border-radius: var(--radius-lg); }
@media (min-width: 600px) { .course-reviews-summary { grid-template-columns: 180px 1fr; align-items: center; } }
.reviews-avg { text-align: center; }
.reviews-avg .score { font-family: var(--font-display); font-size: 2.75rem; font-weight: 800; color: var(--color-dark); line-height: 1; }
.reviews-avg .stars { color: var(--color-orange); font-size: 1.1rem; margin: 4px 0; }
.reviews-avg .count { color: var(--color-text-light); font-size: .8rem; }
.reviews-breakdown { display: flex; flex-direction: column; gap: 5px; }
.reviews-breakdown-row { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.reviews-breakdown-row .label { width: 36px; color: var(--color-text-light); }
.reviews-breakdown-row .track { flex: 1; height: 7px; background: var(--color-border-light); border-radius: var(--radius-full); overflow: hidden; }
.reviews-breakdown-row .fill { height: 100%; background: var(--color-orange); border-radius: var(--radius-full); }
.reviews-breakdown-row .num { color: var(--color-text-light); min-width: 36px; text-align: right; }

/* ============================================================
   19. COURSE PLAYER
   ============================================================ */
.course-player { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - var(--header-height)); background: var(--color-bg-subtle); }
@media (min-width: 1024px) { .course-player { grid-template-columns: 320px 1fr; } }
.player-sidebar { background: #fff; border-right: 1px solid var(--color-border); overflow-y: auto; max-height: calc(100vh - var(--header-height)); position: sticky; top: var(--header-height); }
.player-sidebar-header { padding: 18px 20px; border-bottom: 1px solid var(--color-border); }
.player-sidebar-header h2 { font-size: .9rem; margin: 0 0 8px; }
.player-progress { margin-top: 10px; }
.player-progress-bar { height: 5px; background: var(--progress-track); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 4px; }
.player-progress-fill { height: 100%; background: linear-gradient(90deg, #E63012, #FF8C00); border-radius: var(--radius-full); transition: width 0.4s ease; }
.player-progress-text { font-size: .75rem; color: var(--color-text-light); }
.player-curriculum-section > summary { padding: 12px 18px; font-weight: 600; font-size: .85rem; cursor: pointer; list-style: none; }
.player-curriculum-section > summary::-webkit-details-marker { display: none; }
.player-curriculum-section { border-bottom: 1px solid var(--color-border-light); }
.player-curriculum-section .lessons { list-style: none; padding: 0 0 6px; margin: 0; }
.player-curriculum-section .lessons a { display: flex; align-items: center; gap: 8px; padding: 9px 18px 9px 36px; font-size: .82rem; color: var(--color-text); }
.player-curriculum-section .lessons a:hover { background: var(--color-bg-subtle); }
.player-curriculum-section .lessons a.active { background: var(--color-primary-light); color: var(--color-primary-dark); border-left: 3px solid var(--color-primary); font-weight: 600; }
.player-curriculum-section .lessons a.completed { color: var(--color-text-lighter); text-decoration: line-through; }
.player-curriculum-section .lessons svg { width: 13px; height: 13px; flex-shrink: 0; }
.player-main { padding: 20px; max-width: 960px; margin: 0 auto; width: 100%; }
.player-video { aspect-ratio: 16/9; background: var(--color-dark); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; }
.player-video iframe, .player-video video { width: 100%; height: 100%; border: 0; }
.player-lesson-header h1 { font-size: 1.375rem; margin-bottom: 6px; }
.player-lesson-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--color-text-light); font-size: .85rem; margin-bottom: 20px; }
.player-lesson-content { font-size: .95rem; line-height: 1.7; margin-bottom: 28px; }
.player-lesson-nav { display: flex; justify-content: space-between; gap: 10px; padding-top: 20px; border-top: 1px solid var(--color-border); margin-top: 24px; }
.player-drawer-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-weight: 600; font-size: .85rem; margin-bottom: 14px; }
@media (min-width: 1024px) { .player-drawer-toggle { display: none; } }
@media (max-width: 1023px) {
    .player-sidebar { display: none; position: fixed; inset: var(--header-height) 0 0 0; z-index: 90; background: #fff; max-height: none; }
    .player-sidebar.active { display: block; }
    .player-sidebar-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); }
}

/* ============================================================
   20. QUIZ
   ============================================================ */
.quiz-container { max-width: 680px; margin: 0 auto; }
.quiz-question { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
.quiz-question h3 { font-size: 1rem; margin-bottom: 14px; }
.quiz-options { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.quiz-options label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); font-size: .9rem; }
.quiz-options label:hover { border-color: var(--color-orange); background: var(--color-orange-light); }
.quiz-options label.correct { border-color: #10B981; background: #D1FAE5; color: #065F46; }
.quiz-options label.wrong { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); }

/* ============================================================
   21. DASHBOARD
   ============================================================ */
.funda-dashboard { background: var(--color-bg-subtle); min-height: 60vh; padding: 32px 0; }
.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1024px) { .dashboard-grid { grid-template-columns: 260px 1fr; } }
.dashboard-nav { background: #fff; border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); height: fit-content; position: sticky; top: calc(var(--header-height) + 14px); }
.dashboard-nav h3 { font-size: .78rem; margin-bottom: 10px; color: var(--color-text-lighter); text-transform: uppercase; letter-spacing: 0.07em; }
.dashboard-nav ul { list-style: none; padding: 0; margin: 0; }
.dashboard-nav a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--radius-md); color: var(--color-text); font-weight: 500; font-size: .88rem; transition: var(--transition); }
.dashboard-nav a:hover { background: var(--color-bg-subtle); color: var(--color-dark); }
.dashboard-nav a.active { background: var(--color-primary-light); color: var(--color-primary-dark); }
.dashboard-nav svg { width: 16px; height: 16px; }
.dashboard-content { background: #fff; border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.dashboard-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
@media (min-width: 768px) { .dashboard-stats { grid-template-columns: repeat(4, 1fr); } }
.stat-card { padding: 18px; background: var(--color-bg-subtle); border-radius: var(--radius-md); }
.stat-card .stat-icon { width: 38px; height: 38px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; color: #fff; }
.stat-card.c-success .stat-icon, .stat-card.c-primary .stat-icon { background: linear-gradient(135deg, #E63012, #FF8C00); }
.stat-card.c-orange .stat-icon { background: var(--color-orange); }
.stat-card.c-dark .stat-icon { background: var(--color-dark); }
.stat-card .stat-num { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; color: var(--color-dark); line-height: 1; }
.stat-card .stat-label { font-size: .8rem; color: var(--color-text-light); margin-top: 3px; }
.continue-learning { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; padding: 20px; background: var(--color-bg-warm); border-radius: var(--radius-lg); margin-bottom: 24px; }
@media (min-width: 640px) { .continue-learning { grid-template-columns: 180px 1fr auto; gap: 20px; } }
.continue-learning img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-md); }
.continue-learning h3 { font-size: 1rem; margin-bottom: 4px; }
.continue-learning .meta { color: var(--color-text-light); font-size: .85rem; margin-bottom: 8px; }
.continue-learning .progress-bar { height: 5px; background: var(--color-border-light); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 4px; }
.continue-learning .progress-fill { height: 100%; background: linear-gradient(90deg, #E63012, #FF8C00); }
.continue-learning .progress-text { font-size: .75rem; color: var(--color-text-light); }
.enrolled-course { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 10px; transition: var(--transition); }
@media (min-width: 600px) { .enrolled-course { grid-template-columns: 110px 1fr auto; gap: 16px; } }
.enrolled-course:hover { border-color: transparent; box-shadow: var(--shadow-sm); }
.enrolled-course img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); }
.enrolled-course h4 { margin: 0 0 5px; font-size: .9rem; }
.enrolled-course .progress-row { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--color-text-light); margin-top: 6px; }
.enrolled-course .progress-row .bar { flex: 1; max-width: 160px; height: 5px; background: var(--color-border-light); border-radius: var(--radius-full); overflow: hidden; }
.enrolled-course .progress-row .fill { height: 100%; background: linear-gradient(90deg, #E63012, #FF8C00); }

/* ============================================================
   22. SHOP / ARCHIVE — shares style with courses archive
   ============================================================ */
.shop-page { padding: 32px 0; }
.shop-header { margin-bottom: 24px; }
.shop-header h1 { margin-bottom: 6px; }
.shop-header p { color: var(--color-text-light); }
.shop-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1024px) { .shop-layout { grid-template-columns: 240px 1fr; } }
.shop-sidebar { background: #fff; padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); height: fit-content; }
.shop-sidebar .filter-group { margin-bottom: 20px; }
.shop-sidebar .filter-group:last-child { margin-bottom: 0; }
.shop-sidebar .filter-group h3 { font-size: .78rem; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-dark); }
.shop-sidebar label { display: flex; align-items: center; gap: 7px; padding: 5px 0; font-size: .88rem; cursor: pointer; }
.shop-sidebar label input[type="checkbox"] { accent-color: var(--color-primary); }
.shop-filter-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-weight: 600; font-size: .85rem; margin-bottom: 14px; }
@media (min-width: 1024px) { .shop-filter-toggle { display: none; } .shop-sidebar { display: block !important; position: static !important; } }
@media (max-width: 1023px) {
    .shop-sidebar { display: none; position: fixed; inset: 0; z-index: 999; background: #fff; max-height: 100vh; overflow-y: auto; padding: 20px; }
    .shop-sidebar.active { display: block; }
    .shop-sidebar-close { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--color-bg-subtle); border-radius: var(--radius-md); margin-bottom: 14px; }
}
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.shop-toolbar .results-count { color: var(--color-text-light); font-size: .85rem; }

/* ============================================================
   23. WOOCOMMERCE PRODUCT GRID — 2 cols mobile (Rule 20)
   ============================================================ */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
    direction: ltr !important; grid-auto-flow: row dense !important;
}
@media (min-width: 768px) { .woocommerce ul.products { gap: 18px !important; } }
@media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; gap: 22px !important; } }

/* Kill float-era classes — Rule 30 */
.woocommerce ul.products > *:not(li.product) { display: none !important; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; content: none !important; }
.woocommerce ul.products li.product {
    display: flex !important; flex-direction: column !important;
    float: none !important; clear: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden;
    transition: var(--transition); grid-column: auto !important; grid-row: auto !important;
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.woocommerce ul.products li.first, .woocommerce ul.products li.last { margin: 0 !important; clear: none !important; }
.woocommerce ul.products li.product a img { width: 100% !important; aspect-ratio: 16/9 !important; object-fit: cover !important; margin: 0 !important; border-radius: 0 !important; transition: transform 0.4s ease !important; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    padding: 12px 14px 6px !important; font-size: .95rem !important; font-weight: 700 !important;
    color: var(--color-dark) !important; font-family: var(--font-display) !important;
    line-height: 1.35 !important; display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden; margin: 0 !important;
}
.woocommerce ul.products li.product .price { padding: 0 14px !important; font-family: var(--font-display) !important; font-weight: 800 !important; color: var(--color-dark) !important; font-size: 1rem !important; margin: 0 0 10px !important; }
.woocommerce ul.products li.product .price del { color: var(--color-text-lighter) !important; font-weight: 400 !important; font-size: .8em !important; margin-right: 4px !important; }
.woocommerce ul.products li.product .price ins { text-decoration: none !important; }
.woocommerce ul.products li.product .star-rating { margin: 0 14px 10px !important; font-size: .8rem !important; color: var(--color-orange) !important; }
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart {
    display: block !important; margin: auto 14px 14px !important; padding: 10px 16px !important;
    text-align: center !important; border-radius: var(--radius-full) !important;
    font-weight: 700 !important; font-family: var(--font-display) !important; font-size: .85rem !important;
    text-decoration: none !important; transition: var(--transition) !important;
}
.woocommerce ul.products li.product .button {
    background-color: #E63012 !important;
    background-image: linear-gradient(135deg, #E63012 0%, #FF8C00 100%) !important;
    color: #fff !important; border: 0 !important;
    box-shadow: 0 3px 14px rgba(230,48,18,.25) !important;
}
.woocommerce ul.products li.product .button:hover { box-shadow: 0 5px 22px rgba(230,48,18,.38) !important; transform: translateY(-1px); }
.woocommerce ul.products li.product .added_to_cart { background: var(--color-dark) !important; color: #fff !important; margin-top: 4px !important; }

/* Sale flash */
.woocommerce span.onsale { position: absolute !important; top: 10px !important; left: 10px !important; background: var(--color-primary) !important; color: #fff !important; border: 0 !important; border-radius: var(--radius-full) !important; padding: 3px 10px !important; font-size: .7rem !important; font-weight: 700 !important; min-height: 0 !important; min-width: 0 !important; line-height: 1.4 !important; margin: 0 !important; }

/* ============================================================
   24. WC SINGLE PRODUCT
   ============================================================ */
.woocommerce div.product { padding: 32px 0; }
.woocommerce div.product .product_title { font-size: clamp(1.375rem, 3vw, 2rem); }
.woocommerce div.product p.price { font-family: var(--font-display); font-size: 1.625rem; font-weight: 800; color: var(--color-dark); margin: 10px 0 18px; }
.woocommerce div.product p.price del { color: var(--color-text-lighter); font-weight: 400; font-size: .85rem; }
.woocommerce div.product .woocommerce-product-gallery { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product form.cart .button {
    background-color: #E63012 !important; background-image: linear-gradient(135deg, #E63012 0%, #FF8C00 100%) !important;
    color: #fff !important; padding: 13px 30px !important; border-radius: var(--radius-full) !important;
    font-weight: 700 !important; font-family: var(--font-display) !important; border: 0 !important; font-size: .9rem !important;
    box-shadow: 0 4px 18px rgba(230,48,18,.28) !important;
}
.woocommerce div.product form.cart { display: flex; gap: 10px; align-items: center; margin: 18px 0; }
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce .quantity .qty { width: 68px; height: 46px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); text-align: center; font-weight: 600; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 20px; border: 0; border-bottom: 1px solid var(--color-border); display: flex; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 12px 18px !important; font-weight: 600 !important; font-size: .88rem !important; color: var(--color-text-light) !important; border-bottom: 3px solid transparent; transition: var(--transition); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--color-dark) !important; border-bottom-color: var(--color-primary); }

/* Select fields — Rule 29 */
.woocommerce select, .woocommerce .variations select, .woocommerce-ordering select, select.orderby {
    appearance: none !important; -webkit-appearance: none !important;
    padding: 10px 36px 10px 12px !important; border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center !important;
    font-size: .88rem !important; cursor: pointer !important;
}
.woocommerce select:focus { outline: none !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-light) !important; }

/* Related products — Rule 31 */
.woocommerce .related > h2, .woocommerce .upsells > h2 { float: none !important; clear: both !important; width: 100% !important; display: block !important; margin: 40px 0 20px !important; }

/* ============================================================
   25. CART & CHECKOUT — styled header, buttons, fields
   ============================================================ */
.woocommerce-cart-form, .woocommerce-checkout { position: relative; }

/* Cart page header */
.funda-cart-page-header { background: var(--color-dark); color: #fff; padding: 36px 0; margin-bottom: 0; }
.funda-cart-page-header h1 { color: #fff; margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); }

/* Checkout page header */
.funda-checkout-header { background: var(--color-dark); padding: 36px 0; }
.funda-checkout-header h1 { color: #fff; margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); }

.woocommerce-cart, .woocommerce-checkout { background: var(--color-bg-subtle); }
.woocommerce-cart .wrap, .woocommerce-checkout .wrap { padding-top: 32px; padding-bottom: 48px; }

.woocommerce table.shop_table { border: 0; border-collapse: separate; border-spacing: 0; border-radius: var(--radius-md); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.woocommerce table.shop_table th { background: var(--color-dark); color: #fff; font-family: var(--font-display); font-weight: 600; padding: 13px 16px; font-size: .85rem; letter-spacing: 0.02em; }
.woocommerce table.shop_table td { border-top: 1px solid var(--color-border-light); padding: 13px 16px; background: #fff; }
.woocommerce table.cart td.product-thumbnail img { width: 60px; height: 60px; border-radius: var(--radius-md); object-fit: cover; }
.woocommerce table.cart td.product-name a { font-weight: 600; color: var(--color-dark); font-size: .9rem; }
.woocommerce table.cart td.product-remove a.remove { width: 26px; height: 26px; line-height: 26px; background: var(--color-border-light); border-radius: 50%; color: var(--color-text-light) !important; font-size: 14px; text-align: center; }
.woocommerce table.cart td.product-remove a.remove:hover { background: var(--color-primary); color: #fff !important; }

.woocommerce .cart-collaterals { background: #fff; border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); margin-top: 20px; }
.woocommerce .cart-collaterals .cart_totals h2 { font-size: 1.1rem; margin-bottom: 14px; }
.woocommerce .wc-proceed-to-checkout .checkout-button {
    background-color: #E63012 !important; background-image: linear-gradient(135deg, #E63012 0%, #FF8C00 100%) !important;
    color: #fff !important; padding: 15px 28px !important; border-radius: var(--radius-full) !important;
    font-weight: 700 !important; font-size: .95rem !important; font-family: var(--font-display) !important;
    text-align: center; display: block; box-shadow: 0 4px 18px rgba(230,48,18,.28);
}
.woocommerce-checkout #payment { background: #fff; border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); margin-top: 20px; }
.woocommerce-checkout #payment #place_order {
    background-color: #E63012 !important; background-image: linear-gradient(135deg, #E63012 0%, #FF8C00 100%) !important;
    color: #fff !important; padding: 15px 28px !important; border-radius: var(--radius-full) !important;
    font-weight: 700 !important; font-size: .95rem !important; font-family: var(--font-display) !important;
    width: 100%; margin-top: 14px; box-shadow: 0 4px 18px rgba(230,48,18,.28);
}

/* Checkout layout */
.woocommerce-checkout #customer_details { background: #fff; border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.woocommerce-checkout h3 { font-size: 1.05rem; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }

/* All WC form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    padding: 11px 14px !important; border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important; width: 100%; font-size: .9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    outline: none; border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}
.woocommerce form .form-row label { font-weight: 600; margin-bottom: 5px; display: block; font-size: .85rem; color: var(--color-dark); }
.woocommerce form .form-row.validate-required label::after { content: ' *'; color: var(--color-primary); }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    padding: 14px 18px 14px 48px !important; border-radius: var(--radius-md) !important; border: 0 !important;
    margin-bottom: 18px !important;
}
.woocommerce-message { background: #D1FAE5 !important; color: #065F46 !important; }
.woocommerce-message::before { color: #065F46 !important; }
.woocommerce-info { background: var(--color-orange-light) !important; color: #B45309 !important; }
.woocommerce-info::before { color: #B45309 !important; }
.woocommerce-error { background: var(--color-primary-light) !important; color: var(--color-primary-dark) !important; }
.woocommerce-error::before { color: var(--color-primary-dark) !important; }

/* Empty cart */
.funda-empty-cart { text-align: center; padding: 56px 20px; }
.funda-empty-cart .icon { width: 80px; height: 80px; margin: 0 auto 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-warm); border-radius: 50%; color: var(--color-primary); }
.funda-empty-cart h2 { margin-bottom: 10px; }
.funda-empty-cart p { color: var(--color-text-light); max-width: 380px; margin: 0 auto 20px; }

/* ============================================================
   26. MY ACCOUNT
   ============================================================ */
.woocommerce-account .woocommerce { padding: 32px 0; }
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 20px; }
@media (min-width: 1024px) { .woocommerce-account .woocommerce-MyAccount-navigation { width: 240px; float: left; margin: 0; } .woocommerce-account .woocommerce-MyAccount-content { width: calc(100% - 266px); float: right; } }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 9px 12px; border-radius: var(--radius-md); color: var(--color-text); font-weight: 500; font-size: .88rem; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* ============================================================
   27. PAGINATION
   ============================================================ */
.woocommerce nav.woocommerce-pagination, .funda-pagination { margin-top: 32px; }
.woocommerce nav.woocommerce-pagination ul, .funda-pagination ul { display: flex; gap: 5px; justify-content: center; list-style: none; padding: 0; margin: 0; border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.funda-pagination a, .funda-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 10px;
    background: #fff !important; border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important; color: var(--color-text) !important;
    font-weight: 600; font-size: .85rem; text-decoration: none; transition: var(--transition);
}
.woocommerce nav.woocommerce-pagination ul li a:hover, .funda-pagination a:hover { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.woocommerce nav.woocommerce-pagination ul li span.current, .funda-pagination span.current {
    background-image: linear-gradient(135deg, #E63012 0%, #FF8C00 100%) !important;
    background-color: #E63012 !important; color: #fff !important; border-color: transparent !important;
}

/* ============================================================
   28. BLOG
   ============================================================ */
.funda-blog { padding: 32px 0; }
.funda-blog-layout { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 1024px) { .funda-blog-layout { grid-template-columns: 1fr 280px; } }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
.blog-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.blog-card-thumb { aspect-ratio: 16/9; overflow: hidden; }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-card-thumb img { transform: scale(1.04); }
.blog-card-body { padding: 16px; }
.blog-card-meta { font-size: .75rem; color: var(--color-text-light); margin-bottom: 6px; }
.blog-card h3 { font-size: .95rem; margin-bottom: 8px; line-height: 1.35; }
.blog-card h3 a { color: var(--color-dark); }
.blog-card h3 a:hover { color: var(--color-primary); }
.blog-card p { font-size: .85rem; color: var(--color-text-light); margin: 0 0 10px; }
.blog-card-more { color: var(--color-primary); font-weight: 600; font-size: .85rem; }
.single-post-hero { padding: 40px 0 20px; background: var(--color-bg-warm); }
.single-post-hero .wrap { max-width: 780px; }
.single-post-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--color-text-light); font-size: .85rem; margin-bottom: 14px; }
.single-post-content { padding: 28px 0 56px; }
.single-post-content .wrap { max-width: 700px; }
.single-post-content img { border-radius: var(--radius-lg); margin: 20px 0; }
.single-post-content h2, .single-post-content h3 { margin-top: 1.75em; }
.single-post-content blockquote { border-left: 4px solid var(--color-primary); background: var(--color-bg-warm); padding: 16px 20px; border-radius: var(--radius-md); margin: 20px 0; font-style: italic; }
.single-post-content pre { background: var(--color-dark); color: var(--color-orange); padding: 18px; border-radius: var(--radius-md); overflow-x: auto; font-size: .85rem; }
.single-post-content code { background: var(--color-bg-subtle); padding: 2px 5px; border-radius: 4px; font-size: .88em; }
.widget { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; }
.widget-title { font-size: .95rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 5px 0; border-bottom: 1px solid var(--color-border-light); font-size: .88rem; }
.widget ul li:last-child { border-bottom: 0; }
.widget ul li a:hover { color: var(--color-primary); }

/* ============================================================
   29. FOOTER
   ============================================================ */
.site-footer { background: var(--color-dark); color: rgba(255,255,255,.65); padding: 52px 0 20px; margin-top: 56px; }
.site-footer h3, .site-footer .widget-title { color: #fff; font-size: .95rem; margin-bottom: 16px; padding: 0; border: 0; }
.site-footer .widget { background: transparent; border: 0; padding: 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-brand img { max-height: 44px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.footer-brand p { margin-bottom: 18px; font-size: .86rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { padding: 3px 0; font-size: .86rem; }
.site-footer ul a:hover { color: #fff; }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: var(--transition); }
.footer-social a:hover { background: linear-gradient(135deg, #E63012, #FF8C00); transform: translateY(-2px); }
.footer-bottom { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .8rem; }
.footer-bottom a { color: rgba(255,255,255,.7); }
.footer-bottom a:hover { color: #fff; }

/* ============================================================
   30. FLOATING ELEMENTS
   ============================================================ */
.floating-wa { position: fixed; bottom: 20px; right: 20px; width: 52px; height: 52px; background: #25D366; color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); z-index: 90; transition: var(--transition); }
.floating-wa:hover { transform: scale(1.1); color: #fff; }
.back-to-top { position: fixed; bottom: 20px; right: 80px; width: 44px; height: 44px; background: #fff; color: var(--color-dark); border: 1.5px solid var(--color-border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); z-index: 89; opacity: 0; visibility: hidden; transition: var(--transition); }
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--color-dark); color: #fff; transform: translateY(-2px); }

/* ============================================================
   31. COOKIE CONSENT
   ============================================================ */
.cookie-banner { position: fixed; bottom: 14px; left: 14px; z-index: 97; width: calc(100% - 28px); max-width: 480px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-xl); transform: translateY(calc(100% + 20px)); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.cookie-banner.active { transform: translateY(0); }
.cookie-banner h3 { font-size: .95rem; margin-bottom: 5px; }
.cookie-banner p { font-size: .82rem; color: var(--color-text-light); margin-bottom: 12px; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.cookie-banner-actions .btn { padding: 8px 16px; font-size: .82rem; }

/* ============================================================
   32. COMMENTS
   ============================================================ */
.comments-area { margin-top: 36px; padding: 28px; background: var(--color-bg-subtle); border-radius: var(--radius-lg); }
.comment { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.comment:last-child { border-bottom: 0; }
.comment-author { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.comment-author img { width: 40px; height: 40px; border-radius: 50%; }
.comment-author .fn { font-weight: 700; color: var(--color-dark); font-size: .9rem; }
.comment-meta .comment-metadata { font-size: .75rem; color: var(--color-text-light); }
.comment-reply-link { color: var(--color-primary); font-weight: 600; font-size: .82rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); }
.comment-form .submit { background-image: linear-gradient(135deg, #E63012, #FF8C00); color: #fff; padding: 11px 26px; border-radius: var(--radius-full); border: 0; font-weight: 700; cursor: pointer; }

/* ============================================================
   33. 404 & SEARCH
   ============================================================ */
.funda-404 { text-align: center; padding: 64px 0; }
.funda-404 .huge { font-family: var(--font-display); font-size: clamp(4rem, 18vw, 10rem); font-weight: 800; line-height: 1; background: linear-gradient(135deg, #E63012, #FF8C00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.funda-404 h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); margin: 12px 0; }
.funda-404 p { color: var(--color-text-light); max-width: 440px; margin: 0 auto 20px; }
.funda-search-results-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-border-light); }
.funda-search-results-item img { width: 100px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; }
.funda-search-results-item h3 { margin-bottom: 5px; font-size: .95rem; }
.type-badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary-dark); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .05em; }

/* ============================================================
   34. CONTACT PAGE — redesigned
   ============================================================ */
.funda-contact-hero { background: var(--color-dark); padding: 52px 0; position: relative; overflow: hidden; }
.funda-contact-hero::before { content: ''; position: absolute; top: -100px; right: -100px; width: 320px; height: 320px; background: linear-gradient(135deg, #E63012, #FF8C00); border-radius: 50%; opacity: 0.1; filter: blur(60px); }
.funda-contact-hero .wrap { position: relative; z-index: 2; }
.funda-contact-hero h1 { color: #fff; margin: 0 0 8px; }
.funda-contact-hero p { color: rgba(255,255,255,.7); margin: 0; }

.funda-contact-body { padding: 48px 0; background: var(--color-bg-subtle); }
.funda-contact-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 1024px) { .funda-contact-grid { grid-template-columns: 1fr 1.4fr; gap: 48px; } }

.contact-info-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.contact-info-card { display: flex; align-items: flex-start; gap: 14px; background: #fff; padding: 18px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); transition: var(--transition); }
.contact-info-card:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.contact-info-card .icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: linear-gradient(135deg, #E63012, #FF8C00); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-card .label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-lighter); margin-bottom: 3px; }
.contact-info-card .value { font-weight: 600; color: var(--color-dark); font-size: .9rem; }
.contact-info-card .value a { color: var(--color-dark); }
.contact-info-card .value a:hover { color: var(--color-primary); }

.contact-form-card { background: #fff; padding: 32px; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.contact-form-card h2 { margin-bottom: 6px; font-size: 1.375rem; }
.contact-form-card .subtitle { color: var(--color-text-light); font-size: .88rem; margin-bottom: 24px; }
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 500px) { .form-row-2col { grid-template-columns: 1fr; } }
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: .84rem; color: var(--color-dark); }
.form-field input, .form-field textarea, .form-field select {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md); font-family: inherit; font-size: .9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease; background: #fff;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.form-field textarea { resize: vertical; min-height: 120px; }
.funda-cf-status { margin-top: 10px; font-size: .88rem; padding: 10px 14px; border-radius: var(--radius-md); display: none; }
.funda-cf-status.success { display: block; background: #D1FAE5; color: #065F46; }
.funda-cf-status.error { display: block; background: var(--color-primary-light); color: var(--color-primary-dark); }

/* ============================================================
   35. CUSTOM AUTH — Login & Register
   ============================================================ */
.funda-auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg-subtle); padding: 24px; }
.funda-auth-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 440px; overflow: hidden; }
.funda-auth-card-header { background: var(--color-dark); padding: 32px; text-align: center; position: relative; overflow: hidden; }
.funda-auth-card-header::before { content: ''; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; background: linear-gradient(135deg, #E63012, #FF8C00); border-radius: 50%; opacity: 0.15; }
.funda-auth-card-header .logo { position: relative; z-index: 2; margin-bottom: 8px; }
.funda-auth-card-header .logo img { max-height: 40px; margin: 0 auto 12px; filter: brightness(0) invert(1); }
.funda-auth-card-header h1 { color: #fff; font-size: 1.375rem; margin: 0 0 4px; position: relative; z-index: 2; }
.funda-auth-card-header p { color: rgba(255,255,255,.65); font-size: .85rem; margin: 0; position: relative; z-index: 2; }
.funda-auth-card-body { padding: 28px 32px; }
.funda-auth-tabs { display: flex; border: 1.5px solid var(--color-border); border-radius: var(--radius-full); padding: 3px; margin-bottom: 24px; }
.funda-auth-tabs button { flex: 1; padding: 8px 12px; border-radius: var(--radius-full); font-weight: 700; font-size: .84rem; transition: var(--transition); }
.funda-auth-tabs button.active { background: linear-gradient(135deg, #E63012, #FF8C00); color: #fff; }
.funda-auth-tabs button:not(.active) { color: var(--color-text-light); }
.funda-auth-form { display: none; }
.funda-auth-form.active { display: block; }
.funda-auth-divider { text-align: center; color: var(--color-text-lighter); font-size: .8rem; margin: 16px 0; position: relative; }
.funda-auth-divider::before, .funda-auth-divider::after { content: ''; position: absolute; top: 50%; width: calc(50% - 24px); height: 1px; background: var(--color-border); }
.funda-auth-divider::before { left: 0; }
.funda-auth-divider::after { right: 0; }
.funda-auth-footer { text-align: center; padding: 16px 32px 24px; font-size: .85rem; color: var(--color-text-light); }
.funda-auth-footer a { color: var(--color-primary); font-weight: 600; }

/* ============================================================
   36. VIDEO MODAL
   ============================================================ */
.video-modal { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: var(--transition); }
.video-modal.active { opacity: 1; visibility: visible; }
.video-modal-backdrop { position: absolute; inset: 0; background: rgba(28,34,51,.85); }
.video-modal-inner { position: relative; z-index: 2; width: min(900px, 90vw); }
.video-modal-close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; background: rgba(255,255,255,.15); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.video-modal-close:hover { background: rgba(255,255,255,.25); }
.video-modal-video { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; }
.video-modal-video iframe { width: 100%; height: 100%; border: 0; }

/* ============================================================
   37. UTILITY HELPERS
   ============================================================ */
.text-center { text-align: center; }
.d-flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* ============================================================
   38. MOBILE OPTIMIZATIONS — Rule 26
   ============================================================ */
@media (max-width: 767px) {
    .funda-hero::before, .funda-hero::after { display: none; }
    .course-card:hover, .woocommerce ul.products li.product:hover,
    .blog-card:hover, .category-card:hover, .feature-card:hover, .instructor-card:hover { transform: none; }
    .funda-cta { padding: 36px 20px; border-radius: var(--radius-lg); }
    .single-course-hero { padding: 28px 0; }
    body.has-mobile-cta { padding-bottom: 72px; }
    .course-price-card { position: static !important; }
    .funda-contact-grid { gap: 20px; }
    .contact-form-card { padding: 20px; border-radius: var(--radius-lg); }
    .form-row-2col { grid-template-columns: 1fr; }
    .funda-auth-card-body { padding: 20px; }
}

/* ============================================================
   39. PRINT
   ============================================================ */
@media print {
    .site-header, .site-footer, .side-cart, .floating-wa, .back-to-top, .cookie-banner, .course-mobile-cta { display: none !important; }
    body { color: #000; background: #fff; }
}

/* ============================================================
   40. GRADIENT OVERRIDE — LAST BLOCK (Rule 22)
   3-layer fallback: solid hex → linear-gradient → var()
   ============================================================ */
.btn-primary,
button.btn-primary,
a.btn-primary,
input[type=submit].btn-primary,
.wp-block-button__link,
.btn-enroll,
button.btn-enroll,
a.btn-enroll,
.btn-success,
button.btn-success,
a.btn-success,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.single_add_to_cart_button,
#place_order {
    background-color: #E63012 !important;
    background: #E63012 !important;
    background: linear-gradient(135deg, #E63012 0%, #FF8C00 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Exclusions — must come after the above */
.btn-outline,
.btn-outline-dark,
.btn-outline-white,
.btn-white,
.btn-ghost,
.btn-danger,
.added_to_cart { background-image: none !important; }
.added_to_cart { background: var(--color-dark) !important; background-color: var(--color-dark) !important; color: #fff !important; }

/* ============================================================
   v1.2 ADDITIONS — appended per Rule 14
   ============================================================ */

/* ── HEADER REDESIGN ── */
.site-header { border-bottom: 1px solid var(--color-border); backdrop-filter: blur(8px); background: rgba(255,255,255,.95); }
.site-header.scrolled { box-shadow: 0 2px 20px rgba(28,34,51,.08); }
.header-wordmark { display:flex; align-items:center; gap:8px; text-decoration:none; }
.wordmark-icon { width:32px; height:32px; background:linear-gradient(135deg,#E63012,#FF8C00); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:800; font-size:1rem; flex-shrink:0; }
.wordmark-text { font-family:var(--font-display); font-weight:800; font-size:1.15rem; }
.header-logo-img { max-height:38px; width:auto; }
.header-avatar-link { display:inline-flex; align-items:center; }
.header-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--color-border); transition:var(--transition); }
.header-avatar:hover { border-color:var(--color-primary); }
.header-signin-btn { display:none; }
@media (min-width:768px) { .header-signin-btn { display:inline-flex; } }
.header-progress-bar { height:3px; background:linear-gradient(90deg,#E63012,#FF8C00); width:0; transition:width .2s ease; position:absolute; bottom:0; left:0; }

/* ── FOOTER VISUAL ELEMENTS ── */
.footer-wave { line-height:0; margin-bottom:-1px; }
.footer-wave svg { width:100%; height:40px; display:block; }
.site-footer { background:var(--color-dark); color:rgba(255,255,255,.65); padding:0 0 0; margin-top:56px; position:relative; overflow:hidden; }
.footer-inner { position:relative; z-index:2; padding:48px 0 20px; }
.footer-blob { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:1; }
.footer-blob-1 { width:400px; height:400px; background:linear-gradient(135deg,#E63012,#FF8C00); opacity:.05; top:-100px; right:-100px; }
.footer-blob-2 { width:300px; height:300px; background:#FF8C00; opacity:.04; bottom:-80px; left:10%; }
.footer-brand-col { display:flex; flex-direction:column; gap:12px; }
.footer-logo-wrap img, .footer-logo-img { max-height:44px; filter:brightness(0) invert(1); }
.footer-wordmark { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-family:var(--font-display); font-weight:800; font-size:1.2rem; }
.footer-wordmark-icon { width:36px; height:36px; background:linear-gradient(135deg,#E63012,#FF8C00); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }
.footer-tagline { color:rgba(255,255,255,.55); font-size:.85rem; margin:0; max-width:280px; line-height:1.6; }
.footer-social { display:flex; gap:8px; margin-top:4px; }
.footer-social-link { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; color:#fff; transition:var(--transition); }
.footer-social-link:hover { background:linear-gradient(135deg,#E63012,#FF8C00); transform:translateY(-2px); color:#fff; }
.footer-col-title { color:#fff; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; margin:0 0 14px; }
.footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.footer-links a { font-size:.86rem; color:rgba(255,255,255,.6); transition:var(--transition); }
.footer-links a:hover { color:#fff; padding-left:4px; }
.footer-newsletter-desc { font-size:.82rem; color:rgba(255,255,255,.55); margin:0 0 10px; }
.footer-newsletter-form { display:flex; gap:6px; }
.footer-newsletter-input { flex:1; padding:10px 14px; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-full); background:rgba(255,255,255,.06); color:#fff; font-size:.85rem; }
.footer-newsletter-input::placeholder { color:rgba(255,255,255,.4); }
.footer-newsletter-input:focus { outline:none; border-color:var(--color-orange); background:rgba(255,255,255,.1); }
.footer-newsletter-btn { padding:10px 16px; background:linear-gradient(135deg,#E63012,#FF8C00); color:#fff; border-radius:var(--radius-full); font-weight:700; font-size:.82rem; white-space:nowrap; border:0; cursor:pointer; flex-shrink:0; }
.footer-newsletter-status { font-size:.8rem; margin:6px 0 0; min-height:1em; }
.footer-contact-line { display:flex; flex-direction:column; gap:4px; margin-top:12px; }
.footer-contact-line a { font-size:.82rem; color:rgba(255,255,255,.55); }
.footer-contact-line a:hover { color:#fff; }
.footer-bottom { padding:20px 0; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; }
.footer-bottom-copy { font-size:.78rem; color:rgba(255,255,255,.45); }
.footer-bottom-copy strong { color:rgba(255,255,255,.7); }
.footer-bottom-nav .footer-nav { display:flex; gap:16px; list-style:none; padding:0; margin:0; }
.footer-bottom-nav .footer-nav a { font-size:.78rem; color:rgba(255,255,255,.45); }
.footer-bottom-nav .footer-nav a:hover { color:#fff; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:36px; margin-bottom:40px; }
@media (min-width:768px) { .footer-grid { grid-template-columns:1.6fr 1fr 1fr 1.4fr; } }

/* ── SIDE CART FIX — close button not covering price ── */
.side-cart-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--color-border); gap:12px; }
.side-cart-header-left { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.side-cart-header-left h3 { margin:0; font-size:.95rem; }
.side-cart-close { width:32px; height:32px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:var(--color-border-light); color:var(--color-text-light); transition:var(--transition); }
.side-cart-close:hover { background:var(--color-primary); color:#fff; }

/* ── COMPACT SINGLE COURSE ── */
.sc-hero { background:var(--color-dark); color:#fff; padding:32px 0 0; position:relative; overflow:hidden; }
.sc-hero::before { content:''; position:absolute; top:-120px; right:-80px; width:400px; height:400px; background:linear-gradient(135deg,#E63012,#FF8C00); border-radius:50%; opacity:.1; filter:blur(60px); pointer-events:none; }
.sc-grid { display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
@media (min-width:1024px) { .sc-grid { grid-template-columns:1.4fr 1fr; gap:40px; } }

.sc-info { padding-bottom:32px; }
.sc-breadcrumb { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.78rem; color:rgba(255,255,255,.5); margin-bottom:14px; }
.sc-breadcrumb a { color:rgba(255,255,255,.65); }
.sc-breadcrumb a:hover { color:#fff; }
.sc-breadcrumb span { color:rgba(255,255,255,.35); }
.sc-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.sc-cat-badge { background:linear-gradient(135deg,#E63012,#FF8C00); color:#fff; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.05em; }
.sc-level-badge { font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:var(--radius-full); background:rgba(255,255,255,.12); color:rgba(255,255,255,.8); }
.sc-title { color:#fff; font-size:clamp(1.4rem,4vw,2rem); margin:0 0 10px; line-height:1.25; }
.sc-subtitle { color:rgba(255,255,255,.75); font-size:.95rem; margin:0 0 16px; line-height:1.6; max-width:560px; }
.sc-meta-row { display:flex; flex-wrap:wrap; gap:14px; font-size:.8rem; color:rgba(255,255,255,.65); align-items:center; }
.sc-meta-row span { display:inline-flex; align-items:center; gap:5px; }
.sc-rating { display:inline-flex; align-items:center; gap:5px; }
.sc-stars { color:var(--color-orange); font-weight:700; }
.sc-rating-count { color:rgba(255,255,255,.5); }

/* Price card */
.sc-card-wrap { position:sticky; top:calc(var(--header-height) + 12px); }
.sc-card { background:#fff; color:var(--color-text); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-xl); }
.sc-card-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--color-dark); }
.sc-card-thumb img { width:100%; height:100%; object-fit:cover; }
.sc-card-thumb-placeholder { width:100%; height:100%; background:linear-gradient(135deg,#E63012,#FF8C00); }
.sc-play-btn { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:rgba(28,34,51,.5); color:#fff; border:0; cursor:pointer; transition:var(--transition); }
.sc-play-btn:hover { background:rgba(28,34,51,.65); }
.sc-play-icon { width:52px; height:52px; background:rgba(255,255,255,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--color-primary); transition:var(--transition); }
.sc-play-btn:hover .sc-play-icon { transform:scale(1.1); background:#fff; }
.sc-preview-label { font-size:.8rem; font-weight:600; letter-spacing:.03em; }
.sc-card-body { padding:18px; }
.sc-price-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.sc-price { font-family:var(--font-display); font-size:1.75rem; font-weight:800; color:var(--color-dark); line-height:1; }
.sc-price-original { color:var(--color-text-lighter); font-size:1rem; font-weight:400; }
.sc-badge-sale { background:var(--color-primary); color:#fff; font-size:.68rem; font-weight:700; padding:3px 8px; border-radius:var(--radius-full); text-transform:uppercase; }
.sc-enroll-btn { margin-bottom:8px; justify-content:center; }
.sc-enroll-wrap .tutor-btn, .sc-enroll-wrap button, .sc-enroll-wrap a { display:flex !important; width:100% !important; justify-content:center !important; padding:14px 20px !important; background:linear-gradient(135deg,#E63012,#FF8C00) !important; color:#fff !important; border-radius:var(--radius-full) !important; font-weight:700 !important; font-size:.95rem !important; border:0 !important; cursor:pointer; box-shadow:0 4px 18px rgba(230,48,18,.28) !important; }
.sc-guarantee { text-align:center; font-size:.75rem; color:var(--color-text-light); margin:6px 0 14px; }
.sc-includes { border-top:1px solid var(--color-border); padding-top:14px; display:flex; flex-direction:column; gap:8px; }
.sc-include-item { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--color-text-light); }
.sc-include-item svg { color:var(--color-primary); flex-shrink:0; }

/* SC body */
.sc-body-wrap { padding:0 20px; max-width:var(--container-max); margin:0 auto; }
.sc-body-grid { display:grid; grid-template-columns:1fr; }
.sc-body-main { max-width:860px; }
.sc-section { padding:32px 0; border-bottom:1px solid var(--color-border-light); }
.sc-section:last-child { border-bottom:0; }
.sc-section h2 { font-size:1.25rem; margin-bottom:18px; }
.sc-learning-points { list-style:none; padding:0; margin:0 0 24px; display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:640px) { .sc-learning-points { grid-template-columns:1fr 1fr; } }
.sc-learning-points li { display:flex; gap:8px; align-items:flex-start; font-size:.9rem; }
.sc-learning-points svg { color:var(--color-primary); flex-shrink:0; margin-top:2px; }
.sc-content-body { font-size:.95rem; line-height:1.7; }
.sc-review-card { padding:16px; background:var(--color-bg-subtle); border-radius:var(--radius-md); margin-bottom:10px; }
.sc-review-author { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.sc-review-author img { width:40px; height:40px; border-radius:50%; }
.sc-review-author strong { display:block; font-size:.88rem; color:var(--color-dark); }
.sc-review-stars { color:var(--color-orange); font-size:.82rem; }
.sc-review-card p { margin:0; font-size:.88rem; color:var(--color-text-light); }
@media (max-width:1023px) { .sc-card-wrap { position:static; } .sc-info { padding-bottom:0; } }

/* ── COURSE CARD FLIP ON HOVER ── */
.course-card { perspective:1000px; }
.course-card-inner { position:relative; width:100%; height:100%; transition:transform 0.55s cubic-bezier(.4,0,.2,1); transform-style:preserve-3d; display:flex; flex-direction:column; border-radius:var(--radius-lg); }
.course-card:hover .course-card-inner { transform:rotateY(180deg); }
.course-card-front, .course-card-back { backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--radius-lg); overflow:hidden; width:100%; }
.course-card-front { position:relative; background:#fff; border:1px solid var(--color-border); display:flex; flex-direction:column; }
.course-card-back { position:absolute; inset:0; background:var(--color-dark); color:#fff; padding:20px; display:flex; flex-direction:column; justify-content:space-between; transform:rotateY(180deg); border:0; }
.course-card-back h3 { color:#fff; font-size:.95rem; margin:0 0 8px; }
.course-card-back .back-desc { font-size:.82rem; color:rgba(255,255,255,.75); line-height:1.6; flex:1; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.course-card-back .back-meta { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; font-size:.75rem; color:rgba(255,255,255,.6); }
.course-card-back .back-meta span { display:inline-flex; align-items:center; gap:4px; }
.course-card-back .btn-enroll-card { display:block; text-align:center; padding:11px; background:linear-gradient(135deg,#E63012,#FF8C00); color:#fff !important; border-radius:var(--radius-full); font-weight:700; font-size:.85rem; border:0; cursor:pointer; box-shadow:0 4px 14px rgba(230,48,18,.3); margin-top:auto; }
.course-card-back .btn-enroll-card:hover { box-shadow:0 6px 20px rgba(230,48,18,.45); }
/* Disable flip on mobile (Rule 26) */
@media (max-width:767px) { .course-card:hover .course-card-inner { transform:none; } .course-card-back { display:none; } }

/* ── ABOUT/FAQ ── */
.funda-faq-list { display:flex; flex-direction:column; gap:8px; }
.funda-faq-item { border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; }
.funda-faq-item summary { padding:16px 20px; font-weight:700; cursor:pointer; list-style:none; font-size:.95rem; display:flex; justify-content:space-between; align-items:center; background:#fff; }
.funda-faq-item summary::-webkit-details-marker { display:none; }
.funda-faq-item summary::after { content:'+'; font-size:1.4rem; color:var(--color-primary); font-weight:300; }
.funda-faq-item[open] summary::after { content:'−'; }
.funda-faq-item[open] summary { background:var(--color-bg-warm); }
.funda-faq-item p { padding:12px 20px 18px; margin:0; color:var(--color-text-light); font-size:.9rem; line-height:1.7; border-top:1px solid var(--color-border-light); }

/* ── CART & CHECKOUT HEADERS ── */
.woocommerce-cart .wrap > h1,
.woocommerce-checkout .wrap > h1 { display:none; }
.funda-page-hero { background:var(--color-dark); padding:32px 0; margin-bottom:0; position:relative; overflow:hidden; }
.funda-page-hero::before { content:''; position:absolute; top:-80px; right:-80px; width:280px; height:280px; background:linear-gradient(135deg,#E63012,#FF8C00); border-radius:50%; opacity:.1; filter:blur(50px); }
.funda-page-hero .wrap { position:relative; z-index:2; display:flex; align-items:center; gap:14px; }
.funda-page-hero h1 { color:#fff; margin:0; font-size:clamp(1.375rem,4vw,1.875rem); }
.funda-page-hero .page-hero-icon { width:44px; height:44px; background:linear-gradient(135deg,#E63012,#FF8C00); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.funda-page-hero .page-hero-meta { font-size:.85rem; color:rgba(255,255,255,.6); margin-top:4px; }

/* Checkout layout polish */
.woocommerce-checkout .woocommerce { background:var(--color-bg-subtle); }
.woocommerce-checkout .col2-set { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:1024px) { .woocommerce-checkout .col2-set { grid-template-columns:1.1fr 1fr; } }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { background:#fff; border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); }
.woocommerce-checkout #order_review_heading { font-size:1.05rem; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--color-border); }
.woocommerce-checkout #order_review { background:#fff; border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); margin-top:20px; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th { background:var(--color-dark); color:#fff !important; }
.woocommerce .input-text, .woocommerce textarea, .woocommerce select {
    border:1.5px solid var(--color-border) !important; border-radius:var(--radius-md) !important;
    padding:11px 14px !important; font-size:.9rem !important;
    transition:border-color .2s, box-shadow .2s !important;
}
.woocommerce .input-text:focus, .woocommerce textarea:focus {
    border-color:var(--color-primary) !important;
    box-shadow:0 0 0 3px var(--color-primary-light) !important;
    outline:none !important;
}

/* ── SHOP PAGE STYLING (Tengai-style) ── */
.shop-page .shop-header { background:var(--color-dark); padding:32px 0; margin:-32px -20px 28px; border-radius:var(--radius-lg); color:#fff; padding:32px 28px; position:relative; overflow:hidden; }
.shop-page .shop-header::before { content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; background:linear-gradient(135deg,#E63012,#FF8C00); border-radius:50%; opacity:.12; filter:blur(40px); }
.shop-page .shop-header h1 { color:#fff; margin:0 0 4px; position:relative; z-index:2; }
.shop-page .shop-header p { color:rgba(255,255,255,.7); margin:0; position:relative; z-index:2; }
.shop-toolbar { background:#fff; border-radius:var(--radius-md); padding:12px 16px; box-shadow:var(--shadow-sm); margin-bottom:20px; }

/* WC product cards — fully visible buttons */
.woocommerce ul.products li.product { position:relative; }
.woocommerce ul.products li.product .button { position:static !important; opacity:1 !important; transform:none !important; visibility:visible !important; }

/* ── VISUAL BACKGROUND ELEMENTS ── */
.funda-hero { background:var(--color-bg-warm); position:relative; }
.funda-section-dots { position:relative; }
.funda-section-dots::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-image:radial-gradient(circle, rgba(230,48,18,.06) 1px, transparent 1px); background-size:28px 28px; pointer-events:none; z-index:0; }
.funda-section-dots > .wrap { position:relative; z-index:1; }

/* ── ANIMATIONS — enhancements ── */
@keyframes funda-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes funda-glow-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(230,48,18,.2)} 50%{box-shadow:0 0 0 12px rgba(230,48,18,0)} }
.btn-enroll, .btn-primary { position:relative; overflow:hidden; }
.btn-enroll::after, .btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); transform:translateX(-100%); transition:transform .5s ease; }
.btn-enroll:hover::after, .btn-primary:hover::after { transform:translateX(100%); }

/* Customizer settings for separate logos */
/* funda_header_logo and funda_footer_logo — set in customizer.php */

/* ── GRADIENT RULE 22 APPEND ── */
.sc-enroll-btn,
button.sc-enroll-btn,
a.sc-enroll-btn {
    background-color:#E63012 !important;
    background-image:linear-gradient(135deg,#E63012 0%,#FF8C00 100%) !important;
    color:#fff !important; border-color:transparent !important;
}

/* ============================================================
   v1.3 FIXES — appended per Rule 14
   ============================================================ */

/* ── FIX: Back-to-top — bottom RIGHT corner, above WhatsApp ── */
.back-to-top {
    bottom: 82px !important;
    right: 20px !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    background: var(--color-dark) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: var(--shadow-md) !important;
}
.back-to-top:hover { background: linear-gradient(135deg,#E63012,#FF8C00) !important; transform: translateY(-2px) !important; color: #fff !important; }

/* ── FIX: Single course hero — eliminate left blank space on desktop ── */
.sc-hero { padding: 0 !important; }
.sc-hero > .wrap { padding: 0 !important; max-width: 100% !important; }
.sc-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    min-height: 420px;
}
@media (min-width: 1024px) {
    .sc-grid { grid-template-columns: 1fr 400px !important; gap: 0 !important; }
    .sc-info { padding: 40px 40px 40px 48px !important; }
    .sc-card-wrap {
        position: relative !important;
        top: 0 !important;
        align-self: stretch;
        display: flex;
        align-items: center;
        padding: 24px 24px 24px 0;
        background: rgba(0,0,0,.15);
    }
    .sc-card { width: 100%; }
}
@media (max-width: 1023px) {
    .sc-info { padding: 24px 20px !important; }
    .sc-card-wrap { padding: 0 20px 24px !important; }
    .sc-card { border-radius: var(--radius-lg); }
}

/* ── FIX: sc-info needs its own bg from the hero ── */
.sc-info { background: transparent; }

/* ── FIX: Cart page product items — styled cards ── */
.woocommerce-cart-form .shop_table { border-radius: var(--radius-lg) !important; overflow: hidden !important; box-shadow: var(--shadow-sm) !important; }
.woocommerce-cart-form table.shop_table thead tr th {
    background: var(--color-dark) !important;
    color: #fff !important;
    font-family: var(--font-display) !important;
    font-size: .82rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    padding: 14px 18px !important;
}
.woocommerce-cart-form table.shop_table tbody tr { background: #fff; }
.woocommerce-cart-form table.shop_table tbody tr:hover td { background: var(--color-bg-subtle); }
.woocommerce-cart-form .product-thumbnail img {
    width: 72px !important; height: 72px !important;
    object-fit: cover !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
}
.woocommerce-cart-form .product-name a { font-weight: 700 !important; color: var(--color-dark) !important; font-size: .95rem !important; }
.woocommerce-cart-form .product-price, .woocommerce-cart-form .product-subtotal { font-family: var(--font-display) !important; font-weight: 700 !important; color: var(--color-dark) !important; }
.woocommerce-cart-form .actions { background: var(--color-bg-subtle) !important; padding: 16px 18px !important; border-top: 1px solid var(--color-border) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; }
.woocommerce-cart-form .actions .coupon { display: flex !important; gap: 8px !important; }
.woocommerce-cart-form .actions .coupon #coupon_code {
    padding: 10px 14px !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    font-size: .88rem !important;
}
.woocommerce-cart-form .actions button[name="apply_coupon"] {
    padding: 10px 18px !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
    font-weight: 600 !important;
    font-size: .88rem !important;
    cursor: pointer !important;
}
.woocommerce-cart-form .actions button[name="update_cart"] {
    padding: 10px 18px !important;
    background: var(--color-dark) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    font-size: .88rem !important;
    cursor: pointer !important;
}

/* Cart totals box */
.cart_totals { background: #fff !important; border-radius: var(--radius-lg) !important; padding: 24px !important; box-shadow: var(--shadow-sm) !important; }
.cart_totals h2 { font-size: 1.05rem !important; margin-bottom: 18px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--color-border) !important; }
.cart_totals table { width: 100% !important; border-collapse: collapse !important; }
.cart_totals table th { font-weight: 600 !important; color: var(--color-dark) !important; padding: 10px 0 !important; font-size: .88rem !important; border-bottom: 1px solid var(--color-border-light) !important; }
.cart_totals table td { padding: 10px 0 !important; font-family: var(--font-display) !important; font-weight: 700 !important; color: var(--color-dark) !important; border-bottom: 1px solid var(--color-border-light) !important; text-align: right !important; }
.cart_totals .order-total th, .cart_totals .order-total td { font-size: 1.1rem !important; border-bottom: 0 !important; padding-top: 16px !important; }

/* Checkout form — comprehensive field styling */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout h3 {
    font-size: 1rem !important; font-weight: 700 !important;
    margin: 0 0 18px !important; padding-bottom: 10px !important;
    border-bottom: 2px solid var(--color-border) !important;
    color: var(--color-dark) !important;
}
.woocommerce-checkout .form-row label { font-weight: 600 !important; font-size: .84rem !important; color: var(--color-dark) !important; display: block !important; margin-bottom: 5px !important; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    padding: 11px 14px !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    font-size: .9rem !important;
    width: 100% !important;
    background: #fff !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}
.woocommerce-checkout #payment #place_order {
    padding: 16px !important;
    font-size: 1rem !important;
    letter-spacing: .01em !important;
}

/* ── FIX: Page hero — no WP wrapper conflict ── */
.funda-page-hero { position: relative; z-index: 1; }
.woocommerce-cart .funda-wc-main,
.woocommerce-checkout .funda-wc-main { background: var(--color-bg-subtle); padding-top: 28px; padding-bottom: 48px; }

/* ── SITEWIDE ABSTRACT MOVING ELEMENTS ── */
/* Canvas-based orbs — injected via JS, positioned fixed behind content */
#funda-orbs-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
}
/* Section-level dot grid pattern */
.sec, .funda-hero, .sc-hero, .shop-page, .funda-blog, .funda-dashboard { position: relative; z-index: 1; }

/* Hero geometric accent lines */
.funda-hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(230,48,18,.2), transparent);
}

/* Gradient orb decorations on sections — CSS only fallback */
.sec:nth-child(odd)::before {
    content: '';
    position: absolute; top: -60px; right: -80px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(230,48,18,.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.sec:nth-child(even)::before {
    content: '';
    position: absolute; bottom: -60px; left: -60px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(255,140,0,.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.sec > .wrap { position: relative; z-index: 1; }

/* Animated grid lines on page hero */
.funda-page-hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.sc-hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 1;
}
.sc-hero > .wrap { position: relative; z-index: 2; }

/* Floating ring decorations */
@keyframes funda-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes funda-ring-spin-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes funda-orb-drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -20px) scale(1.05); }
    66%  { transform: translate(-20px, 10px) scale(.97); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes funda-orb-drift-2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-40px, 30px) scale(1.08); }
    100% { transform: translate(0, 0) scale(1); }
}

/* Global animated orbs via pseudo-elements on body */
body::before {
    content: '';
    position: fixed; top: -200px; right: -200px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(230,48,18,.055) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: funda-orb-drift 18s ease-in-out infinite;
}
body::after {
    content: '';
    position: fixed; bottom: -180px; left: -180px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(255,140,0,.04) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: funda-orb-drift-2 22s ease-in-out infinite;
}

/* ── FIX: Free course enroll — Tutor button override ── */
.sc-enroll-wrap { width: 100%; margin-bottom: 8px; }
.sc-enroll-wrap a,
.sc-enroll-wrap button,
.sc-enroll-wrap .tutor-btn,
.sc-enroll-wrap form button,
.sc-enroll-wrap input[type="submit"] {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 14px 20px !important;
    background-color: #E63012 !important;
    background-image: linear-gradient(135deg, #E63012 0%, #FF8C00 100%) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    border: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(230,48,18,.28) !important;
    font-family: var(--font-display) !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
}
.sc-enroll-wrap a:hover,
.sc-enroll-wrap button:hover { box-shadow: 0 6px 24px rgba(230,48,18,.4) !important; transform: translateY(-1px) !important; color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
    body::before, body::after, @keyframes funda-orb-drift, @keyframes funda-orb-drift-2 { animation: none !important; }
}

/* ── Page hero positioning fix ── */
.funda-page-hero[style*="margin-top:70px"] { margin-top: var(--header-height) !important; }
.has-page-hero .funda-wc-main { margin-top: 0 !important; }
.has-page-hero .woocommerce-cart .wrap > h1,
.has-page-hero .woocommerce-checkout .wrap > h1,
.woocommerce-cart .wrap > h1,
.woocommerce-checkout .wrap > h1 { display: none !important; }

/* Ensure page hero renders over sticky header */
.funda-page-hero { position: relative; z-index: 99; margin-top: 0 !important; }

/* ============================================================
   v1.4 FINAL FIXES — appended per Rule 14
   ============================================================ */

/* ── 1. Side cart: close button separate from price, never overlaps ── */
.side-cart-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--color-border) !important;
}
.side-cart-header-left { display:flex; align-items:center; gap:8px; min-width:0; }
.side-cart-header-left h3 { margin:0; font-size:.95rem; white-space:nowrap; }
.side-cart-close {
    width:30px !important; height:30px !important; flex-shrink:0 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    border-radius:var(--radius-md) !important; background:var(--color-border-light) !important;
    color:var(--color-text-light) !important; transition:var(--transition) !important;
    border:0 !important; cursor:pointer !important;
}
.side-cart-close:hover { background:var(--color-primary) !important; color:#fff !important; }
/* Side cart checkout hover — brand gradient */
.side-cart .woocommerce-mini-cart__buttons .checkout:hover {
    background-image:var(--color-gradient) !important;
    box-shadow:var(--shadow-glow) !important;
    color:#fff !important;
}
/* Side cart mini-cart item row */
.side-cart .mini_cart_item { position:relative !important; padding-right:0 !important; }

/* ── 2. Shop/courses archive: redesigned sidebar filters ── */
.shop-sidebar {
    background: var(--color-dark) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--radius-lg) !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.shop-sidebar .filter-group {
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    margin-bottom: 0 !important;
}
.shop-sidebar .filter-group:last-child { border-bottom: 0 !important; }
.shop-sidebar .filter-group h3 {
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: rgba(255,255,255,.5) !important;
    margin-bottom: 12px !important;
}
.shop-sidebar label {
    color: rgba(255,255,255,.8) !important;
    padding: 6px 0 !important;
    font-size: .88rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: color .2s !important;
}
.shop-sidebar label:hover { color: #fff !important; }
.shop-sidebar label input[type="checkbox"] { accent-color: var(--color-primary) !important; width:15px; height:15px; }
.shop-sidebar .filter-group a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 0 !important;
    color: rgba(255,255,255,.75) !important;
    font-size: .88rem !important;
    transition: color .2s !important;
}
.shop-sidebar .filter-group a:hover { color: var(--color-primary) !important; }
.shop-sidebar .filter-group a span { font-size:.75rem; color:rgba(255,255,255,.4); }
/* Close icon on filter sidebar */
.shop-sidebar-close { color: #fff !important; background: rgba(255,255,255,.1) !important; margin: 16px 20px 0 !important; }
.shop-sidebar-close:hover { background: var(--color-primary) !important; color: #fff !important; }

/* ── 3. Shop page header ── */
.shop-page { padding: 0 !important; }
.shop-header {
    background: var(--color-dark) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 36px 28px !important;
    position: relative !important;
    overflow: hidden !important;
}
.shop-header::before {
    content: '';
    position: absolute; top: -60px; right: -60px;
    width: 240px; height: 240px;
    background: var(--color-gradient);
    border-radius: 50%; opacity: .1; filter: blur(50px);
}
.shop-header::after {
    content: '';
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 40px 40px;
}
.shop-header h1, .shop-header p { position: relative; z-index: 2; }
.shop-header h1 { color: #fff !important; margin: 0 0 6px !important; }
.shop-header p { color: rgba(255,255,255,.7) !important; margin: 0 !important; }
.shop-layout { padding: 24px 0 48px !important; gap: 20px !important; }

/* ── 4. "View cart" button in product cards — style only, not full-width ── */
.woocommerce ul.products li.product .added_to_cart {
    background: var(--color-dark) !important;
    background-image: none !important;
    color: #fff !important;
    font-size: .8rem !important;
    padding: 9px 14px !important;
    margin-top: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    border-radius: var(--radius-full) !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
    margin-bottom: 14px !important;
}
.woocommerce ul.products li.product .added_to_cart::before {
    content: '';
    width: 14px; height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

/* ── 5. Course card: hide instructor ── */
.course-card-instructor { display: none !important; }
.course-card-back .back-instructor { display: none !important; }

/* ── 6. Course level text — readable badges ── */
.level.badge, .course-card-thumb .level {
    font-size: .68rem !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: var(--radius-full) !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(4px) !important;
}
.level-beginner, .level.level-beginner { background: rgba(16,185,129,.9) !important; color: #fff !important; }
.level-intermediate, .level.level-intermediate { background: rgba(255,140,0,.9) !important; color: #fff !important; }
.level-advanced, .level.level-advanced { background: rgba(230,48,18,.9) !important; color: #fff !important; }
/* Fix "All_levels" text display */
.level.badge { text-transform: capitalize !important; }
.level.badge[class*="all"] { background: rgba(28,34,51,.8) !important; color: #fff !important; }

/* ── 7. Single course: reduce header height on desktop ── */
@media (min-width: 1024px) {
    .sc-info { padding: 28px 36px 28px 44px !important; }
    .sc-title { font-size: clamp(1.25rem, 2.5vw, 1.7rem) !important; }
    .sc-grid { min-height: 340px !important; }
    .sc-card-wrap { padding: 18px 20px 18px 0 !important; }
    .sc-card { max-width: 360px !important; }
}

/* ── 8. Remove "30-day money-back guarantee" — handled in PHP ── */
.sc-guarantee { display: none !important; }

/* ── 9. Cart page — modernised header & styled everything ── */
.funda-page-hero {
    background: var(--color-dark) !important;
    padding: 28px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}
.funda-page-hero::before {
    content: '' !important;
    position: absolute !important; top: -80px !important; right: -80px !important;
    width: 300px !important; height: 300px !important;
    background: var(--color-gradient) !important;
    border-radius: 50% !important; opacity: .1 !important; filter: blur(50px) !important;
}
.funda-page-hero .wrap {
    position: relative !important; z-index: 2 !important;
    display: flex !important; align-items: center !important; gap: 16px !important;
}
.funda-page-hero h1 { color: #fff !important; margin: 0 0 2px !important; font-size: clamp(1.25rem, 4vw, 1.75rem) !important; }
.funda-page-hero .page-hero-icon {
    width: 48px !important; height: 48px !important;
    background: var(--color-gradient) !important;
    border-radius: var(--radius-md) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #fff !important; flex-shrink: 0 !important;
}
.funda-page-hero .page-hero-meta { font-size: .82rem !important; color: rgba(255,255,255,.6) !important; margin-top: 2px !important; }
/* Proceed to checkout button */
.wc-proceed-to-checkout a,
.wc-proceed-to-checkout .checkout-button,
.woocommerce .wc-proceed-to-checkout .checkout-button {
    background-color: var(--color-primary) !important;
    background-image: var(--color-gradient) !important;
    background: var(--color-gradient) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    font-family: var(--font-display) !important;
    font-size: .95rem !important;
    padding: 15px 28px !important;
    display: block !important;
    text-align: center !important;
    border: 0 !important;
    box-shadow: var(--shadow-glow) !important;
    margin-top: 12px !important;
}
/* Cart table full restyle */
.woocommerce-cart-form__contents { border-radius: var(--radius-lg) !important; overflow: hidden !important; }
.woocommerce-cart-form__contents th {
    background: var(--color-dark) !important; color: #fff !important;
    font-size: .78rem !important; text-transform: uppercase !important;
    letter-spacing: .06em !important; padding: 13px 16px !important;
    font-family: var(--font-display) !important;
}
.woocommerce-cart-form__contents td { vertical-align: middle !important; padding: 14px 16px !important; background: #fff; }
.woocommerce-cart-form__contents tr:hover td { background: var(--color-bg-subtle) !important; }

/* Checkout field global override — theme colours */
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    font-size: .9rem !important;
    font-family: var(--font-body) !important;
    background: #fff !important;
    transition: border-color .2s, box-shadow .2s !important;
    width: 100% !important;
    color: var(--color-text) !important;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}
/* Place Order button */
#payment #place_order,
.woocommerce-checkout #payment #place_order {
    background-color: var(--color-primary) !important;
    background-image: var(--color-gradient) !important;
    background: var(--color-gradient) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--radius-full) !important;
    padding: 16px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-family: var(--font-display) !important;
    width: 100% !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-glow) !important;
    margin-top: 16px !important;
}
/* Payment box */
#payment { background: var(--color-bg-subtle) !important; border-radius: var(--radius-lg) !important; padding: 20px !important; }
#payment ul.payment_methods { border-bottom: 1px solid var(--color-border) !important; margin-bottom: 16px !important; padding-bottom: 12px !important; }
#payment ul.payment_methods li label { font-weight: 600 !important; cursor: pointer !important; }

/* ── 10. Search results — card redesign ── */
.funda-search-results-item {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    gap: 16px !important;
    align-items: start !important;
    padding: 16px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 12px !important;
    background: #fff !important;
    transition: var(--transition) !important;
    text-decoration: none !important;
    color: var(--color-text) !important;
}
.funda-search-results-item:hover { border-color: transparent !important; box-shadow: var(--shadow-md) !important; transform: translateY(-2px) !important; }
.funda-search-results-item img { width: 100% !important; aspect-ratio: 16/9 !important; object-fit: cover !important; border-radius: var(--radius-md) !important; }
.funda-search-results-item h3 { font-size: 1rem !important; margin: 0 0 6px !important; color: var(--color-dark) !important; }
.funda-search-results-item h3:hover { color: var(--color-primary) !important; }
.funda-search-results-item p { font-size: .85rem !important; color: var(--color-text-light) !important; margin: 0 !important; }
.type-badge { background: var(--color-gradient) !important; color: #fff !important; }

/* ── 11. Generic page hero for all pages ── */
.funda-inner-hero {
    background: var(--color-dark);
    padding: 40px 0;
    position: relative; overflow: hidden;
}
.funda-inner-hero::before {
    content: ''; position: absolute; top: -80px; right: -80px;
    width: 280px; height: 280px; background: var(--color-gradient);
    border-radius: 50%; opacity: .1; filter: blur(50px);
}
.funda-inner-hero::after {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 40px 40px; pointer-events: none;
}
.funda-inner-hero .wrap { position: relative; z-index: 2; }
.funda-inner-hero h1 { color: #fff; margin: 0 0 8px; }
.funda-inner-hero p { color: rgba(255,255,255,.7); margin: 0; max-width: 600px; }
.funda-inner-hero .eyebrow { color: var(--color-primary); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; display: block; margin-bottom: 10px; }

/* ── 12. Course card back: title is a link ── */
.course-card-back h3 a { color: #fff !important; text-decoration: none !important; }
.course-card-back h3 a:hover { color: var(--color-gradient-end, #FF8C00) !important; }

/* ── 13. Font variables applied site-wide ── */
h1, h2, h3, h4, h5, h6, .font-display { font-family: var(--font-display) !important; }
body, p, li, td, input, select, textarea, button { font-family: var(--font-body) !important; }
body { font-size: var(--font-size-base, 16px) !important; }

/* ── 14. reCAPTCHA badge (hide and only show on relevant forms) ── */
.grecaptcha-badge { visibility: hidden; }
.funda-show-recaptcha .grecaptcha-badge { visibility: visible; }

/* ============================================================
   v1.4b CONTINUATION — final polish
   ============================================================ */

/* ── Remove WC breadcrumb "Archives: Shop" duplication ── */
.woocommerce-breadcrumb { display: none !important; }

/* ── Shop page: filters close X button style ── */
@media (max-width: 1023px) {
    .shop-sidebar { background: var(--color-dark) !important; }
    .shop-sidebar-close {
        display: inline-flex !important; width: 36px !important; height: 36px !important;
        background: rgba(255,255,255,.1) !important; color: #fff !important;
        border-radius: var(--radius-md) !important; align-items: center !important;
        justify-content: center !important; margin: 16px 20px 8px !important;
    }
}

/* ── Cart fragment auto-refresh — don't block UI ── */
body.wc-cart-updating * { pointer-events: none; opacity: 0.7; transition: opacity .2s; }

/* ── Mini-cart: ensure remove × doesn't overlap price ── */
.woocommerce ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
    display: grid !important;
    grid-template-columns: 60px 1fr auto !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}
.woocommerce ul.woocommerce-mini-cart li.woocommerce-mini-cart-item .remove {
    position: static !important;
    grid-column: 3 !important;
    width: 22px !important; height: 22px !important;
    border-radius: 50% !important;
    background: var(--color-border-light) !important;
    color: var(--color-text-light) !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; font-size: 14px !important;
    line-height: 1 !important; text-align: center !important;
    margin-top: 2px !important;
}
.woocommerce ul.woocommerce-mini-cart li.woocommerce-mini-cart-item .remove:hover {
    background: var(--color-primary) !important; color: #fff !important;
}
.woocommerce ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
    width: 60px !important; height: 60px !important;
    object-fit: cover !important; border-radius: var(--radius-md) !important;
    grid-column: 1 !important;
}
.woocommerce ul.woocommerce-mini-cart li.woocommerce-mini-cart-item > a:not(.remove) {
    grid-column: 2 !important; font-weight: 600 !important;
    font-size: .88rem !important; color: var(--color-dark) !important;
}
.woocommerce ul.woocommerce-mini-cart li.woocommerce-mini-cart-item .quantity {
    grid-column: 2 !important; font-size: .82rem !important;
    color: var(--color-text-light) !important;
}

/* ── Checkout: WooCommerce Blocks-style checkout (new WC) ── */
.wp-block-woocommerce-checkout { --wc-blocks-color-primary: var(--color-primary) !important; }
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
    background: var(--color-gradient) !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    border: 0 !important;
    padding: 15px 24px !important;
}
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-select select,
.wc-block-components-form .wc-block-components-textarea textarea {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 11px 14px !important;
    font-family: var(--font-body) !important;
}
.wc-block-components-form .wc-block-components-text-input input:focus,
.wc-block-components-form .wc-block-components-textarea textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
    outline: none !important;
}
.wc-block-cart__submit-button,
.wc-block-components-button {
    background: var(--color-gradient) !important;
    border-radius: var(--radius-full) !important;
    border: 0 !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
}

/* ── Single course page: speed — prevent layout shift ── */
.sc-card { contain: layout style; }
.sc-card-thumb { min-height: 180px; }

/* ── Page headers — ensure ALL pages have inner hero background ── */
.single-post-hero { background: var(--color-dark) !important; }
.single-post-hero h1 { color: #fff !important; }
.single-post-meta { color: rgba(255,255,255,.65) !important; }

/* ── Fix: "Archives: Shop" — remove WC default page title when we have our own ── */
.funda-wc-main .woocommerce-products-header,
.funda-wc-main .page-title:first-child { display: none !important; }

/* ── reCAPTCHA badge — only show on pages that need it ── */
.grecaptcha-badge { visibility: hidden !important; }
.page-template-template-contact .grecaptcha-badge,
.page-template-template-auth .grecaptcha-badge { visibility: visible !important; }

/* ── Gradient rule 22 final append — uses CSS vars so Customizer changes apply ── */
.btn-primary, button.btn-primary, a.btn-primary,
.btn-enroll, button.btn-enroll, a.btn-enroll,
.btn-success, button.btn-success, a.btn-success,
.sc-enroll-btn, button.sc-enroll-btn, a.sc-enroll-btn,
.btn-enroll-card, .footer-newsletter-btn,
.woocommerce ul.products li.product .button,
.wc-proceed-to-checkout .checkout-button,
#place_order,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.single_add_to_cart_button {
    background-color: var(--color-primary) !important;
    background-image: var(--color-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}
/* Exclusions */
.btn-outline, .btn-outline-dark, .btn-outline-white,
.btn-white, .btn-ghost, .btn-danger,
.added_to_cart { background-image: none !important; }
.added_to_cart { background: var(--color-dark) !important; color: #fff !important; }

/* ============================================================
   v1.5 FIXES
   ============================================================ */

/* ── 1. DOUBLE HEADER FIX ──
   The page hero was using wp_body_open (fires before <header>)
   with margin-top:70px — creating hero → header → dark gap.
   Fix: Remove margin-top, use position relative ordering.
   The hero is now output via woocommerce_before_main_content
   (after the sticky header), so no margin needed. */
.funda-page-hero[style*="margin-top"] {
    margin-top: 0 !important;
}
/* Ensure the WC main wrapper has no extra top space */
.funda-wc-main { margin-top: 0 !important; padding-top: 0 !important; }
/* Kill the residual dark gap between hero and content */
.woocommerce-cart .funda-page-hero + .funda-wc-main,
.woocommerce-checkout .funda-page-hero + .funda-wc-main { margin-top: 0 !important; }

/* ── 2. CART/CHECKOUT: Button text white, not blue ── */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a {
    color: #fff !important;
    text-decoration: none !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { color: #fff !important; }

/* ── 3. SIDE CART: remove button absolutely cannot overlap price ── */
.side-cart .mini_cart_item {
    display: grid !important;
    grid-template-columns: 60px 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 0 10px !important;
    align-items: start !important;
    padding: 12px 0 !important;
    position: static !important;
}
.side-cart .mini_cart_item img {
    grid-column: 1 !important; grid-row: 1 / 3 !important;
    width: 60px !important; height: 60px !important;
    object-fit: cover !important; border-radius: var(--radius-md) !important;
}
.side-cart .mini_cart_item a:not(.remove) {
    grid-column: 2 !important; grid-row: 1 !important;
    font-weight: 600 !important; font-size: .85rem !important;
    color: var(--color-dark) !important; display: block !important;
}
.side-cart .mini_cart_item .quantity {
    grid-column: 2 !important; grid-row: 2 !important;
    font-size: .78rem !important; color: var(--color-text-light) !important;
}
.side-cart .mini_cart_item .remove {
    grid-column: 3 !important; grid-row: 1 !important;
    position: static !important;
    width: 24px !important; height: 24px !important;
    border-radius: 50% !important;
    background: var(--color-border-light) !important;
    color: var(--color-text-light) !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; font-size: 16px !important;
    line-height: 1 !important; text-decoration: none !important;
    flex-shrink: 0 !important;
}
.side-cart .mini_cart_item .remove:hover {
    background: var(--color-primary) !important; color: #fff !important;
}

/* ── 4. COURSES SIDEBAR: warm dark colours, not pitch black ── */
.shop-sidebar {
    background: #2a3347 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
}
.shop-sidebar .filter-group { border-bottom-color: rgba(255,255,255,.06) !important; }
.shop-sidebar .filter-group h3 { color: rgba(255,255,255,.45) !important; }
.shop-sidebar label { color: rgba(255,255,255,.85) !important; }
.shop-sidebar .filter-group a { color: rgba(255,255,255,.8) !important; }
.shop-sidebar .filter-group a:hover { color: var(--color-gradient-end, #FF8C00) !important; }

/* ── 5. MOBILE FILTER: close button always visible, overlay dismissible ── */
.shop-sidebar-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 998;
    background: rgba(28,34,51,.6);
}
.shop-sidebar-overlay.active { display: block; }
@media (max-width: 1023px) {
    .shop-sidebar {
        position: fixed !important; inset: 0 !important;
        z-index: 999 !important; max-height: 100vh !important;
        overflow-y: auto !important; display: none !important;
        width: min(300px, 85vw) !important; right: auto !important;
    }
    .shop-sidebar.active { display: flex !important; flex-direction: column !important; }
    .shop-sidebar-close {
        display: inline-flex !important;
        position: sticky !important; top: 0 !important;
        z-index: 2 !important; margin: 0 !important;
        width: 100% !important; border-radius: 0 !important;
        background: rgba(255,255,255,.08) !important;
        color: #fff !important; padding: 14px 20px !important;
        font-size: .88rem !important; font-weight: 700 !important;
        align-items: center !important; gap: 8px !important;
        border-bottom: 1px solid rgba(255,255,255,.1) !important;
        cursor: pointer !important;
    }
}

/* ── 6. GRADIENT HEADERS — text gradient on h1 where appropriate ── */
.funda-inner-hero h1 .text-gradient,
.funda-inner-hero .gradient-text,
.sc-hero-gradient { 
    background: var(--color-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
/* Gradient accent line under page hero headings */
.funda-inner-hero::after {
    content: '' !important;
    position: absolute !important; bottom: 0 !important; left: 0 !important;
    width: 100% !important; height: 3px !important;
    background: var(--color-gradient) !important;
}
/* Gradient on section eyebrow labels */
.eyebrow, .sec-head .eyebrow {
    background: var(--color-gradient) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
}

/* ── 7. FOOTER: remove Explore column entirely ── */
.footer-grid { grid-template-columns: 1.8fr 1fr 1.4fr !important; }
@media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr !important; } }
/* Hide the explore column (second child) */
.footer-grid > *:nth-child(2) { display: none !important; }

/* ── 8. COURSES SEARCH BAR — styled in template, CSS here ── */
.courses-search-bar {
    display: flex; gap: 8px; margin-bottom: 20px;
    background: #fff; border-radius: var(--radius-full);
    border: 1.5px solid var(--color-border);
    padding: 6px 6px 6px 18px;
    box-shadow: var(--shadow-sm);
    transition: border-color .2s, box-shadow .2s;
}
.courses-search-bar:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.courses-search-bar input {
    flex: 1; border: 0 !important; outline: none !important;
    background: transparent !important; font-size: .9rem !important;
    color: var(--color-text) !important; padding: 0 !important;
    box-shadow: none !important;
}
.courses-search-bar input::placeholder { color: var(--color-text-lighter); }
.courses-search-bar button {
    padding: 9px 18px !important;
    background: var(--color-gradient) !important;
    color: #fff !important; border: 0 !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important; font-size: .85rem !important;
    cursor: pointer !important; flex-shrink: 0 !important;
}

/* ── 9. Checkout placeholder text styling ── */
.woocommerce-checkout input::placeholder,
.woocommerce-checkout select,
.wc-block-components-text-input input::placeholder {
    color: var(--color-text-lighter) !important;
    font-size: .88rem !important;
    font-family: var(--font-body) !important;
}
.wc-block-components-form-step__heading,
.wc-block-components-form-step__description {
    font-family: var(--font-display) !important;
    color: var(--color-dark) !important;
}
.wc-block-components-label { 
    color: var(--color-dark) !important;
    font-weight: 600 !important;
    font-size: .84rem !important;
    font-family: var(--font-body) !important;
}
/* WC Blocks input override */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-country-input input,
.wc-block-components-state-input input {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: .9rem !important;
    color: var(--color-text) !important;
    background: #fff !important;
    padding: 11px 14px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
    outline: none !important;
}

/* ── 10. Course card: fix card flip error ──
   Ensure both sides fill height and no layout bleed */
.course-card { height: 100%; min-height: 340px; }
.course-card-inner { height: 100%; min-height: 340px; }
.course-card-front { height: 100%; }
.course-card-back { min-height: 340px; }
/* On mobile: disable flip entirely, show front only */
@media (max-width: 767px) {
    .course-card { perspective: none; }
    .course-card-inner { transform: none !important; transition: none !important; }
    .course-card-back { display: none !important; }
    .course-card-front { border-radius: var(--radius-lg) !important; }
}

/* ── Search overlay mobile fix ── */
@media (max-width: 600px) {
    .search-overlay {
        align-items: flex-start !important;
        padding: 12px !important;
        padding-top: calc(var(--header-height) + 12px) !important;
    }
    .search-overlay-inner {
        width: 100% !important;
        padding: 20px 16px !important;
        border-radius: var(--radius-lg) !important;
    }
    .search-overlay form {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .search-overlay input[type="search"] {
        font-size: .9rem !important;
        width: 100% !important;
    }
    .search-overlay .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .search-overlay-close {
        top: calc(var(--header-height) + 20px) !important;
        right: 20px !important;
    }
}

/* ============================================================
   v1.6 COMPREHENSIVE MOBILE + UX FIXES
   ============================================================ */

/* ── 1. SEARCH RESULTS — responsive on mobile ── */
@media (max-width: 600px) {
    .funda-search-results-item {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .funda-search-results-item img {
        width: 100% !important;
        aspect-ratio: 16/9 !important;
    }
}

/* ── 2. COURSE CARDS — compact on mobile, no wasted height ── */
@media (max-width: 767px) {
    .course-card { min-height: auto !important; height: auto !important; }
    .course-card-inner { min-height: auto !important; height: auto !important; }
    .course-card-front { min-height: auto !important; }
    .course-card-thumb { aspect-ratio: 4/3 !important; }
    .course-card-body { padding: 12px !important; }
    .course-card h3 { font-size: .88rem !important; margin-bottom: 6px !important; }
    .course-card-category { font-size: .65rem !important; margin-bottom: 4px !important; }
    .course-card-footer { padding-top: 8px !important; }
    .course-card-footer .btn-enroll-sm,
    .course-card-footer .funda-course-enroll,
    .course-card-footer .funda-free-enroll { font-size: .72rem !important; padding: 6px 10px !important; }
    .course-card-meta { display: none !important; }
    .funda-course-grid { gap: 10px !important; }
}

/* ── 3. MOBILE MENU — footer buttons visible without scroll ── */
.mobile-menu-footer {
    margin-top: auto !important;
    padding: 12px 16px !important;
    border-top: 1px solid var(--color-border) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    position: sticky !important;
    bottom: 0 !important;
    background: #fff !important;
    z-index: 2 !important;
}
.mobile-menu nav { flex: 1; overflow-y: auto; min-height: 0; }
.mobile-menu { display: flex; flex-direction: column; }

/* ── 4. COURSE FILTERS MOBILE — full overlay with close button ── */
@media (max-width: 1023px) {
    .shop-sidebar {
        position: fixed !important;
        top: 0 !important; left: 0 !important; bottom: 0 !important;
        width: min(320px, 85vw) !important;
        z-index: 1001 !important;
        display: none !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
        border: 0 !important;
        transform: translateX(-100%);
        transition: transform .3s ease;
    }
    .shop-sidebar.active {
        display: flex !important;
        transform: translateX(0) !important;
    }
    .shop-sidebar-close {
        display: flex !important;
        width: 100% !important;
        padding: 16px 20px !important;
        border-radius: 0 !important;
        background: rgba(255,255,255,.1) !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: .9rem !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        border-bottom: 1px solid rgba(255,255,255,.1) !important;
        cursor: pointer !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
    }
    .shop-sidebar-overlay {
        display: none !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 1000 !important;
        background: rgba(28,34,51,.6) !important;
    }
    .shop-sidebar-overlay.active { display: block !important; }
}

/* ── 5. CHECKOUT FIELDS — WC Blocks floating label fix ── */
/* WooCommerce Blocks uses floating labels that overlap typed text */
.wc-block-components-text-input {
    position: relative !important;
}
.wc-block-components-text-input label {
    position: absolute !important;
    top: 8px !important;
    left: 14px !important;
    font-size: .72rem !important;
    color: var(--color-text-light) !important;
    font-weight: 600 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: all .15s ease !important;
    background: #fff !important;
    padding: 0 4px !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label {
    top: -8px !important;
    font-size: .68rem !important;
    color: var(--color-primary) !important;
}
.wc-block-components-text-input input {
    padding-top: 20px !important;
    padding-bottom: 8px !important;
}
/* Select dropdowns */
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-select-input select {
    padding-top: 20px !important;
    padding-bottom: 8px !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
}
/* Error state — red border not full red background */
.wc-block-components-text-input.has-error input,
.wc-block-components-validation-error input {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(230,48,18,.1) !important;
    background: #fff !important;
}

/* ── 6. SINGLE WC PRODUCT — styled like course page ── */
.woocommerce div.product {
    padding: 32px 0 !important;
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
}
.woocommerce div.product .product_title {
    font-family: var(--font-display) !important;
    color: var(--color-dark) !important;
}
.woocommerce div.product div.images {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
}
.woocommerce div.product div.images img {
    border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--color-text-light) !important;
    line-height: 1.7 !important;
}
/* Related products */
.woocommerce .related.products,
.woocommerce .upsells.products {
    margin-top: 48px !important;
    padding-top: 32px !important;
    border-top: 1px solid var(--color-border) !important;
}
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
    font-family: var(--font-display) !important;
    font-size: 1.375rem !important;
    margin-bottom: 20px !important;
}

/* ── 7. ABOUT PAGE — responsive grid ── */
@media (max-width: 767px) {
    .entry-content [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .entry-content [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .entry-content [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    .entry-content [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    .entry-content [style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── 8. ACTIVE NAV ITEM — visual indicator ── */
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a,
.primary-nav .current_page_item > a {
    color: var(--color-primary) !important;
    background: var(--color-bg-warm) !important;
    font-weight: 700 !important;
}
.mobile-menu .current-menu-item > a,
.mobile-menu .current_page_item > a {
    color: var(--color-primary) !important;
    border-left: 3px solid var(--color-primary) !important;
    background: var(--color-bg-warm) !important;
    font-weight: 700 !important;
}

/* ── 9. EMPTY CART — redesign ── */
.wc-block-cart__empty-cart,
.cart-empty,
.funda-empty-cart {
    text-align: center !important;
    padding: 64px 20px !important;
}
.wc-block-cart__empty-cart__title,
.funda-empty-cart h2 {
    font-family: var(--font-display) !important;
    font-size: 1.5rem !important;
    color: var(--color-dark) !important;
    margin-bottom: 8px !important;
}
.wc-block-cart__empty-cart > p,
.funda-empty-cart p {
    color: var(--color-text-light) !important;
    margin-bottom: 24px !important;
}
.wc-block-cart__empty-cart .wc-block-cart__empty-cart__button,
.funda-empty-cart .btn {
    background: var(--color-gradient) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    text-decoration: none !important;
}

/* ── 10. WC CART BLOCK — modern card layout ── */
.wc-block-cart .wc-block-cart-items .wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 80px 1fr auto !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}
.wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__image img {
    width: 80px !important; height: 80px !important;
    object-fit: cover !important;
    border-radius: var(--radius-md) !important;
}
.wc-block-cart .wc-block-cart-item__product .wc-block-components-product-name {
    font-weight: 700 !important;
    color: var(--color-dark) !important;
    font-family: var(--font-display) !important;
}
.wc-block-cart .wc-block-components-quantity-selector {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
}
.wc-block-cart .wc-block-components-quantity-selector button {
    background: var(--color-bg-subtle) !important;
    color: var(--color-dark) !important;
}

/* ── 11. FORCE QUANTITY 1 on course products ── */
.wc-block-cart .wc-block-components-quantity-selector { display: none !important; }
.woocommerce .quantity { display: none !important; }

/* ── 12. WISHLIST BUTTON ── */
.funda-wishlist-btn {
    position: absolute; top: 10px; right: 10px;
    width: 34px; height: 34px;
    background: rgba(255,255,255,.9);
    border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transition: var(--transition);
    z-index: 3;
    color: var(--color-text-light);
}
.funda-wishlist-btn:hover,
.funda-wishlist-btn.wishlisted {
    color: var(--color-primary);
    background: #fff;
    transform: scale(1.1);
}
.funda-wishlist-btn.wishlisted svg { fill: var(--color-primary); }

/* ── 13. COURSE CARD HOVER — Tutor LMS teal style from screenshot ── */
/* The screenshot shows: on hover, the FRONT card gets a coloured overlay
   with course details visible. We replicate this without 3D flip. */
@media (min-width: 768px) {
    /* Remove the 3D flip entirely — replace with overlay on hover */
    .course-card { perspective: none !important; }
    .course-card-inner {
        transform-style: flat !important;
        transition: none !important;
    }
    .course-card:hover .course-card-inner { transform: none !important; }
    .course-card-back { display: none !important; }
    .course-card-front { position: relative !important; }

    /* Hover overlay — slides up from bottom */
    .course-card-front::after {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(to top, var(--color-dark) 0%, rgba(28,34,51,.85) 60%, rgba(28,34,51,.4) 100%);
        border-radius: var(--radius-lg);
        opacity: 0;
        transition: opacity .35s ease;
        z-index: 2;
        pointer-events: none;
    }
    .course-card:hover .course-card-front::after { opacity: 1; }

    /* Show card body text on hover as white */
    .course-card:hover .course-card-body {
        position: relative; z-index: 3;
    }
    .course-card:hover .course-card-body h3 a,
    .course-card:hover .course-card-category,
    .course-card:hover .course-card-footer .price-display {
        color: #fff !important;
    }
    .course-card:hover .course-card-rating .stars { color: var(--color-orange) !important; }
    .course-card:hover .course-card-rating .count { color: rgba(255,255,255,.6) !important; }
    .course-card:hover .course-card-footer {
        border-top-color: rgba(255,255,255,.15) !important;
    }
}

/* ── 14. HOMEPAGE SECTIONS — responsive ── */
@media (max-width: 600px) {
    .funda-hero-stats { gap: 16px; }
    .funda-hero-stat .num { font-size: 1.25rem; }
    .funda-categories { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .category-card { padding: 14px 8px; }
    .category-card .icon { width: 36px; height: 36px; font-size: 1rem; margin-bottom: 6px; }
    .category-card .name { font-size: .75rem; }
    .funda-testimonials { gap: 10px; }
    .testimonial { padding: 16px 14px; }
}

/* ── 15. COURSES PAGE SEARCH BAR — visible ── */
.courses-search-bar { margin-bottom: 16px; }
@media (max-width: 600px) {
    .courses-search-bar { padding: 4px 4px 4px 12px; }
    .courses-search-bar input { font-size: .85rem !important; }
    .courses-search-bar button { padding: 8px 14px !important; font-size: .8rem !important; }
}

/* ============================================================
   v1.7 SENIOR AUDIT FIXES
   ============================================================ */

/* ── MOBILE: 1 column course grid (override previous 2-col) ── */
@media (max-width: 767px) {
    .funda-course-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .funda-course-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── PAGE HEADERS: full-width — simple, no calc tricks ── */
.funda-contact-hero,
.funda-inner-hero,
.funda-page-hero,
.shop-header,
.sc-hero {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
}
.funda-contact-hero .wrap,
.funda-inner-hero .wrap,
.funda-page-hero .wrap,
.shop-header .wrap,
.sc-hero > .wrap {
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* ── COURSE FILTER: completely rebuilt for mobile AND desktop ── */
/* Desktop sidebar */
@media (min-width: 1024px) {
    .shop-sidebar {
        display: block !important;
        position: static !important;
        width: auto !important;
        border-radius: var(--radius-lg) !important;
        transform: none !important;
    }
    .shop-sidebar-close { display: none !important; }
    .shop-sidebar-overlay { display: none !important; }
}

/* Mobile filter — slide-in drawer */
@media (max-width: 1023px) {
    .shop-sidebar-overlay {
        position: fixed !important; inset: 0 !important;
        z-index: 1000 !important; display: none !important;
        background: rgba(28,34,51,.55) !important;
    }
    .shop-sidebar-overlay.active { display: block !important; }

    .shop-sidebar {
        position: fixed !important;
        top: 0 !important; left: 0 !important; bottom: 0 !important;
        width: min(300px, 85vw) !important;
        z-index: 1001 !important;
        display: block !important;
        transform: translateX(-110%) !important;
        transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
        border: 0 !important;
        background: var(--color-dark-soft, #2a3347) !important;
        flex-direction: column !important;
    }
    .shop-sidebar.active {
        transform: translateX(0) !important;
    }
    .shop-sidebar-close {
        display: flex !important;
        align-items: center !important; gap: 8px !important;
        width: 100% !important; padding: 18px 20px !important;
        border: 0 !important; border-radius: 0 !important;
        background: rgba(255,255,255,.06) !important;
        color: #fff !important; font-weight: 700 !important;
        font-size: .9rem !important; cursor: pointer !important;
        border-bottom: 1px solid rgba(255,255,255,.1) !important;
        position: sticky !important; top: 0 !important;
        z-index: 2 !important;
    }
    body.filter-open { overflow: hidden !important; }
}

/* ── WC QUANTITY: only hide on course products, not ALL ── */
/* We use sold_individually instead — WC will auto-hide qty for those */
.woocommerce .quantity { display: block !important; }
.wc-block-cart .wc-block-components-quantity-selector { display: flex !important; }
/* But for products marked sold_individually, WC removes the quantity field automatically */

/* ── EMPTY CART: works with both classic and Blocks ── */
.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .cart-empty,
.wc-block-cart__empty-cart {
    text-align: center !important;
    padding: 60px 20px !important;
}
.wc-block-cart__empty-cart {
    background: #fff !important;
    border-radius: var(--radius-lg) !important;
    max-width: 500px !important;
    margin: 32px auto !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ── SINGLE PRODUCT: ensure it renders correctly ── */
.woocommerce.single-product .funda-wc-main { background: #fff !important; }
.woocommerce.single-product .funda-wc-main .wrap { max-width: 1200px !important; }
.woocommerce div.product div.images,
.woocommerce div.product div.thumbnails { 
    border-radius: var(--radius-lg) !important; 
    overflow: hidden !important; 
}
.woocommerce div.product div.summary { 
    padding-left: 0 !important;
}
.woocommerce div.product div.summary .product_title { 
    font-size: clamp(1.375rem, 3vw, 2rem) !important;
    color: var(--color-dark) !important;
    font-family: var(--font-display) !important;
}
.woocommerce div.product div.summary p.price {
    font-size: 1.5rem !important;
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
}
/* Add to cart button on single product */
.woocommerce div.product form.cart .single_add_to_cart_button {
    background: var(--color-gradient) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    padding: 14px 32px !important;
    font-weight: 700 !important;
    font-family: var(--font-display) !important;
    border: 0 !important;
    font-size: .95rem !important;
    box-shadow: var(--shadow-glow) !important;
}
/* Reviews on single product */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 16px !important;
}
.woocommerce #review_form #respond .form-submit input {
    background: var(--color-gradient) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    border: 0 !important;
    cursor: pointer !important;
}
/* Related products: proper grid */
.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 768px) {
    .woocommerce .related ul.products,
    .woocommerce .upsells ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ── CARD ON MOBILE: tighter ── */
@media (max-width: 767px) {
    .course-card-thumb { aspect-ratio: 16/9 !important; }
    .course-card-body { padding: 14px !important; }
    .course-card h3 { font-size: .92rem !important; }
    .course-card-footer .btn-enroll-sm { font-size: .78rem !important; padding: 7px 14px !important; }
}

/* ── WC Blocks: cart & checkout button colour ── */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block a {
    background: var(--color-gradient) !important;
    background-color: var(--color-primary, #E63012) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    padding: 14px 28px !important;
    text-decoration: none !important;
}
.wc-block-components-button:not(.is-link):hover { 
    box-shadow: var(--shadow-glow) !important;
    color: #fff !important;
}

/* ── WC Blocks: form inputs ── */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-select-input select,
.wc-block-components-combobox-control input {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    color: var(--color-text) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox-control input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(230,48,18,.1) !important;
    outline: none !important;
}

/* ── Header progress bar position fix ── */
.header-progress-bar { z-index: 101 !important; }

/* ================================================================
   FUNDA v1.8 — SURGICAL ADDITIONS (appended, per Rule 14)
   ================================================================ */

/* ── 1. FULL-WIDTH HEROES — simple, no breakout tricks ── */
/* These elements are direct children of <main>, which is already full-width.
   Just ensure they span 100% width with no margin, no left offset. */
.funda-full-hero,
.funda-contact-hero,
.funda-inner-hero,
.funda-page-hero {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    border-radius: 0;
    box-sizing: border-box;
}
.funda-full-hero > .wrap,
.funda-contact-hero > .wrap,
.funda-inner-hero > .wrap,
.funda-page-hero > .wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}
/* shop-header: also full-width, no offset */
.shop-header {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    border-radius: 0;
    box-sizing: border-box;
}
.shop-header > .wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}
/* Prevent horizontal scroll from other elements */
body { overflow-x: hidden; }

/* ── 2. SITE HEADER — full width, no blank space above ──  */
html { margin-top: 0 !important; } /* WP admin bar handled by WP itself */
body { margin: 0; padding: 0; }
.site-header { width: 100%; box-sizing: border-box; }

/* ── 3. COURSE CARD HOVER OVERLAY ── */
/* Remove old pseudo-element overlay */
.course-card-front::after { display: none !important; }

/* Real overlay div */
.course-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: var(--radius-lg);
    background: linear-gradient(to top,
        rgba(28,34,51,.98) 0%,
        rgba(28,34,51,.92) 45%,
        rgba(28,34,51,.7) 75%,
        rgba(28,34,51,.35) 100%
    );
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
@media (min-width: 768px) {
    .course-card:hover .course-card-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (max-width: 767px) {
    .course-card-overlay { display: none; }
}

/* Overlay content */
.overlay-title {
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 7px;
    line-height: 1.3;
}
.overlay-title a { color: #fff !important; text-decoration: none; }
.overlay-title a:hover { color: var(--color-orange, #FF8C00) !important; }

.overlay-desc {
    font-size: .75rem;
    color: rgba(255,255,255,.78);
    line-height: 1.5;
    margin: 0 0 9px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.overlay-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    font-size: .72rem;
    color: rgba(255,255,255,.65);
}
.overlay-meta span { display: inline-flex; align-items: center; gap: 3px; }
.overlay-rating { color: #FFB800; font-weight: 700; }
.overlay-rating small { color: rgba(255,255,255,.45); font-weight: 400; }
.overlay-price {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}
.overlay-cta { margin-top: 2px; }
.overlay-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, #E63012, #FF8C00);
    color: #fff;
    border: 0;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: .83rem;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease;
    box-shadow: 0 4px 14px rgba(230,48,18,.3);
}
.overlay-btn:hover {
    box-shadow: 0 6px 20px rgba(230,48,18,.5);
    transform: translateY(-1px);
    color: #fff;
}

/* ── 4. HIDE ENROLLED COUNT ── */
.tutor-course-students,
.tutor-course-enrolled,
.tutor-enrolled-count,
.sc-meta-row .sc-enrolled-count {
    display: none !important;
}
.course-card-instructor { display: none !important; }

/* ── 5. REMOVE COURSE FILTER SIDEBAR ── */
.shop-filter-toggle { display: none !important; }
.shop-sidebar,
.shop-sidebar-overlay { display: none !important; }
.shop-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
}
.shop-main { width: 100% !important; }

/* ── 6. BACK TO TOP — orange outline ── */
.back-to-top {
    border: 2px solid var(--color-primary, #E63012) !important;
    color: var(--color-primary, #E63012) !important;
    background: #fff !important;
    right: 20px !important;
    bottom: 82px !important;
}
.back-to-top:hover {
    background: linear-gradient(135deg, #E63012, #FF8C00) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* ── 7. WC PRODUCT ARCHIVE CARDS ── */
.woocommerce ul.products li.product {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    background: #fff !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: transparent !important;
}
.woocommerce ul.products li.product a img {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: block !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 12px 14px 4px !important;
    font-family: var(--font-display) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
}
.woocommerce ul.products li.product .price {
    padding: 0 14px 8px !important;
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    color: var(--color-dark) !important;
    font-size: 1rem !important;
}
.woocommerce ul.products li.product .price ins { text-decoration: none !important; }
.woocommerce ul.products li.product .button {
    margin: 0 14px 14px !important;
    background: linear-gradient(135deg, #E63012, #FF8C00) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    font-size: .82rem !important;
    border: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.woocommerce ul.products li.product .added_to_cart {
    margin: 0 14px 14px !important;
    background: var(--color-dark) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    padding: 10px 18px !important;
    font-size: .82rem !important;
    display: inline-flex !important;
}

/* ── 8. CART TABLE ── */
.woocommerce table.shop_table {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
}
.woocommerce table.shop_table th {
    background: var(--color-dark) !important;
    color: #fff !important;
    font-family: var(--font-display) !important;
    font-size: .78rem !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: 13px 16px !important;
}
.woocommerce table.shop_table td { padding: 14px 16px !important; }
.woocommerce .cart .product-thumbnail img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
}
.woocommerce .cart .product-name a { font-weight: 700 !important; color: var(--color-dark) !important; }

/* WC Blocks cart items */
.wc-block-cart-items__row { border-bottom: 1px solid var(--color-border-light) !important; }
.wc-block-cart-item__image img {
    width: 80px !important; height: 80px !important;
    object-fit: cover !important;
    border-radius: var(--radius-md) !important;
}
.wc-block-components-product-name {
    font-weight: 700 !important;
    font-family: var(--font-display) !important;
    color: var(--color-dark) !important;
}

/* Cart totals */
.cart_totals {
    background: #fff !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    box-shadow: var(--shadow-sm) !important;
}
.cart_totals h2 { font-family: var(--font-display) !important; font-size: 1.1rem !important; margin-bottom: 16px !important; }

/* Proceed to checkout */
.wc-proceed-to-checkout .checkout-button,
.wc-proceed-to-checkout a.button {
    background: linear-gradient(135deg, #E63012, #FF8C00) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    font-family: var(--font-display) !important;
    border: 0 !important;
    padding: 15px 28px !important;
    font-size: .95rem !important;
}

/* ── 9. CHECKOUT FIELDS ── */
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.wc-block-components-text-input input,
.wc-block-components-combobox-control input,
.wc-block-components-select-input select {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: .9rem !important;
    color: var(--color-text) !important;
    padding: 11px 14px !important;
}
.woocommerce-checkout .input-text:focus,
.wc-block-components-text-input input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(230,48,18,.1) !important;
    outline: none !important;
}
#place_order,
.wc-block-checkout__actions_row button {
    background: linear-gradient(135deg, #E63012, #FF8C00) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    font-family: var(--font-display) !important;
    border: 0 !important;
    padding: 15px 28px !important;
}

/* ── 10. RELATED PRODUCTS ── */
.woocommerce .related.products,
.woocommerce .upsells.products {
    margin-top: 40px !important;
    padding-top: 28px !important;
    border-top: 1px solid var(--color-border) !important;
}
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
    font-family: var(--font-display) !important;
    font-size: 1.25rem !important;
    margin-bottom: 18px !important;
}

/* ── 11. MOBILE RESPONSIVENESS ── */
/* 1 column on mobile, 2 on tablet, 3 on desktop for course grid */
@media (max-width: 639px) {
    .funda-course-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .course-card-body { padding: 12px !important; }
    .course-card h3 { font-size: .88rem !important; }
    .course-card-category { font-size: .65rem !important; }
    .course-card-footer .btn-enroll-sm { font-size: .75rem !important; padding: 6px 12px !important; }
    .course-card-meta { display: none !important; }
    /* WC products */
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .funda-course-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile header — prevent overlap with content */
@media (max-width: 1023px) {
    .mobile-menu {
        display: flex !important;
        flex-direction: column !important;
    }
    .mobile-menu nav { flex: 1; overflow-y: auto; }
    .mobile-menu-footer {
        position: sticky !important;
        bottom: 0 !important;
        background: #fff !important;
        padding: 12px 16px !important;
        border-top: 1px solid var(--color-border) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        z-index: 2 !important;
    }
}

/* Hero on mobile — always full screen width */
@media (max-width: 767px) {
    .funda-contact-hero,
    .funda-inner-hero,
    .funda-page-hero,
    .funda-full-hero,
    .shop-header {
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .funda-contact-hero > .wrap,
    .funda-inner-hero > .wrap,
    .funda-page-hero > .wrap {
        padding: 0 16px !important;
    }
    /* About/FAQ inline grid styles */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
    }
}

/* Search overlay mobile */
@media (max-width: 600px) {
    .search-overlay {
        padding: 12px !important;
        padding-top: calc(var(--header-height, 70px) + 12px) !important;
        align-items: flex-start !important;
    }
    .search-overlay-inner {
        width: 100% !important;
        padding: 18px 16px !important;
        border-radius: var(--radius-lg) !important;
    }
    .search-overlay form { flex-direction: column !important; gap: 10px !important; }
    .search-overlay input[type="search"] { width: 100% !important; }
    .search-overlay .btn { width: 100% !important; }
}

/* ── FINAL: force filter sidebar completely gone ── */
.shop-sidebar { display: none !important; }
.shop-filter-toggle { display: none !important; }
.shop-sidebar-overlay { display: none !important; }

/* ================================================================
   v1.9 FINAL TARGETED FIXES
   ================================================================ */

/* ── 1. HERO WIDTH — definitive rule, overrides everything above ── */
.funda-contact-hero,
.funda-inner-hero,
.funda-page-hero,
.funda-full-hero,
.shop-header,
.sc-hero {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* ── 2. EMPTY CART — style the WC default output + related products ── */
.woocommerce-cart .cart-empty,
.woocommerce-cart .return-to-shop {
    text-align: center;
}
.woocommerce-cart .cart-empty {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--color-dark);
    margin-bottom: 12px;
}
.woocommerce-cart .return-to-shop a {
    display: inline-block;
    padding: 13px 28px;
    background: linear-gradient(135deg, #E63012, #FF8C00);
    color: #fff;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-family: var(--font-display);
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(230,48,18,.25);
}
/* Styled related products on empty cart (New in store) */
.woocommerce-cart .woocommerce ul.products li.product {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    background: #fff !important;
    transition: transform .2s, box-shadow .2s !important;
}
.woocommerce-cart .woocommerce ul.products li.product:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}
.woocommerce-cart .woocommerce ul.products li.product a img {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
}
.woocommerce-cart .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
    padding: 12px 14px 4px !important;
}
.woocommerce-cart .woocommerce ul.products li.product .price {
    padding: 0 14px 8px !important;
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    color: var(--color-dark) !important;
}
.woocommerce-cart .woocommerce ul.products li.product .price ins { text-decoration: none !important; }
.woocommerce-cart .woocommerce ul.products li.product .price del { color: var(--color-text-lighter) !important; }
/* Sale badge */
.woocommerce span.onsale {
    background: linear-gradient(135deg, #E63012, #FF8C00) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: .72rem !important;
    padding: 4px 10px !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.4 !important;
}
.woocommerce-cart .woocommerce ul.products li.product .button {
    margin: 0 14px 14px !important;
    background: linear-gradient(135deg, #E63012, #FF8C00) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
    font-size: .82rem !important;
    border: 0 !important;
    display: inline-flex !important;
}

/* ── 3. CHECKOUT (WC Blocks) — order summary + all fields ── */
/* Order summary box */
.wc-block-components-order-summary {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}
.wc-block-components-order-summary-item__image img {
    border-radius: var(--radius-md) !important;
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
}
.wc-block-components-order-summary-item__description {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
}
.wc-block-components-totals-item { border-top: 1px solid var(--color-border) !important; }
.wc-block-components-totals-footer-item { border-top: 2px solid var(--color-dark) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
}
/* Checkout section headings */
.wc-block-components-form-step__heading,
.wc-block-components-form-step__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
}
/* Fields */
.wc-block-components-text-input input,
.wc-block-components-combobox-control input,
.wc-block-components-select select {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: .9rem !important;
    color: var(--color-text) !important;
    background: #fff !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox-control input:focus {
    border-color: #E63012 !important;
    box-shadow: 0 0 0 2px rgba(230,48,18,.1) !important;
    outline: none !important;
}
/* Checkout place order button */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions button[type="submit"] {
    background: linear-gradient(135deg, #E63012, #FF8C00) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 15px 28px !important;
    width: 100% !important;
    box-shadow: 0 4px 18px rgba(230,48,18,.25) !important;
}
/* Proceed to checkout button (cart page) */
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout .button {
    background: linear-gradient(135deg, #E63012, #FF8C00) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    border: 0 !important;
}

/* ── 4. HIDE REVIEW AUTHOR NAME ── */
.woocommerce #reviews #comments ol.commentlist li .comment_container .comment-text p.meta,
.woocommerce #reviews #comments ol.commentlist li .comment_container img.avatar,
.woocommerce-Reviews .reviewer,
.woocommerce #reviews .reviewer,
.comment-author .fn,
.comment-author img,
.woocommerce .comment-author {
    display: none !important;
}
/* Keep the star rating visible */
.woocommerce #reviews .star-rating { display: flex !important; }

/* ── 5. SEARCH — prevent duplicate results (filter to courses+products only) ── */
/* This is handled in search.php but we style the results here */
.funda-search-results-item { overflow: hidden; }

/* ── 6. MOBILE RESPONSIVE — single column, no overflow ── */
@media (max-width: 639px) {
    .funda-course-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .woocommerce ul.products { grid-template-columns: 1fr !important; gap: 12px !important; }
    .course-card-body { padding: 12px !important; }
    .course-card h3 { font-size: .88rem !important; }
    .course-card-category { font-size: .65rem !important; }
    /* Hero on mobile */
    .funda-contact-hero { padding: 32px 0 !important; }
    .funda-inner-hero { padding: 32px 0 !important; }
    /* About page inline grid */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
    /* Mobile menu footer always visible */
    .mobile-menu-footer {
        position: sticky !important;
        bottom: 0 !important;
        background: #fff !important;
        z-index: 2 !important;
        border-top: 1px solid var(--color-border) !important;
        padding: 12px 16px !important;
    }
}

/* ================================================================
   v2.0 FINAL — Mobile, Side Cart, Checkout Fields, Product Cards
   ================================================================ */

/* ── 1. SINGLE COURSE PAGE — mobile card centered, not right-offset ── */
@media (max-width: 1023px) {
    .sc-hero > .wrap {
        padding: 0 !important;
        max-width: 100% !important;
    }
    .sc-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .sc-info {
        padding: 24px 20px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .sc-card-wrap {
        padding: 0 16px 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: static !important;
    }
    .sc-card {
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important; /* CENTER it */
        border-radius: var(--radius-lg) !important;
    }
}

/* ── 2. SIDE CART — clean grid layout, no overlap ── */
.side-cart .mini_cart_item {
    display: grid !important;
    grid-template-columns: 68px 1fr 28px !important;
    grid-template-rows: auto auto !important;
    gap: 0 12px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    position: static !important;
    align-items: start !important;
}
.side-cart .mini_cart_item img {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 68px !important;
    height: 68px !important;
    object-fit: cover !important;
    border-radius: var(--radius-md) !important;
    display: block !important;
}
.side-cart .mini_cart_item a:not(.remove) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-weight: 700 !important;
    font-size: .85rem !important;
    color: var(--color-dark) !important;
    line-height: 1.35 !important;
    display: block !important;
    padding-right: 0 !important;
}
.side-cart .mini_cart_item .quantity {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: .78rem !important;
    color: var(--color-text-light) !important;
    margin-top: 3px !important;
}
.side-cart .mini_cart_item .remove {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: var(--color-border-light) !important;
    color: var(--color-text-light) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    align-self: start !important;
    margin-top: 2px !important;
}
.side-cart .mini_cart_item .remove:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}
/* Side cart total + checkout area */
.side-cart .woocommerce-mini-cart__total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    font-weight: 800 !important;
    font-family: var(--font-display) !important;
    font-size: 1rem !important;
    border-top: 2px solid var(--color-border) !important;
    margin: 0 !important;
}
.side-cart .woocommerce-mini-cart__total strong { font-weight: 800 !important; }
.side-cart .woocommerce-mini-cart__buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 20px 20px !important;
}
.side-cart .woocommerce-mini-cart__buttons a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 13px 20px !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    text-align: center !important;
}
.side-cart .woocommerce-mini-cart__buttons .wc-forward:not(.checkout) {
    background: transparent !important;
    border: 1.5px solid var(--color-border) !important;
    color: var(--color-dark) !important;
}
.side-cart .woocommerce-mini-cart__buttons .checkout {
    background: linear-gradient(135deg, #E63012, #FF8C00) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 16px rgba(230,48,18,.25) !important;
}

/* ── 3. WC BLOCKS CHECKOUT FIELDS — fix label/value overlap ── */
/* WooCommerce Blocks uses floating labels. The issue is label sits ON TOP of typed text.
   Fix: give input top padding so text sits below the label. */
.wc-block-components-text-input {
    position: relative !important;
}
.wc-block-components-text-input label {
    position: absolute !important;
    top: 14px !important;
    left: 15px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: var(--color-text-light) !important;
    pointer-events: none !important;
    transition: top .15s ease, font-size .15s ease, color .15s ease !important;
    z-index: 1 !important;
    background: transparent !important;
    line-height: 1 !important;
}
/* When input has content OR is focused, move label to top */
.wc-block-components-text-input.has-value label,
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label {
    top: 6px !important;
    font-size: .68rem !important;
    color: var(--color-primary) !important;
}
/* Input padding: top room for the floated label */
.wc-block-components-text-input input {
    padding-top: 22px !important;
    padding-bottom: 8px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    height: 54px !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    font-size: .9rem !important;
    color: var(--color-dark) !important;
    font-family: var(--font-body) !important;
    background: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.wc-block-components-text-input input:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(230,48,18,.1) !important;
}
/* Combobox (country/state selects) */
.wc-block-components-combobox {
    position: relative !important;
}
.wc-block-components-combobox label {
    position: absolute !important;
    top: 6px !important;
    left: 15px !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.wc-block-components-combobox input,
.wc-block-components-combobox-control input {
    padding-top: 22px !important;
    padding-bottom: 8px !important;
    padding-left: 14px !important;
    height: 54px !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    font-size: .9rem !important;
    color: var(--color-dark) !important;
    font-family: var(--font-body) !important;
    box-sizing: border-box !important;
}
/* Error state */
.wc-block-components-text-input.has-error input {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(230,48,18,.1) !important;
}

/* Classic WC checkout fields */
.woocommerce form .form-row label {
    font-weight: 600 !important;
    font-size: .82rem !important;
    color: var(--color-dark) !important;
    display: block !important;
    margin-bottom: 5px !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    font-size: .9rem !important;
    font-family: var(--font-body) !important;
    color: var(--color-dark) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(230,48,18,.1) !important;
}

/* ── 4. WC PRODUCT CARDS — "New in store" + Shop page ── */
/* Reset WC default float layout */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product { float: none !important; width: auto !important; margin: 0 !important; }

/* Card shell */
.woocommerce ul.products li.product {
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
    position: relative !important;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(28,34,51,.1) !important;
    border-color: transparent !important;
}
/* Thumbnail */
.woocommerce ul.products li.product a:has(img),
.woocommerce ul.products li.product a.woocommerce-loop-product__link { display: block !important; }
.woocommerce ul.products li.product a img {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transition: transform .4s ease !important;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04) !important; }
/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    padding: 12px 14px 4px !important;
    font-family: var(--font-display) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
    margin: 0 !important;
    flex: 1 !important;
    line-height: 1.35 !important;
}
/* Price */
.woocommerce ul.products li.product .price {
    display: block !important;
    padding: 4px 14px 10px !important;
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    color: var(--color-dark) !important;
    font-size: 1rem !important;
    margin: 0 !important;
}
.woocommerce ul.products li.product .price del {
    color: var(--color-text-lighter) !important;
    font-weight: 400 !important;
    font-size: .82em !important;
    margin-right: 4px !important;
}
.woocommerce ul.products li.product .price ins { text-decoration: none !important; }
/* Add to cart button */
.woocommerce ul.products li.product .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 14px 14px !important;
    padding: 10px 20px !important;
    background: linear-gradient(135deg, #E63012, #FF8C00) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    font-size: .82rem !important;
    border: 0 !important;
    box-shadow: 0 3px 12px rgba(230,48,18,.22) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: box-shadow .2s, transform .2s !important;
    align-self: flex-start !important;
}
.woocommerce ul.products li.product .button:hover {
    box-shadow: 0 5px 20px rgba(230,48,18,.38) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}
/* View cart (added_to_cart) */
.woocommerce ul.products li.product .added_to_cart {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 14px 14px !important;
    padding: 8px 16px !important;
    background: var(--color-dark) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: linear-gradient(135deg, #E63012, #FF8C00) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    font-family: var(--font-display) !important;
    padding: 4px 10px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    border: 0 !important;
    z-index: 2 !important;
}
/* Grid layout for product listings */
.woocommerce ul.products {
    display: grid !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}
@media (min-width: 768px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
}
@media (min-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; gap: 22px !important; }
}
@media (max-width: 480px) {
    .woocommerce ul.products { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ================================================================
   v2.1 — Shop hero, empty cart, checkout fields, review fix
   ================================================================ */

/* ── 1. CONSISTENT PAGE HERO — same dark style on all headers ── */
.funda-page-hero,
.shop-archive-hero {
    background: var(--color-dark) !important;
    padding: 36px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
/* Gradient orb */
.funda-page-hero::before,
.shop-archive-hero::before {
    content: '' !important;
    position: absolute !important;
    top: -80px !important; right: -80px !important;
    width: 260px !important; height: 260px !important;
    background: var(--color-gradient) !important;
    border-radius: 50% !important;
    opacity: .1 !important; filter: blur(50px) !important;
    pointer-events: none !important;
}
/* Grid lines texture */
.funda-page-hero::after,
.shop-archive-hero::after {
    content: '' !important;
    position: absolute !important; inset: 0 !important;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    pointer-events: none !important;
}
.funda-page-hero .wrap,
.shop-archive-hero .wrap {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}
.funda-page-hero h1,
.shop-archive-hero h1 {
    color: #fff !important;
    margin: 0 0 3px !important;
    font-size: clamp(1.25rem, 4vw, 1.875rem) !important;
}
.funda-page-hero .page-hero-icon {
    width: 48px !important; height: 48px !important;
    background: var(--color-gradient) !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important; justify-content: center !important;
    color: #fff !important; flex-shrink: 0 !important;
}
.funda-page-hero .page-hero-meta,
.shop-archive-hero p {
    color: rgba(255,255,255,.65) !important;
    margin: 0 !important;
    font-size: .85rem !important;
}
/* Remove WC breadcrumb */
.woocommerce-breadcrumb { display: none !important; }

/* ── 2. SHOP TOOLBAR — results count + sorting ── */
.shop-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 0 18px !important;
    border-bottom: 1px solid var(--color-border) !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.woocommerce-result-count {
    color: var(--color-text-light) !important;
    font-size: .88rem !important;
    margin: 0 !important;
}
.woocommerce-ordering select {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 12px !important;
    font-size: .85rem !important;
    font-family: var(--font-body) !important;
    cursor: pointer !important;
    background: #fff !important;
}

/* ── 3. EMPTY CART — modern design ── */
.funda-empty-cart-wrap {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 20px 60px !important;
}
.funda-empty-cart-inner {
    text-align: center !important;
    padding: 60px 20px 48px !important;
    border-bottom: 1px solid var(--color-border) !important;
    margin-bottom: 48px !important;
}
.empty-cart-icon {
    width: 96px !important;
    height: 96px !important;
    background: var(--color-bg-warm) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 24px !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
}
.funda-empty-cart-inner h2 {
    font-size: 1.5rem !important;
    color: var(--color-dark) !important;
    margin-bottom: 10px !important;
}
.funda-empty-cart-inner p {
    color: var(--color-text-light) !important;
    margin-bottom: 28px !important;
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.empty-cart-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 28px !important;
    background: var(--color-gradient) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    font-family: var(--font-display) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(230,48,18,.25) !important;
    transition: box-shadow .2s, transform .2s !important;
}
.empty-cart-btn:hover {
    box-shadow: 0 6px 22px rgba(230,48,18,.4) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}
.empty-cart-crosssell h3 {
    font-size: 1.125rem !important;
    margin-bottom: 18px !important;
    color: var(--color-dark) !important;
}

/* ── 4. WC BLOCKS CHECKOUT — order summary + fields ── */
/* Order summary panel */
.wc-block-components-order-summary-item {
    display: flex !important;
    gap: 14px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    align-items: center !important;
}
.wc-block-components-order-summary-item__image img {
    width: 68px !important;
    height: 68px !important;
    object-fit: cover !important;
    border-radius: var(--radius-md) !important;
    flex-shrink: 0 !important;
}
.wc-block-components-order-summary-item__full-name {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
    font-size: .95rem !important;
}
.wc-block-components-totals-item {
    display: flex !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    font-size: .9rem !important;
}
.wc-block-components-totals-footer-item {
    padding: 14px 0 !important;
    border-bottom: 0 !important;
    border-top: 2px solid var(--color-dark) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    color: var(--color-dark) !important;
}
/* Checkout section headings */
.wc-block-components-form-step__heading {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
    margin-bottom: 16px !important;
}

/* ── 5. HIDE UNNECESSARY CHECKOUT FIELDS (via CSS — no billing address for courses) ── */
/* Address fields not needed for digital products */
.wc-block-checkout__add-note,
.woocommerce-shipping-fields,
.woocommerce-shipping-totals,
[data-type="shipping"] { display: none !important; }

/* ── 6. REVIEW STARS — no author ── */
.sc-review-stars-only {
    color: var(--color-orange) !important;
    font-size: 1rem !important;
    letter-spacing: 2px !important;
    margin-bottom: 6px !important;
}
.sc-review-card { padding: 16px !important; background: var(--color-bg-subtle) !important; border-radius: var(--radius-md) !important; margin-bottom: 10px !important; }
.sc-review-card p { margin: 0 !important; font-size: .88rem !important; color: var(--color-text-light) !important; line-height: 1.6 !important; }
/* Also hide WC review author on product pages */
.woocommerce #reviews .comment-author,
.woocommerce #reviews .reviewer,
.woocommerce .comment-author .fn,
.woocommerce #reviews img.avatar { display: none !important; }

/* ── 7. CART & CHECKOUT HERO HEADERS ── */
/* These are output by funda_wc_page_hero_output() via wp_body_open */
.funda-page-hero { margin-top: 0 !important; }
/* Kill duplicate WC page title */
.woocommerce-cart .woocommerce > h1,
.woocommerce-checkout .woocommerce > h1,
.woocommerce-cart h1.page-title,
.woocommerce-checkout h1.page-title { display: none !important; }

/* ── 8. SHOP PAGE — hide sidebar/filter since removed from PHP ── */
.shop-filter-toggle,
.shop-sidebar,
.shop-sidebar-overlay { display: none !important; }
.shop-main { width: 100% !important; }

/* ================================================================
   v2.2 — Checkout, Cart/Shop heroes, Layout fixes after wrap removal
   ================================================================ */

/* ── WC main wrapper — no padding (each template adds its own) ── */
.funda-wc-main {
    background: var(--color-bg-subtle);
}
.funda-wc-main > .wrap {
    /* Only applies when templates don't manage their own wrap */
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Cart and Checkout page hero ── */
.funda-wc-hero {
    width: 100% !important;
    margin: 0 !important;
    left: auto !important;
    border-radius: 0 !important;
}
.funda-wc-hero .wrap {
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* ── Shop archive page — give it breathing room after hero ── */
.shop-archive-hero + .wrap,
.funda-wc-main .wrap:last-child {
    padding-top: 28px;
    padding-bottom: 52px;
}

/* ── WC Blocks checkout — style the address section (show/hide via JS) ── */
/* When fundaIsVirtual=true, address section hidden via JS */
/* Ensure the remaining fields look clean */
.wc-block-checkout .wc-block-components-form-step { margin-bottom: 24px; }
.wc-block-checkout .wc-block-components-form-step__heading {
    font-family: var(--font-display) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
    border-bottom: 2px solid var(--color-border) !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
}
/* Input fields */
.wc-block-components-text-input input {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    font-size: .9rem !important;
    font-family: var(--font-body) !important;
    color: var(--color-dark) !important;
    background: #fff !important;
    transition: border-color .2s, box-shadow .2s !important;
    height: auto !important;
}
.wc-block-components-text-input input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(230,48,18,.1) !important;
    outline: none !important;
}
/* Label — NOT floating, sits above input */
.wc-block-components-text-input label,
.wc-block-components-combobox label {
    display: block !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    color: var(--color-dark) !important;
    margin-bottom: 5px !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    pointer-events: auto !important;
}
/* Remove floating label positioning entirely */
.wc-block-components-text-input.has-value label,
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label {
    top: auto !important;
    font-size: .82rem !important;
    color: var(--color-dark) !important;
}
.wc-block-components-text-input input {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
/* Country combobox */
.wc-block-components-combobox-control input {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    font-size: .9rem !important;
}
/* Order summary styling */
.wc-block-components-order-summary {
    background: #fff !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border) !important;
    overflow: hidden !important;
}
.wc-block-components-order-summary-item {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}
.wc-block-components-order-summary-item__image img {
    border-radius: var(--radius-md) !important;
    width: 64px !important; height: 64px !important;
    object-fit: cover !important;
}
.wc-block-components-totals-item {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}
.wc-block-components-totals-footer-item {
    padding: 14px 16px !important;
    border-top: 2px solid var(--color-dark) !important;
    border-bottom: 0 !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    color: var(--color-dark) !important;
}
/* Place order button */
.wc-block-checkout__actions .wc-block-components-button,
.wc-block-checkout__actions button[type="submit"] {
    background: linear-gradient(135deg, #E63012, #FF8C00) !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    border: 0 !important;
    color: #fff !important;
    padding: 14px 28px !important;
    box-shadow: 0 4px 16px rgba(230,48,18,.25) !important;
}