/**
 * JWB Ebook Sales — Frontend Stylesheet
 * Modern, high-converting, mobile-responsive design system.
 */

:root {
    --jwbes-primary: #4f46e5;
    --jwbes-primary-hover: #4338ca;
    --jwbes-primary-light: #e0e7ff;
    --jwbes-accent: #0284c7;
    --jwbes-accent-hover: #0369a1;
    --jwbes-text-main: #0f172a;
    --jwbes-text-muted: #64748b;
    --jwbes-bg-light: #f8fafc;
    --jwbes-bg-page: #f7f8fa;
    --jwbes-border: #e2e8f0;
    --jwbes-white: #ffffff;
    --jwbes-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --jwbes-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.05);
    --jwbes-shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.06);
    --jwbes-shadow-xl: 0 20px 35px rgba(15, 23, 42, 0.08);
    --jwbes-radius: 14px;
    --jwbes-global-header-offset: 62px;
}

/* Store page min-height fix & footer deduplication */
.jwbes-store-page,
.jwbes-landing,
.jwbes-result-wrap {
    min-height: auto !important;
    overflow-x: clip !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

body.jwbes-is-store-page,
body.single-jwb_ebook {
    overflow-x: clip !important;
}

body.jwbes-is-store-page .site-footer,
body.jwbes-is-store-page #colophon,
body.jwbes-is-store-page .footer-widgets,
body.jwbes-is-store-page .footer-bar,
body.jwbes-is-store-page .jwb-site-footer {
    display: none !important;
}

/* Reset / Scope / Unified Typography System */
.jwbes-landing,
.jwbes-result-page,
.jwbes-store-page,
.jwbes-policies-page,
.jwbes-modal {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
    color: var(--jwbes-text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

.jwbes-landing *,
.jwbes-landing *::before,
.jwbes-landing *::after,
.jwbes-result-page *,
.jwbes-store-page *,
.jwbes-policies-page *,
.jwbes-modal * {
    box-sizing: border-box;
}

.jwbes-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* PDP DYNAMIC BREADCRUMB */
.jwbes-pdp-breadcrumb {
    background: #ffffff !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
    padding: 8px 0;
    /* Step 7A: no longer sticky. It scrolls away with the page like any other block,
       so it can never cover content or fight the theme's own sticky header. */
    position: static !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

@media (max-width: 768px) {
    .jwbes-pdp-breadcrumb {
        padding: 6px 0;
    }
    .jwbes-breadcrumb-container {
        gap: 8px;
    }
    .jwbes-breadcrumb-back {
        width: 28px;
        height: 28px;
    }
    .jwbes-breadcrumb-list {
        font-size: 12px;
        gap: 6px;
    }
    .jwbes-breadcrumb-current {
        max-width: calc(100vw - 160px);
    }
}

.jwbes-breadcrumb-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jwbes-breadcrumb-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f8fafc;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    flex-shrink: 0;
    transition: all 0.2s ease;
    text-decoration: none;
}

.jwbes-breadcrumb-back:hover {
    background: #e0e7ff;
    color: #4338ca;
    border-color: #c7d2fe;
    transform: translateX(-2px);
}

.jwbes-breadcrumb-back svg {
    display: block;
}

.jwbes-breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jwbes-breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.jwbes-breadcrumb-link {
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.jwbes-breadcrumb-link:hover {
    color: #4f46e5;
    text-decoration: underline;
}

.jwbes-breadcrumb-sep {
    color: #94a3b8;
    font-size: 12px;
    user-select: none;
}

.jwbes-breadcrumb-current {
    color: #0f172a;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 550px;
}

/* ANNOUNCEMENT BAR */
.jwbes-announcement-bar {
    background: linear-gradient(90deg, #e0e7ff 0%, #ede9fe 100%);
    color: #3730a3;
    border-bottom: 1px solid #c7d2fe;
    text-align: center;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* HERO SECTION */
.jwbes-hero {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    padding: 28px 0 32px;
    border-bottom: 1px solid var(--jwbes-border);
}

.jwbes-hero-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 52px;
    align-items: center;
}

@media (max-width: 900px) {
    .jwbes-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* BOOK MOCKUP */
.jwbes-hero-media {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jwbes-book-mockup {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1 / 1.4;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(26, 74, 53, 0.25), 0 0 0 1px rgba(0,0,0,0.05);
    overflow: hidden;
    background: #fff;
    transition: transform 0.3s ease;
}

.jwbes-book-mockup:hover {
    transform: translateY(-4px);
}

.jwbes-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* VIRTUAL COVER */
.jwbes-book-virtual-cover {
    height: 100%;
    padding: 36px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(145deg, #1e1b4b 0%, #312e81 50%, #0f172a 100%);
    color: #ffffff;
    text-align: center;
    position: relative;
}

.jwbes-bvc-tag {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #38bdf8;
    font-weight: 700;
}

.jwbes-bvc-title {
    font-size: 26px;
    font-weight: 900;
    line-height: 1.15;
    margin: 8px 0 4px;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.jwbes-bvc-sub {
    font-size: 14px;
    color: #cbd5e1;
    font-weight: 500;
}

.jwbes-bvc-badge {
    display: inline-block;
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 800;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    margin: 12px auto;
    letter-spacing: 0.5px;
}

.jwbes-bvc-features {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #e2e8f0;
    text-align: left;
    background: rgba(0,0,0,0.25);
    padding: 12px;
    border-radius: 8px;
    margin: 10px 0;
}

.jwbes-bvc-author {
    font-size: 12px;
    color: #cbd5e1;
    font-style: italic;
}

.jwbes-book-ribbon {
    position: absolute;
    top: 18px;
    right: -32px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 34px;
    transform: rotate(45deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    letter-spacing: 0.5px;
}

.jwbes-book-sale-badge-horizontal {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.jwbes-sale-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: jwbesSalePulse 1.8s infinite;
}

@keyframes jwbesSalePulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.jwbes-security-micro-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
    width: 100%;
    max-width: 340px;
}

.jwbes-security-micro-pills span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #374151;
    background: #ffffff;
    border: 1px solid var(--jwbes-border);
    padding: 6px 12px;
    border-radius: 8px;
}

/* HERO CONTENT */
.jwbes-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.jwbes-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.jwbes-pill-exam {
    background: #dbeafe;
    color: #1e40af;
}

.jwbes-pill-pages {
    background: #fef3c7;
    color: #92400e;
}

.jwbes-pill-lang {
    background: #f3e8ff;
    color: #6b21a8;
}

.jwbes-hero-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    color: #111827;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}

.jwbes-hero-lead {
    font-size: 16px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0 0 24px 0;
}

/* PRICING CARD */
.jwbes-pricing-card {
    background: #ffffff;
    border: 1.5px solid rgba(199, 210, 254, 0.7);
    border-radius: var(--jwbes-radius);
    padding: 24px;
    box-shadow: var(--jwbes-shadow-md);
    margin-bottom: 18px;
}

.jwbes-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.jwbes-price-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.jwbes-currency {
    font-size: 24px;
    font-weight: 700;
    color: var(--jwbes-primary);
}

.jwbes-amount {
    font-size: 42px;
    font-weight: 900;
    color: var(--jwbes-primary);
    line-height: 1;
}

.jwbes-price-regular del {
    font-size: 20px;
    color: #9ca3af;
}

.jwbes-save-tag {
    background: #fef2f2;
    color: #dc2626;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.jwbes-delivery-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0369a1;
    background: #e0f2fe;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #bae6fd;
    white-space: nowrap;
}

.jwbes-dot-pulse {
    width: 8px;
    height: 8px;
    background: #0284c7;
    border-radius: 50%;
    animation: jwbesPulse 2s infinite;
}

@keyframes jwbesPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(2, 132, 199, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0); }
}

/* BUTTONS */
.jwbes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    line-height: 1.2;
}

.jwbes-btn-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.jwbes-btn-primary:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
    transform: translateY(-2px);
}

.jwbes-btn-block {
    width: 100%;
}

.jwbes-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.jwbes-btn-text small {
    font-size: 12px;
    opacity: 0.9;
    font-weight: 500;
}

.jwbes-btn-icon {
    font-size: 20px;
}

.jwbes-trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--jwbes-border);
    font-size: 12px;
    color: var(--jwbes-text-muted);
}

/* BULLETS */
.jwbes-hero-bullets {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jwbes-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.jwbes-bullet-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #4338ca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}

.jwbes-bullet-item strong {
    display: block;
    font-size: 15px;
    color: #111827;
    margin-bottom: 2px;
}

.jwbes-bullet-item p {
    margin: 0;
    font-size: 13px;
    color: #4b5563;
}

/* SECTIONS COMMON */
.jwbes-section {
    padding: 32px 0 36px;
}

.jwbes-section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 24px;
}

.jwbes-section-subtitle {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--jwbes-primary);
    margin-bottom: 8px;
}

.jwbes-section-header h2 {
    font-size: clamp(24px, 3.5vw, 34px);
    font-weight: 800;
    color: #111827;
    margin: 0 0 12px 0;
}

.jwbes-section-header p {
    font-size: 15px;
    color: var(--jwbes-text-muted);
    margin: 0;
}

/* SYLLABUS GRID */
.jwbes-syllabus-section {
    background: var(--jwbes-bg-light);
}

.jwbes-syllabus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.jwbes-syllabus-card {
    background: #ffffff;
    border: 1px solid var(--jwbes-border);
    border-radius: var(--jwbes-radius);
    padding: 24px;
    box-shadow: var(--jwbes-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jwbes-syllabus-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--jwbes-shadow-md);
}

.jwbes-sc-icon {
    font-size: 28px;
    margin-bottom: 12px;
}

.jwbes-sc-marks {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--jwbes-primary);
    background: var(--jwbes-primary-light);
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.jwbes-sc-meta h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 4px 0 10px 0;
}

.jwbes-syllabus-card p {
    font-size: 13px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

.jwbes-sc-special {
    background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
    border-color: #c7d2fe;
}

/* INSIDE WORKBOOK FEATURES */
.jwbes-features-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.jwbes-feat-box {
    background: #ffffff;
    border: 1px solid var(--jwbes-border);
    border-radius: var(--jwbes-radius);
    padding: 28px 20px;
    text-align: left;
    position: relative;
}

.jwbes-feat-num {
    font-size: 32px;
    font-weight: 900;
    color: #e5e7eb;
    margin-bottom: 8px;
    line-height: 1;
}

.jwbes-feat-box h3 {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.jwbes-feat-box p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--jwbes-text-muted);
    margin: 0;
}

/* MID CTA */
.jwbes-mid-cta {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 60%, #4f46e5 100%);
    color: #ffffff;
    padding: 28px 0;
}

.jwbes-mid-cta-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

@media (max-width: 800px) {
    .jwbes-mid-cta-box {
        flex-direction: column;
        text-align: center;
    }
}

.jwbes-mid-text h3 {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
}

.jwbes-mid-text p {
    font-size: 15px;
    color: #e0e7ff;
    margin: 0;
}

.jwbes-mid-btn-wrap .jwbes-btn {
    background: #ffffff;
    color: var(--jwbes-primary) !important;
    font-weight: 800;
}

.jwbes-mid-btn-wrap .jwbes-btn:hover {
    background: #f8fafc;
    color: var(--jwbes-primary-hover) !important;
}

/* FAQ ACCORDION */
.jwbes-faq-container {
    max-width: 800px;
}

.jwbes-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jwbes-accordion-item {
    background: #ffffff;
    border: 1px solid var(--jwbes-border);
    border-radius: 10px;
    overflow: hidden;
}

.jwbes-accordion-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: none;
    border: none;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    transition: background 0.15s ease;
}

.jwbes-accordion-trigger:hover {
    background: #f9fafb;
}

.jwbes-acc-icon {
    font-size: 20px;
    font-weight: 700;
    color: var(--jwbes-primary);
    transition: transform 0.2s ease;
}

.jwbes-accordion-item.is-active .jwbes-acc-icon {
    transform: rotate(45deg);
}

.jwbes-accordion-content {
    display: none;
    padding: 0 20px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
}

.jwbes-accordion-content p {
    margin: 0;
}

/* DISCLAIMER FOOTER (Completely Removed) */
.jwbes-disclaimer-footer {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    visibility: hidden !important;
}


/* STICKY MOBILE BAR */
.jwbes-sticky-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 12px 16px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    z-index: 998;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--jwbes-border);
}

@media (max-width: 768px) {
    .jwbes-sticky-bar {
        display: flex;
    }
}

.jwbes-sticky-info {
    display: flex;
    flex-direction: column;
}

.jwbes-sticky-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

.jwbes-sticky-price {
    font-size: 15px;
    font-weight: 900;
    color: var(--jwbes-primary);
}

.jwbes-sticky-price del {
    font-size: 12px;
    color: #9ca3af;
    margin-left: 4px;
}

.jwbes-btn-sticky {
    padding: 10px 18px;
    font-size: 14px;
}

/* CHECKOUT MODAL */
body.jwbes-modal-open {
    overflow: hidden;
}

.jwbes-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.jwbes-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
}

.jwbes-modal-dialog {
    position: relative;
    background: #ffffff;
    width: 100%;
    max-width: 460px;
    border-radius: 16px;
    box-shadow: var(--jwbes-shadow-xl);
    overflow: hidden;
    animation: jwbesModalIn 0.25s ease-out;
}

@keyframes jwbesModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.jwbes-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: #f8fafc;
    border-bottom: 1px solid var(--jwbes-border);
}

.jwbes-modal-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 2px;
}

.jwbes-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

.jwbes-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
}

.jwbes-modal-close:hover {
    color: #0f172a;
}

.jwbes-modal-body {
    padding: 24px;
}

.jwbes-order-summary-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.jwbes-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
}

.jwbes-summary-sub {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

.jwbes-badge-green {
    background: #22c55e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
}

/* FORM ELEMENTS */
.jwbes-form-group {
    margin-bottom: 16px;
}

.jwbes-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.jwbes-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    color: #0f172a;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jwbes-input:focus {
    border-color: var(--jwbes-primary);
    box-shadow: 0 0 0 3px rgba(26, 74, 53, 0.15);
}

.jwbes-field-hint {
    display: block;
    font-size: 11px;
    color: var(--jwbes-text-muted);
    margin-top: 4px;
}

.jwbes-phone-input-wrap {
    display: flex;
    align-items: center;
}

.jwbes-phone-prefix {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

.jwbes-phone-input {
    border-radius: 0 8px 8px 0;
}

.jwbes-form-group-checkbox {
    margin-bottom: 18px;
}

.jwbes-form-group-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
}

.jwbes-form-group-checkbox input {
    margin-top: 3px;
}

.jwbes-form-error-msg {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
}

.jwbes-modal-secure-badges {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    font-size: 11px;
    color: #94a3b8;
}

/* SPINNER */
.jwbes-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: jwbesSpin 0.8s linear infinite;
}

@keyframes jwbesSpin {
    to { transform: rotate(360deg); }
}

/* RESULT PAGES (SUCCESS / FAILURE) */
.jwbes-result-page {
    padding: 48px 20px;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jwbes-result-card {
    background: #ffffff;
    border: 1px solid var(--jwbes-border);
    border-radius: 16px;
    box-shadow: var(--jwbes-shadow-lg);
    padding: 40px 32px;
    /* Shares .jwbes-result-outer's width: the brand bar, the header and this card
       were previously 640 / 640 / 540, which read as three misaligned blocks. */
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.jwbes-result-icon {
    margin-bottom: 20px;
}

.jwbes-result-card h1 {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px 0;
    color: #111827;
}

.jwbes-result-subtitle {
    font-size: 14px;
    color: var(--jwbes-text-muted);
    margin: 0 0 24px 0;
}

.jwbes-result-details {
    background: #f9fafb;
    border: 1px solid var(--jwbes-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    text-align: left;
}

.jwbes-rd-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
}

.jwbes-rd-row:last-child {
    border-bottom: none;
}

.jwbes-rd-row span {
    color: #6b7280;
}

.jwbes-download-action-box {
    margin-bottom: 24px;
}

.jwbes-btn-download {
    width: 100%;
    padding: 16px;
    font-size: 17px;
}

.jwbes-download-note {
    font-size: 12px;
    color: #4b5563;
    margin-top: 10px;
}

.jwbes-email-sent-notice {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 16px;
    border-radius: 8px;
    font-size: 13px;
    color: #64748b;
}

.jwbes-support-box {
    padding-top: 20px;
    border-top: 1px solid var(--jwbes-border);
    font-size: 12px;
    color: #9ca3af;
}

.jwbes-support-box a {
    color: var(--jwbes-primary);
    text-decoration: underline;
}

/* ==========================================================================
   STANDALONE STORE & EBOOK PAGE ISOLATION (Full-Width, No Sidebar    ========================================================================== */

html:has(body.jwbes-standalone-store-page),
body.jwbes-standalone-store-page {
    background: #ffffff !important;
    color: #1f2937 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
}


body.jwbes-standalone-store-page #page,
body.jwbes-standalone-store-page .jwb-page-container,
body.jwbes-standalone-store-page .site,
body.jwbes-standalone-store-page .site-content,
body.jwbes-standalone-store-page .content-area,
body.jwbes-standalone-store-page .site-main,
body.jwbes-standalone-store-page #primary,
body.jwbes-standalone-store-page .inside-article,
body.jwbes-standalone-store-page article,
body.jwbes-standalone-store-page .entry-content {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

body.jwbes-standalone-store-page #right-sidebar,
body.jwbes-standalone-store-page #left-sidebar,
body.jwbes-standalone-store-page .sidebar,
body.jwbes-standalone-store-page .widget-area,
body.jwbes-standalone-store-page .navigation-search,
body.jwbes-standalone-store-page .entry-header,
body.jwbes-standalone-store-page .comments-area,
body.jwbes-standalone-store-page footer.entry-meta {
    display: none !important;
}

body.jwbes-standalone-store-page .jwbes-landing {
    background: #ffffff !important;
}

body.jwbes-standalone-store-page .jwbes-hero {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    padding: 28px 0 32px;
    border-bottom: 1px solid var(--jwbes-border);
}

body.jwbes-standalone-store-page .jwbes-section {
    padding: 32px 0 36px;
}

body.jwbes-standalone-store-page .jwbes-section.jwbes-syllabus-section {
    background: #fbfcfd !important;
}

body.jwbes-standalone-store-page .jwbes-section.jwbes-faq-section {
    background: #fbfcfd !important;
}

/* MAIN SITE NAVIGATION ANIMATED BADGE */
.jwbes-nav-badge-new {
    display: inline-block !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 2.5px 6.5px !important;
    border-radius: 9999px !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
    letter-spacing: 0.5px !important;
    animation: jwbes-badge-pulse 2s infinite ease-in-out !important;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.4) !important;
}

@keyframes jwbes-badge-pulse {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ==========================================================================
   STANDALONE ECOMMERCE STOREFRONT (/store) STYLES
   ========================================================================== */

.jwbes-store-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: var(--jwbes-text-main);
    background: #f7f8fa;
    min-height: auto;
    box-sizing: border-box;
}

.jwbes-store-page *,
.jwbes-store-page *::before,
.jwbes-store-page *::after {
    box-sizing: border-box;
}

.jwbes-store-container {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 24px;
}

/* STICKY STORE HEADER & SUBNAV CONTAINER */
.jwbes-store-sticky-wrapper {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(247, 248, 250, 0.88) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
    width: 100% !important;
}

body.admin-bar .jwbes-store-sticky-wrapper {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar .jwbes-store-sticky-wrapper {
        top: 46px !important;
    }
}

/* 1. DEDICATED STORE TOP HEADER (CENTERED BRANDING + TRUST BADGES) */
.jwbes-store-header-nav {
    background: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    padding: 14px 0 12px;
    color: #0f172a;
}

.jwbes-store-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.jwbes-store-header-col.jwbes-col-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.jwbes-store-header-col.jwbes-col-center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 1. STORE HEADER (CENTERED CLEAN BRANDING) */
.jwbes-store-header-nav {
    background: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    padding: 14px 0 12px;
}

.jwbes-store-header-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.jwbes-store-brand-centered {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
    margin: 0 auto;
}

.jwbes-store-brand-centered:hover {
    opacity: 0.95;
    text-decoration: none;
}

.jwbes-brand-logo-img {
    height: 48px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.jwbes-brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.jwbes-brand-main {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #0f172a;
    line-height: 1.15;
    margin: 0;
    display: block;
}

.jwbes-brand-sub {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #0284c7;
    text-transform: uppercase;
    margin-top: 3px;
    display: block;
}

/* 2. REAL DEDICATED STORE SUBNAV & SEARCH ICON */
.jwbes-store-subnav {
    background: transparent;
    border-top: none;
    padding: 6px 0;
}

.jwbes-store-subnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
}

.jwbes-subnav-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
}

.jwbes-subnav-list::-webkit-scrollbar {
    display: none;
}

.jwbes-subnav-link,
.jwbes-subnav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.85);
    color: #475569;
    border: 1px solid rgba(203, 213, 225, 0.8);
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.jwbes-subnav-link:hover,
.jwbes-subnav-btn:hover {
    background: #ffffff;
    color: #0f172a;
    border-color: #94a3b8;
}

.jwbes-subnav-btn.is-active {
    background: #e0e7ff !important;
    color: #1e1b4b !important;
    border-color: #c7d2fe !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15) !important;
}

/* Nav Search Icon Button & Popover */
.jwbes-nav-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.jwbes-nav-search-btn {
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid rgba(203, 213, 225, 0.8);
    color: #475569;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.jwbes-nav-search-btn:hover,
.jwbes-nav-search-btn.is-active {
    background: #ffffff;
    border-color: #6366f1;
    color: #4f46e5;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.jwbes-nav-search-btn svg.jwbes-svg-search {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    display: block;
}

.jwbes-nav-search-box {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    width: 290px;
    display: none;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(203, 213, 225, 0.8);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.jwbes-nav-search-box.is-open {
    display: flex;
    align-items: center;
}

.jwbes-nav-search-box .jwbes-store-search-input {
    width: 100%;
    height: 36px;
    padding: 6px 30px 6px 12px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #0f172a;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.jwbes-nav-search-box .jwbes-store-search-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.jwbes-nav-search-box .jwbes-search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

/* 3. STORE HERO BANNER CAROUSEL (3-CARD HORIZONTAL CAROUSEL: 2 FULL + 1 PARTIAL) */
.jwbes-store-carousel-wrap {
    padding: 14px 0 6px;
}

.jwbes-carousel-box {
    position: relative;
    width: 100%;
}

.jwbes-carousel-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 16px;
    padding: 2px 0;
}

.jwbes-carousel-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 18px;
    width: 100%;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.jwbes-carousel-slide {
    /* Fixed identical width for all cards: exactly 2 full + 1 partial (~45%) visible */
    width: 476px;
    min-width: 476px;
    max-width: 476px;
    height: 290px;
    min-height: 290px;
    max-height: 290px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 22px 24px;
    border-radius: 16px;
    position: relative;
    color: #0f172a;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(226, 232, 240, 0.85);
    overflow: hidden;
    flex-shrink: 0;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.jwbes-carousel-slide:hover {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
    border-color: rgba(199, 210, 254, 0.8);
}

/* 4 Distinct Soft Pastel Theme Classes */
.jwbes-carousel-slide.jwbes-slide-theme-lavender {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #e0e7ff 100%) !important;
    border-color: rgba(199, 210, 254, 0.75) !important;
}

.jwbes-carousel-slide.jwbes-slide-theme-sky {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%) !important;
    border-color: rgba(186, 230, 253, 0.75) !important;
}

.jwbes-carousel-slide.jwbes-slide-theme-peach {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%) !important;
    border-color: rgba(254, 215, 170, 0.75) !important;
}

.jwbes-carousel-slide.jwbes-slide-theme-mint {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #d1fae5 100%) !important;
    border-color: rgba(167, 243, 208, 0.75) !important;
}

.jwbes-slide-text {
    flex: 1 1 auto;
    max-width: 310px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jwbes-slide-badge {
    display: inline-block;
    width: fit-content;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 9999px;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.jwbes-slide-title {
    font-size: 16.5px;
    line-height: 1.25;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    letter-spacing: -0.2px;
}

.jwbes-slide-desc {
    font-size: 11.5px;
    line-height: 1.4;
    color: #475569;
    margin: 0 0 10px 0;
    min-height: 32px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jwbes-slide-pricing {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 28px;
}

.jwbes-slide-price-current {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}

.jwbes-slide-price-regular {
    font-size: 13px;
    color: #94a3b8;
    text-decoration: line-through;
}

.jwbes-slide-pill-instant {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(186, 230, 253, 0.8);
    color: #0284c7;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 9999px;
}

.jwbes-slide-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jwbes-slide-buttons .jwbes-btn-primary {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff !important;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.jwbes-slide-buttons .jwbes-btn-primary:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
    transform: translateY(-1px);
}

.jwbes-slide-buttons .jwbes-btn-secondary {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    color: #1e293b;
    text-decoration: none;
    border: 1px solid rgba(203, 213, 225, 0.8);
    transition: all 0.15s ease;
}

.jwbes-slide-buttons .jwbes-btn-secondary:hover {
    background: #ffffff;
    border-color: #94a3b8;
    color: #0f172a;
}

.jwbes-slide-visual {
    flex: 0 0 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jwbes-store-virtual-cover {
    width: 95px !important;
    height: 135px !important;
    min-height: 135px !important;
    padding: 6px 6px !important;
    border-radius: 6px !important;
    box-shadow: -4px 6px 14px rgba(0, 0, 0, 0.45) !important;
}

/* CAROUSEL CONTROLS: PAGINATION DOTS (ARROWS REMOVED) */
.jwbes-carousel-arrow {
    display: none !important;
}

.jwbes-carousel-dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 0;
    position: relative;
    z-index: 10;
}

.jwbes-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    border: 1.5px solid #94a3b8;
    cursor: pointer;
    padding: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    line-height: 1;
}

.jwbes-dot:hover {
    background: #94a3b8;
    border-color: #64748b;
    transform: scale(1.15);
}

.jwbes-dot.is-active {
    width: 28px;
    border-radius: 9999px;
    background: #6366f1;
    border-color: #6366f1;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

/* 4. STORE CATALOG MAIN */
.jwbes-store-main {
    padding: 14px 24px 80px;
}

.jwbes-store-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.jwbes-store-count {
    font-size: 15px;
    color: #64748b;
}

.jwbes-store-count strong {
    color: var(--jwbes-text-main);
    font-size: 17px;
}

.jwbes-store-sort-note {
    font-size: 13px;
    color: #0284c7;
    font-weight: 600;
}

/* NO RESULTS STATE */
.jwbes-store-no-results {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    margin: 20px 0;
}

.jwbes-store-no-results h3 {
    font-size: 19px;
    color: #1e293b;
    margin: 12px 0 6px;
}

.jwbes-store-no-results p {
    color: #64748b;
    font-size: 14px;
    margin: 0 0 16px;
}

/* 5. STORE GRID & CARDS */
.jwbes-store-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

@media (max-width: 1199px) and (min-width: 768px) {
    .jwbes-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }
}

.jwbes-store-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.jwbes-store-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.07);
    border-color: rgba(199, 210, 254, 0.8);
}

/* CARD MEDIA */
.jwbes-store-card-media {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.jwbes-store-card-media::before {
    content: "";
    position: absolute;
    inset: -30px;
    background-image: var(--jwbes-card-cover-bg);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.25);
    transform: scale(1.28);
    opacity: 0.32;
    z-index: 0;
}

.jwbes-store-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(248,250,252,0.72) 100%);
    z-index: 1;
}

.jwbes-store-cover-img {
    width: auto;
    max-width: 84%;
    max-height: 224px;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.22);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
}

.jwbes-store-card:hover .jwbes-store-cover-img {
    transform: translateY(-3px) scale(1.03);
}

.jwbes-store-virtual-cover {
    width: 68%;
    max-width: 190px;
    height: auto;
    aspect-ratio: 1 / 1.38;
    padding: 14px 10px;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}

.jwbes-store-virtual-cover .jwbes-bvc-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 4px 0 !important;
}

.jwbes-store-badges-wrap {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    z-index: 3;
}

.jwbes-badge-sale {
    background: #ffe4e6;
    color: #be123c;
    border: 1px solid #fecdd3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.08);
}

.jwbes-badge-stock {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.jwbes-badge-stock-in {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.jwbes-badge-stock-low {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.jwbes-badge-stock-out {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* CARD BODY */
.jwbes-store-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.jwbes-store-card-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #4f46e5;
    margin-bottom: 8px;
}

.jwbes-store-card-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 10px 0;
}

.jwbes-store-card-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.jwbes-store-card-title a:hover {
    color: var(--jwbes-primary);
}

.jwbes-store-card-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: #64748b;
    margin: 0 0 18px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jwbes-store-card-pricing {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    margin-bottom: 18px;
}

.jwbes-store-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.jwbes-store-price-current {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
}

.jwbes-store-price-regular {
    font-size: 14.5px;
    color: #94a3b8;
    text-decoration: line-through;
}

/* CARD ACTION BUTTONS */
.jwbes-store-card-actions {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 10px;
}

.jwbes-store-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    line-height: 1;
}

.jwbes-store-btn-view {
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid #cbd5e1;
    color: #334155;
}

.jwbes-store-btn-view:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.jwbes-store-btn-buy {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
}

.jwbes-store-btn-buy:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.jwbes-store-btn-disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    border: 1.5px solid #cbd5e1;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 900px) {
    .jwbes-carousel-slide {
        width: calc((100% - 16px) / 2.15);
        min-width: calc((100% - 16px) / 2.15);
        max-width: calc((100% - 16px) / 2.15);
    }
}

@media (max-width: 768px) {
    .jwbes-brand-main {
        font-size: 21px;
    }

    .jwbes-brand-sub {
        font-size: 9.5px;
        letter-spacing: 2px;
    }

    .jwbes-store-carousel-wrap {
        padding: 14px 0 16px;
    }

    .jwbes-carousel-track {
        gap: 12px;
    }

    .jwbes-carousel-slide {
        /* Mobile: exactly 1 full card + ~20% of next card */
        width: calc((100vw - 44px) * 0.80) !important;
        min-width: calc((100vw - 44px) * 0.80) !important;
        max-width: calc((100vw - 44px) * 0.80) !important;
        flex: 0 0 calc((100vw - 44px) * 0.80) !important;
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
        padding: 16px 16px !important;
        gap: 12px !important;
        border-radius: 14px !important;
    }

    .jwbes-slide-text {
        max-width: 65%;
    }

    .jwbes-slide-badge {
        font-size: 8.5px;
        padding: 2px 7px;
        margin-bottom: 5px;
    }

    .jwbes-slide-title {
        font-size: 14px;
        line-height: 1.25;
        min-height: 36px;
        margin-bottom: 4px;
    }

    .jwbes-slide-desc {
        display: none !important;
    }

    .jwbes-slide-pricing {
        margin-bottom: 8px;
        min-height: 24px;
        gap: 6px;
    }

    .jwbes-slide-price-current {
        font-size: 19px;
    }

    .jwbes-slide-price-regular {
        font-size: 12px;
    }

    .jwbes-slide-pill-instant {
        font-size: 9px;
        padding: 1px 6px;
    }

    .jwbes-slide-buttons .jwbes-btn-primary {
        padding: 6px 12px;
        font-size: 11px;
    }

    .jwbes-slide-buttons .jwbes-btn-secondary {
        padding: 5px 8px;
        font-size: 10px;
    }

    .jwbes-slide-visual {
        flex: 0 0 80px;
    }

    .jwbes-store-virtual-cover {
        width: 78px !important;
        height: 112px !important;
        min-height: 112px !important;
        padding: 6px 4px !important;
    }

    .jwbes-store-virtual-cover .jwbes-bvc-title {
        font-size: 10px !important;
    }

    .jwbes-store-virtual-cover .jwbes-bvc-features {
        display: none !important;
    }

    .jwbes-carousel-arrow {
        display: none !important;
    }

    .jwbes-carousel-dots {
        margin-top: 12px !important;
        margin-bottom: 4px !important;
        gap: 8px !important;
    }

    .jwbes-dot {
        width: 8px !important;
        height: 8px !important;
    }

    .jwbes-dot.is-active {
        width: 22px !important;
        background: #6366f1 !important;
        border-color: #6366f1 !important;
    }

    .jwbes-nav-search-box {
        right: 0;
        width: calc(100vw - 48px);
        max-width: 270px;
    }

    .jwbes-store-main {
        padding: 20px 16px 50px;
    }

    .jwbes-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .jwbes-store-card {
        border-radius: 14px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    }

    .jwbes-store-card-media {
        height: 160px !important;
    }

    .jwbes-store-cover-img {
        max-height: 130px !important;
        max-width: 88% !important;
        border-radius: 6px !important;
    }

    .jwbes-store-badges-wrap {
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
        gap: 4px;
    }

    .jwbes-badge-sale,
    .jwbes-badge-stock {
        font-size: 9px !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
    }

    .jwbes-store-card-body {
        padding: 12px 10px !important;
    }

    .jwbes-store-card-tag {
        display: none !important;
    }

    .jwbes-store-card-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin: 0 0 6px 0 !important;
        min-height: 34px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .jwbes-store-card-excerpt {
        display: none !important;
    }

    .jwbes-store-card-pricing {
        margin-top: auto !important;
        padding-top: 8px !important;
        margin-bottom: 10px !important;
    }

    .jwbes-store-price-current {
        font-size: 17px !important;
    }

    .jwbes-store-price-regular {
        font-size: 12px !important;
    }

    .jwbes-store-card-actions {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .jwbes-store-btn {
        min-height: 38px !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    .jwbes-store-btn-view {
        font-size: 11px !important;
        padding: 6px 6px !important;
    }
}

/* ==========================================================================
   RESULT PAGES (SUCCESS, FAILED, PENDING, INTERRUPTED) - CLEAN WHITE THEME
   ========================================================================== */
.jwbes-result-wrap {
    min-height: 80vh;
    background: #f8fafc;
    padding: 40px 16px 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    width: 100%;
}

.jwbes-result-outer {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.jwbes-result-header {
    background: #15803d;
    color: #ffffff;
    padding: 32px 24px;
    border-radius: 20px 20px 0 0;
    text-align: center;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.2);
}

.jwbes-result-header-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.jwbes-result-header-pending {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.jwbes-result-header-interrupted {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
}

.jwbes-result-header-failed {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.jwbes-result-header-icon {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 12px;
}

.jwbes-result-heading {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px;
    color: #ffffff !important;
    line-height: 1.25;
}

.jwbes-result-header-sub {
    font-size: 14px;
    opacity: 0.95;
    margin: 0;
    line-height: 1.5;
    color: #f0fdf4;
}

.jwbes-result-card {
    background: #ffffff;
    border-radius: 0 0 20px 20px;
    padding: 32px 28px;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    border-top: none;
    box-sizing: border-box;
}

.jwbes-result-order-table {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 8px 20px;
    margin-bottom: 24px;
}

.jwbes-rod-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}

.jwbes-rod-row:last-child {
    border-bottom: none;
}

.jwbes-rod-label {
    color: #64748b;
    font-weight: 500;
}

.jwbes-rod-value {
    color: #0f172a;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

.jwbes-rod-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13.5px;
    letter-spacing: 0.5px;
}

.jwbes-rod-price {
    color: #15803d;
    font-size: 19px;
    font-weight: 800;
}

.jwbes-success-dl-section {
    text-align: center;
    margin: 24px 0;
    padding: 24px 20px;
    background: #f0fdf4;
    border: 2px dashed #86efac;
    border-radius: 16px;
}

.jwbes-btn-xl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 800;
    border-radius: 12px;
    text-decoration: none;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.jwbes-btn-xl:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
}

.jwbes-dl-note {
    font-size: 12px;
    color: #64748b;
    margin: 10px 0 0;
    line-height: 1.4;
}

.jwbes-dl-polling {
    padding: 12px;
}

.jwbes-spinner-inline {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(21, 128, 61, 0.2);
    border-top-color: #15803d;
    border-radius: 50%;
    animation: jwbes-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

.jwbes-email-sent-notice {
    text-align: center;
    padding: 16px;
    color: #475569;
}

.jwbes-esn-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.jwbes-success-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 24px 0;
}

.jwbes-sil-block {
    display: flex;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #475569;
    text-align: left;
}

.jwbes-sil-block strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    margin-bottom: 4px;
}

.jwbes-sil-block p {
    margin: 0;
    color: #64748b;
}

.jwbes-sil-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.jwbes-success-actions,
.jwbes-failed-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

.jwbes-btn-outline {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.jwbes-btn-outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.jwbes-success-support {
    text-align: center;
    font-size: 13px;
    color: #64748b;
    margin-top: 22px;
    margin-bottom: 0;
}

/* FAILED STATES */
.jwbes-failed-alert {
    padding: 18px 20px;
    border-radius: 14px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.55;
}

.jwbes-failed-alert strong {
    display: block;
    font-size: 15px;
    margin-bottom: 6px;
}

.jwbes-failed-alert p {
    margin: 0;
}

.jwbes-alert-warning {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    color: #92400e;
}

.jwbes-alert-info {
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    color: #1e40af;
}

.jwbes-alert-error {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #991b1b;
}

/* CONFETTI CANVAS */
#jwbes-confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99999;
}

/* ==========================================================================
   PURCHASE RECOVERY MODAL & OTP INPUTS
   ========================================================================== */
.jwbes-recovery-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.jwbes-recovery-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.jwbes-recovery-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.jwbes-recovery-dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    z-index: 1;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.jwbes-recovery-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease;
}

.jwbes-recovery-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.jwbes-recovery-header {
    text-align: center;
    margin-bottom: 24px;
}

.jwbes-recovery-icon {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 8px;
}

.jwbes-recovery-header h2 {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
}

.jwbes-recovery-header p {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
}

.jwbes-otp-note {
    text-align: center;
    font-size: 13.5px;
    color: #475569;
    margin: 0 0 16px;
}

.jwbes-otp-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 20px 0;
}

.jwbes-otp-input {
    width: 44px;
    height: 50px;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.jwbes-otp-input:focus {
    border-color: #4f46e5;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.jwbes-btn-link {
    background: none;
    border: none;
    color: #4f46e5;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 8px;
    display: block;
    margin: 12px auto 0;
}

.jwbes-recovery-verified-msg {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #15803d;
    margin: 0 0 16px;
}

.jwbes-recovery-orders {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jwbes-rec-order-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    background: #f8fafc;
    transition: border-color 0.2s ease;
}

.jwbes-rec-order-card:hover {
    border-color: #cbd5e1;
}

.jwbes-rec-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
    color: #64748b;
}

.jwbes-rec-order-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 10px;
}

.jwbes-rec-order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.jwbes-rec-order-price {
    font-size: 15px;
    font-weight: 800;
    color: #15803d;
}

/* ==========================================================================
   POLICIES PAGE (8 ANCHORED SECTIONS + STICKY SIDEBAR)
   ========================================================================== */
.jwbes-policies-page {
    max-width: 1140px;
    margin: 0 auto;
    padding: 40px 20px 80px;
    box-sizing: border-box;
    width: 100%;
}

.jwbes-policies-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
}

.jwbes-policies-header h1 {
    font-size: 32px;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 8px;
}

.jwbes-policies-header p {
    color: #64748b;
    font-size: 15px;
    margin: 0;
}

.jwbes-policies-updated {
    font-size: 12.5px;
    color: #94a3b8;
    margin-top: 6px !important;
}

.jwbes-policies-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
}

.jwbes-policies-sidebar {
    position: sticky;
    top: 90px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.jwbes-policies-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jwbes-pnav-link {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.jwbes-pnav-link:hover,
.jwbes-pnav-link.is-active {
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 700;
}

.jwbes-policies-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 36px 40px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.jwbes-policy-section {
    margin-bottom: 48px;
    padding-bottom: 36px;
    border-bottom: 1px solid #f1f5f9;
}

.jwbes-policy-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.jwbes-policy-section h2 {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 16px;
    padding-top: 10px;
}

.jwbes-policy-section p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #334155;
    margin: 0 0 14px;
}

.jwbes-policy-section ul {
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: #334155;
    margin: 0 0 16px;
}

.jwbes-policy-section li {
    margin-bottom: 6px;
}

/* ==========================================================================
   STORE FOOTER
   ========================================================================== */
.jwbes-store-footer {
    background: #0f172a;
    color: #94a3b8;
    padding: 50px 24px 24px;
    margin-top: 60px;
    border-top: 1px solid rgba(226, 232, 240, 0.1);
    box-sizing: border-box;
    width: 100%;
}

.jwbes-store-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.jwbes-sfoot-logo {
    font-size: 22px;
    font-weight: 900;
    color: #ffffff;
    display: block;
}

.jwbes-sfoot-tagline {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #38bdf8;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.jwbes-sfoot-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: #94a3b8;
    max-width: 440px;
    margin: 0;
}

.jwbes-sfoot-links-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.jwbes-sfoot-heading {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    display: block;
}

.jwbes-sfoot-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.jwbes-sfoot-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 13.5px;
    transition: color 0.15s ease;
}

.jwbes-sfoot-links a:hover {
    color: #818cf8;
}

.jwbes-sfoot-bottom {
    max-width: 1200px;
    margin: 20px auto 0;
    text-align: center;
    font-size: 12px;
    color: #64748b;
}

/* ==========================================================================
   MOBILE-FIRST (390PX VIEWPORT) ZERO HORIZONTAL OVERFLOW REFINEMENTS
   ========================================================================== */
@media (max-width: 768px) {
    .jwbes-policies-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .jwbes-policies-sidebar {
        position: static;
        overflow-x: auto;
    }

    .jwbes-policies-nav-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .jwbes-pnav-link {
        font-size: 12px;
        padding: 6px 10px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

    .jwbes-policies-content {
        padding: 24px 18px;
    }

    .jwbes-policy-section h2 {
        font-size: 19px;
    }

    .jwbes-store-footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .jwbes-sfoot-links-group {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .jwbes-result-outer {
        padding: 0;
    }

    .jwbes-result-header {
        padding: 24px 16px;
        border-radius: 16px 16px 0 0;
    }

    .jwbes-result-heading {
        font-size: 21px;
    }

    .jwbes-result-card {
        padding: 22px 16px;
        border-radius: 0 0 16px 16px;
    }

    .jwbes-success-info-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .jwbes-success-actions,
    .jwbes-failed-actions {
        flex-direction: column;
        width: 100%;
    }

    .jwbes-btn-xl {
        width: 100%;
        font-size: 15px;
        padding: 14px 16px;
        text-align: center;
        box-sizing: border-box;
    }

    .jwbes-success-actions .jwbes-btn,
    .jwbes-failed-actions .jwbes-btn,
    .jwbes-btn-outline {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .jwbes-recovery-dialog {
        padding: 24px 16px;
        border-radius: 16px;
    }

    .jwbes-otp-input {
        width: 38px;
        height: 46px;
        font-size: 19px;
    }

    /* Zero horizontal overflow on 390px */
    body,
    html,
    .jwbes-store-main,
    .jwbes-product-page-wrap,
    .jwbes-result-wrap,
    .jwbes-policies-page,
    .jwbes-store-footer {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}
/* HIDE MAIN THEME BLUE FOOTER ON /STORE/ ONLY (KEEP EBOOK STORE FOOTER ONLY) */
body.jwbes-standalone-store-page .jwb-site-footer,
body.jwbes-standalone-store-page footer.site-footer,
body.jwbes-standalone-store-page footer#colophon,
body.jwbes-standalone-store-page .footer-widgets,
body.jwbes-standalone-store-page .site-info,
body.jwbes-standalone-store-page .footer-bar,
body.jwbes-is-store-page .jwb-site-footer,
body.jwbes-is-store-page footer.site-footer,
body.jwbes-is-store-page footer#colophon,
body.jwbes-is-store-page .footer-widgets,
body.jwbes-is-store-page .site-info,
body.jwbes-is-store-page .footer-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   GLOBAL HEADER STORE + NEW BADGE
   ========================================================================== */
.jwbes-store-nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    position: relative !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}

.jwbes-nav-badge-new {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 2px 6px !important;
    border-radius: 9999px !important;
    margin-left: 5px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    vertical-align: middle !important;
    animation: jwbes-pulse-glow 2s infinite !important;
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.4) !important;
}

@keyframes jwbes-pulse-glow {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.5); }
    70% { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(225, 29, 72, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}

@media (max-width: 768px) {
    nav .jwbes-mobile-header-store,
    .nav-wrap .jwbes-mobile-header-store,
    .nav-inner .jwbes-mobile-header-store {
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        margin-left: auto !important;
        margin-right: 8px !important;
    }
}

/* ==========================================================================
   PDP ARCHITECTURE, RELATED PRODUCTS, INVOICES & SAFE-AREA ENHANCEMENTS
   ========================================================================== */

/* RELATED PRODUCTS SECTION */
.jwbes-related-section {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 48px 0;
}

.jwbes-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.jwbes-related-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.jwbes-related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.jwbes-related-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.jwbes-related-cover-wrap {
    height: 180px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
}

.jwbes-related-cover-img {
    max-height: 156px;
    max-width: 85%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.jwbes-related-cover-placeholder {
    font-size: 40px;
}

.jwbes-related-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.jwbes-related-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jwbes-related-price-row {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.jwbes-related-price {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}

.jwbes-related-del {
    font-size: 12px;
    color: #94a3b8;
    text-decoration: line-through;
}

.jwbes-related-btn {
    font-size: 12px;
    font-weight: 700;
    color: #4f46e5;
}

@media (max-width: 768px) {
    .jwbes-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .jwbes-related-cover-wrap {
        height: 140px;
    }

    .jwbes-related-cover-img {
        max-height: 120px;
    }

    .jwbes-related-content {
        padding: 10px 8px;
    }

    .jwbes-related-title {
        font-size: 12.5px;
        min-height: 32px;
        margin-bottom: 6px;
    }

    .jwbes-related-price {
        font-size: 15px;
    }

    .jwbes-related-btn {
        font-size: 11px;
    }
}

/* PDP SAFE AREA BOTTOM PADDING & STICKY CTA */
@media (max-width: 768px) {
    .jwbes-landing {
        padding-bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .jwbes-sticky-bar {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 9990 !important;
    }
}

/* TAX INVOICE BUTTON IN SUCCESS PAGE */
.jwbes-btn-invoice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    color: #1e293b;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.jwbes-btn-invoice:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

/* RESPONSIVE BRAND HEADER & PDP PRICING ALIGNMENT */
@media (max-width: 640px) {
    .jwbes-store-brand-centered {
        gap: 10px;
    }
    .jwbes-brand-logo-img {
        height: 38px;
    }
    .jwbes-brand-main {
        font-size: 18px;
    }
    .jwbes-brand-sub {
        font-size: 9.5px;
        letter-spacing: 1.5px;
    }
    .jwbes-price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .jwbes-price-main {
        width: 100%;
        display: flex;
        align-items: baseline;
        gap: 8px;
    }
    .jwbes-delivery-badge {
        align-self: flex-start;
    }
}

/* JWB OFFICIAL BRAND LOGO INTEGRATION */
.jwbes-modal-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.jwbes-modal-brand-logo {
    height: 34px;
    width: auto;
    max-width: 85px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}
.jwbes-sfoot-brand-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.jwbes-footer-brand-logo {
    height: 30px;
    width: auto;
    max-width: 75px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}
.jwbes-result-brand-bar {
    text-align: center;
    padding: 18px 0 6px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}
.jwbes-result-brand-logo {
    height: 42px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}
.jwbes-recovery-brand-logo {
    height: 38px;
    width: auto;
    max-width: 95px;
    object-fit: contain;
    margin: 0 auto 12px;
    display: block;
}


/* =========================================================================
   STEP 6 — layout corrections. Mobile first.
   ========================================================================= */

/* --- Store cards: equal height, aligned baselines ----------------------- */
/* The grid already stretches, but these make the guarantee explicit rather
   than incidental, so a long description or a 3-line title cannot shift the
   price and buttons out of line across a row. */
.jwbes-store-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jwbes-store-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* Titles: clamp to 2 lines and always reserve those 2 lines, so a 1-line and a
   3-line title occupy identical space. */
.jwbes-store-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.35em);
    overflow-wrap: anywhere;
}

/* Descriptions: clamp to 3 lines with an ellipsis. */
.jwbes-store-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(3 * 1.55em);
    overflow-wrap: anywhere;
}

/* Push pricing and actions to the bottom so they sit on one baseline. */
.jwbes-store-card-pricing {
    margin-top: auto;
}

.jwbes-store-card-actions {
    margin-top: 12px;
}

/* --- Sticky breadcrumb must not hide an anchored heading ---------------- */
/* Jumping to an in-page anchor would otherwise land the heading underneath
   the sticky bar. */
.jwbes-landing [id],
.jwbes-section [id],
.jwbes-landing h1,
.jwbes-landing h2,
.jwbes-section h2 {
    scroll-margin-top: calc(var(--jwbes-global-header-offset, 62px) + 64px);
}

/* --- Success page ------------------------------------------------------- */
/* One container width for the whole receipt. */
.jwbes-result-brand-bar,
.jwbes-result-header,
.jwbes-result-card {
    width: 100%;
    box-sizing: border-box;
}

/* Label/value rows: a long product name must wrap without breaking the
   rhythm of the rows above and below it. */
.jwbes-rod-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.jwbes-rod-label {
    flex: 0 0 40%;
    max-width: 40%;
    text-align: left;
}

.jwbes-rod-value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

/* The download validity notice is a real condition of sale, not fine print. */
.jwbes-dl-note {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 14px;
}

/* 3-step progress indicator. */
.jwbes-progress-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 18px 8px 4px;
    list-style: none;
    margin: 0;
}

.jwbes-progress-step {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    position: relative;
}

.jwbes-progress-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #059669;
    color: #ffffff;
    font-size: 14px;
    line-height: 26px;
    display: inline-block;
    font-weight: 700;
}

.jwbes-progress-label {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 600;
    color: #166534;
    overflow-wrap: anywhere;
}

/* Connecting rule between the dots. */
.jwbes-progress-step::before {
    content: "";
    position: absolute;
    top: 13px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: #86efac;
    z-index: 0;
}

.jwbes-progress-step:first-child::before {
    display: none;
}

.jwbes-progress-dot {
    position: relative;
    z-index: 1;
}

/* Support buttons: stack on a phone, sit side by side from 480px. */
.jwbes-support-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

@media (min-width: 480px) {
    .jwbes-support-actions {
        flex-direction: row;
        justify-content: center;
    }
    .jwbes-support-actions > a {
        flex: 0 1 auto;
    }
}

.jwbes-btn-whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: #ffffff;
}

.jwbes-btn-whatsapp:hover,
.jwbes-btn-whatsapp:focus {
    background: #1da851;
    border-color: #1da851;
    color: #ffffff;
}

/* --- Legal identity line ------------------------------------------------ */
.jwbes-legal-identity {
    text-align: center;
    font-size: 12.5px;
    line-height: 1.6;
    color: #64748b;
    padding: 16px 16px 20px;
    overflow-wrap: anywhere;
}

.jwbes-legal-identity strong {
    color: #334155;
}

/* --- Customers screenshot this page as a receipt ------------------------ */
@media print {
    .jwbes-store-header-nav,
    .jwbes-store-subnav,
    .jwbes-pdp-breadcrumb,
    .jwbes-support-actions,
    .jwbes-result-actions,
    #jwbes-confetti-canvas,
    .jwbes-nav-badge-new {
        display: none !important;
    }

    .jwbes-result-wrap,
    .jwbes-result-outer,
    .jwbes-result-card {
        box-shadow: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .jwbes-result-header {
        /* Keep the confirmation banner readable when printed in mono. */
        background: #ffffff !important;
        color: #0f172a !important;
        border: 2px solid #0f172a !important;
        box-shadow: none !important;
    }

    .jwbes-dl-note {
        border: 1px solid #94a3b8 !important;
    }

    a[href]::after {
        content: "";
    }
}

/* Legal line inside the dark storefront footer: inherit the footer's text colour
   rather than the grey used on light backgrounds. */
.jwbes-sfoot-bottom .jwbes-legal-identity {
    color: inherit;
    opacity: 0.85;
    padding: 6px 0 0;
}

/* Success page support block. */
.jwbes-success-support {
    text-align: center;
    margin-top: 22px;
}

.jwbes-success-support > p {
    margin: 0;
    font-weight: 600;
    color: #334155;
}

/* Progress indicator sits inside the card, so it shares the card's width. */
.jwbes-result-card .jwbes-progress-steps {
    padding: 0 0 18px;
    margin: 0 0 18px;
    border-bottom: 1px solid #e2e8f0;
}


/* =========================================================================
   STEP 7A — the shared store footer on the success page.
   The success page centres its card in a flex row; the footer stacks under it.
   ========================================================================= */
#jwbes-success-root.jwbes-result-wrap {
    flex-direction: column;
    align-items: stretch;
}
#jwbes-success-root > .jwbes-store-footer {
    margin-top: 40px;
}


/* =========================================================================
   STEP 7B — checkout guard message (shown only when the storefront script
   could not run, so the buy button would otherwise do nothing).
   ========================================================================= */
.jwbes-checkout-error {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

/* ==========================================================================
   Coupon field (Step 7D-1)

   Narrow-first. At 360px the code box and the Apply button share one row and
   still leave the box wide enough to read a code like WA-89ZDYL; the button
   never shrinks below a comfortable tap target.
   ========================================================================== */

.jwbes-coupon-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.jwbes-coupon-input {
    flex: 1 1 auto;
    min-width: 0;
    text-transform: uppercase;
}

.jwbes-coupon-apply {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    cursor: pointer;
}

.jwbes-coupon-apply:hover { background: #eef2ff; border-color: #4f46e5; color: #4f46e5; }
.jwbes-coupon-apply:disabled { opacity: 0.6; cursor: default; }

.jwbes-coupon-msg {
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.jwbes-coupon-msg.is-ok { color: #047857; }
.jwbes-coupon-msg.is-error { color: #b91c1c; }

.jwbes-coupon-totals {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0 0 16px;
    background: #f8fafc;
    font-size: 13px;
}

.jwbes-total-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}

.jwbes-total-discount-row { color: #047857; }

.jwbes-total-final {
    font-weight: 700;
    font-size: 15px;
    border-top: 1px solid #e2e8f0;
    margin-top: 6px;
    padding-top: 8px;
}


/* ==========================================================================
   CHECKOUT MODAL — ISOLATION LAYER (AUDIT T-2)
   ==========================================================================

   This block is last in the file and uses !important on the handful of
   properties that decide whether the modal is usable at all. Everything
   cosmetic is left alone above, so a theme can still restyle the look.

   Why it exists. On the live GeneratePress child the modal rendered clipped at
   both ends with the Pay button unreachable, and two separate causes were
   found:

     1. The plugin's own defect. `.jwbes-modal` had no scroll container and
        `.jwbes-modal-dialog` had no max-height, so a dialog taller than the
        viewport simply overflowed past both edges with no way to reach either.
        At 360x640 the dialog is 832px tall: the title sat at -49px and the Pay
        button at 665px in a 640px viewport. That reproduces on plain
        GeneratePress too — it was only ever invisible because desktop
        viewports are tall enough to hide it.

     2. Theme interference. A child theme that sets `.jwbes-modal { position:
        relative }`, or puts a `transform` on a page wrapper, moves the overlay
        out of the viewport entirely — a transformed ancestor becomes the
        containing block for `position: fixed` descendants.

   Three things together make this resilient, and each is needed:

     - the JS moves the modal to <body> on open, so no ancestor's transform,
       filter, contain or overflow can apply to it;
     - these rules re-assert the structural properties with !important, so a
       theme rule of any specificity cannot win;
     - the overlay itself is the scroll container, so content taller than the
       viewport is always reachable rather than clipped.

   It is enough because those three cover the only ways a stylesheet can make
   an overlay unreachable: move it, size it, or hide its overflow. It stops
   short of a shadow root, which would isolate completely but would also cut
   the modal off from the plugin's own stylesheet and its existing selectors.
   ========================================================================== */

.jwbes-modal[aria-hidden="true"] {
    display: none !important;
}

.jwbes-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 2147483000 !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    /* The overlay scrolls, so nothing can end up beyond reach. */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* A transform or filter here would make this the containing block for its
       own fixed children, and would defeat the point of the portal. */
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    clip-path: none !important;
    isolation: isolate;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;

    /* Respects a notch, and never collapses below a usable gutter. */
    padding: 16px !important;
    padding-top: max(16px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
}

.jwbes-modal .jwbes-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 0 !important;
}

.jwbes-modal .jwbes-modal-dialog {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 460px !important;

    /* auto on all four sides centres it when it fits and top-aligns it when it
       does not, so a tall dialog starts at its title rather than its middle. */
    margin: auto !important;

    /* No max-height and no hidden overflow: the overlay above does the
       scrolling, and anything clipped here would be unreachable. */
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* The header stays with the dialog rather than pinning, so on a short screen
   the buyer can scroll past it to reach the form. */
.jwbes-modal .jwbes-modal-header,
.jwbes-modal .jwbes-modal-body {
    max-height: none !important;
    overflow: visible !important;
}

/* Form fields: the plugin's own, not the theme's grey-filled ones (AUDIT T-4).
   Entered text is near-black, the placeholder is clearly lighter, and the two
   are never the same colour. */
.jwbes-modal .jwbes-input,
.jwbes-modal input[type="text"],
.jwbes-modal input[type="email"],
.jwbes-modal input[type="tel"] {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    opacity: 1 !important;
}

.jwbes-modal .jwbes-input::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    opacity: 1 !important;
}

.jwbes-modal .jwbes-input:focus {
    background-color: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
    outline: none !important;
}

/* Autofill paints its own background in WebKit; this keeps the field white. */
.jwbes-modal .jwbes-input:-webkit-autofill,
.jwbes-modal .jwbes-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* The Pay button must stay tappable and never shrink out of reach. */
.jwbes-modal #jwbes-submit-payment {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* ==========================================================================
   POLICY PAGES — ISOLATION (AUDIT T-3)

   These pages rendered squeezed into a narrow column with a blog sidebar and
   grey body text, because a page carrying [jwbes_policies] under its own slug
   was never recognised as a plugin page. Recognition is fixed in PHP; this
   block makes the result hold on a theme that styles descendants.
   ========================================================================== */

body.jwbes-policy-page-body .jwbes-policies-page {
    max-width: 1140px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* A sidebar next to a policy page is the theme's default, not a choice anyone
   made. Scoped to the body marker, so no other page is affected. */
body.jwbes-policy-page-body .widget-area.is-right-sidebar,
body.jwbes-policy-page-body .widget-area.is-left-sidebar,
body.jwbes-policy-page-body #secondary.widget-area,
body.jwbes-policy-page-body #right-sidebar,
body.jwbes-policy-page-body #left-sidebar {
    display: none !important;
}

body.jwbes-policy-page-body #primary,
body.jwbes-policy-page-body .content-area,
body.jwbes-policy-page-body .site-content .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Body copy stays readable. #334155 on white is about 10:1, comfortably past
   AA; a theme rule on `.entry-content p` would otherwise win over the wrapper,
   so this covers every text node in the page rather than one section of it. */
body.jwbes-policy-page-body .jwbes-policies-page,
body.jwbes-policy-page-body .jwbes-policies-page p,
body.jwbes-policy-page-body .jwbes-policies-page li,
body.jwbes-policy-page-body .jwbes-policies-page td,
body.jwbes-policy-page-body .jwbes-policies-page div,
body.jwbes-policy-page-body .jwbes-policies-page span {
    color: #334155 !important;
}

/* The one deliberately lighter piece: the sub-heading under the page title.
   #475569 on white is about 7.5:1, so it is quieter without being unreadable. */
body.jwbes-policy-page-body .jwbes-policies-page .jwbes-policies-header p,
body.jwbes-policy-page-body .jwbes-policies-page .jwbes-policies-updated {
    color: #475569 !important;
}

body.jwbes-policy-page-body .jwbes-policies-page h1,
body.jwbes-policy-page-body .jwbes-policies-page h2,
body.jwbes-policy-page-body .jwbes-policies-page h3 {
    color: #0f172a !important;
}

body.jwbes-policy-page-body .jwbes-policies-page a {
    color: #4338ca !important;
    text-decoration: underline;
}

/* ==========================================================================
   STORE PAGES — pages the operator put in the store set (AUDIT T-7)

   A hand-made page such as /about-us/ matched none of the plugin's slug or
   shortcode checks, so it got no body class and the stylesheet was never even
   enqueued on it: the theme's grey page background showed through, the blog
   sidebar stayed, and there were no breadcrumbs anywhere. Membership is now
   chosen in Settings -> General; this block is what a chosen page gets.

   Scoped entirely to body.jwbes-store-page-body. A page that is not in the set
   carries no such class and is left exactly as the theme renders it.
   ========================================================================== */

html:has(body.jwbes-store-page-body),
body.jwbes-store-page-body {
    background: #ffffff !important;
}

body.jwbes-store-page-body #page,
body.jwbes-store-page-body .site,
body.jwbes-store-page-body .site-content,
body.jwbes-store-page-body .content-area,
body.jwbes-store-page-body .site-main,
body.jwbes-store-page-body #primary,
body.jwbes-store-page-body .inside-article,
body.jwbes-store-page-body article {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* A sidebar beside a store page is the theme's default, not a choice anyone
   made. Same scope as the policy pages, same reasoning. */
body.jwbes-store-page-body .widget-area.is-right-sidebar,
body.jwbes-store-page-body .widget-area.is-left-sidebar,
body.jwbes-store-page-body #secondary.widget-area,
body.jwbes-store-page-body #right-sidebar,
body.jwbes-store-page-body #left-sidebar {
    display: none !important;
}

body.jwbes-store-page-body #primary,
body.jwbes-store-page-body .content-area,
body.jwbes-store-page-body .site-content .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Readable measure and real gutters. Deliberately NOT applied to a page that is
   also a standalone store page — the storefront and the success page zero their
   padding and lay out their own full-bleed sections, and adding a measure here
   would fight them. */
body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-content,
body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .jwbes-contact-wrap {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* Body copy on white. #1f2937 on #ffffff is about 13.6:1, well past AA and AAA. */
body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-content,
body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-content p,
body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-content li,
body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-content td,
body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-content span {
    color: #1f2937 !important;
}

body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-content {
    font-size: 16px;
    line-height: 1.7;
}

body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-content h1,
body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-content h2,
body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-content h3,
body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-title {
    color: #0f172a !important;
}

body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-content h2 {
    margin-top: 28px;
    margin-bottom: 10px;
}

body.jwbes-store-page-body:not(.jwbes-standalone-store-page) .entry-content a {
    color: #4338ca !important;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Breadcrumb trail
   -------------------------------------------------------------------------- */

.jwbes-page-breadcrumb {
    max-width: 1140px;
    margin: 0 auto 18px;
    padding: 12px 16px 0;
    box-sizing: border-box;
}

.jwbes-page-breadcrumb-list {
    list-style: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1.5;
}

.jwbes-page-breadcrumb-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* #475569 on white is about 8.6:1 — quieter than body copy, still well past AA. */
.jwbes-page-breadcrumb-item,
.jwbes-page-breadcrumb-item span {
    color: #475569 !important;
}

.jwbes-page-breadcrumb-link {
    color: #4338ca !important;
    text-decoration: none;
}

.jwbes-page-breadcrumb-link:hover,
.jwbes-page-breadcrumb-link:focus {
    text-decoration: underline;
}

.jwbes-page-breadcrumb-sep {
    color: #94a3b8 !important;
    user-select: none;
}

.jwbes-page-breadcrumb-item span[aria-current="page"] {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.jwbes-contact-wrap {
    margin: 24px auto;
}

.jwbes-contact-form {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 18px;
    max-width: 640px;
}

.jwbes-contact-title {
    margin: 0 0 6px !important;
    font-size: 20px;
    color: #0f172a !important;
}

.jwbes-contact-intro {
    margin: 0 0 18px !important;
    font-size: 14px;
    color: #475569 !important;
}

.jwbes-contact-form .jwbes-form-group {
    margin-bottom: 14px;
}

.jwbes-contact-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937 !important;
}

.jwbes-contact-form .jwbes-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    font-size: 16px;            /* 16px stops iOS zooming the page on focus */
    font-family: inherit;
    color: #0f172a !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.jwbes-contact-form .jwbes-input:focus {
    outline: 2px solid #4338ca;
    outline-offset: 1px;
    border-color: #4338ca;
}

.jwbes-contact-form .jwbes-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.jwbes-contact-message {
    min-height: 140px;
    resize: vertical;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are display:none and this one is meant to be filled in. */
.jwbes-contact-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.jwbes-contact-submit {
    width: 100%;
    min-height: 48px;           /* a comfortable tap target at 360px */
    font-size: 16px;
    cursor: pointer;
}

.jwbes-contact-submit[disabled] {
    opacity: 0.6;
    cursor: default;
}

.jwbes-contact-feedback {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.jwbes-contact-feedback.is-success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46 !important;
}

.jwbes-contact-feedback.is-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b !important;
}

@media (min-width: 720px) {
    .jwbes-contact-form {
        padding: 26px 24px;
    }
    .jwbes-contact-submit {
        width: auto;
        min-width: 200px;
    }
}