/* Shared surfaces inspired by Linear's restrained panels and Stripe's accent-led sections.
   They adapt the existing component; explicit Elementor declarations win. */
:where(.jaygah-preset-outlined)>.elementor-widget-container{background:var(--jds-color-surface);border:1px solid var(--jds-color-border);border-radius:var(--jds-radius-card);padding:var(--jds-space-6);box-shadow:none}
:where(.jaygah-preset-accent)>.elementor-widget-container{background:var(--jds-color-surface);border:1px solid var(--jds-color-border);border-inline-start:4px solid var(--jds-color-primary);border-radius:var(--jds-radius-card);padding:var(--jds-space-6);box-shadow:var(--jds-shadow-sm)}
:where(.jaygah-preset-minimal)>.elementor-widget-container{background:transparent;border-radius:var(--jds-radius-control);padding:var(--jds-space-4);box-shadow:none}
:where(.jaygah-preset-cards)>.elementor-widget-container{background:var(--jaygah-card-bg,#fff);border-radius:var(--jaygah-radius-lg,24px);padding:clamp(16px,3vw,32px);box-shadow:var(--jaygah-shadow,0 8px 28px #18343d0a)}
:where(.jaygah-preset-featured)>.elementor-widget-container{background:var(--jaygah-primary-soft,#e8f6f6);border-radius:var(--jds-radius-feature);padding:clamp(20px,4vw,48px)}
.jaygah-course-piece{min-width:0;overflow-wrap:anywhere;color:var(--jaygah-text,#18343d);font-family:var(--jds-font-family);line-height:var(--jds-leading-body)}.jaygah-course-piece img{max-width:100%;height:auto;border-radius:var(--jds-radius-media)}.jaygah-course-piece h2{font-size:var(--jds-type-section);line-height:1.5}.jaygah-course-piece .jaygah-piece-grid{display:grid;grid-template-columns:repeat(var(--piece-columns,3),minmax(0,1fr));gap:var(--jds-component-gap)}.jaygah-course-piece article{padding:var(--jds-space-5);border-radius:var(--jds-radius-media);background:var(--jaygah-card-bg,#fff);box-shadow:var(--jaygah-shadow)}.jaygah-course-piece a{color:var(--jds-color-accent-text)}.jaygah-course-piece details{padding:var(--jds-space-4);margin-block:12px;border-block-end:1px solid var(--jds-color-border)}.jaygah-course-piece summary{cursor:pointer;min-height:var(--jds-touch-target)}.jaygah-course-piece .jaygah-piece-cta{display:inline-flex;align-items:center;justify-content:center;min-height:var(--jds-touch-target);padding:10px 24px;border-radius:var(--jds-radius-control);background:var(--jds-action-background);color:var(--jds-action-text)}.jaygah-course-piece blockquote{margin:0}.jaygah-course-piece .jaygah-piece-price{font-size:24px;font-weight:700;display:block;margin-block:16px}
@media(max-width:767px){.jaygah-course-piece .jaygah-piece-grid{grid-template-columns:1fr}}

/* Keep shop controls grouped and course discounts clear of the cover image. */
.jaygah-shop-ordering{display:grid;gap:12px;overflow:visible;min-width:0}
.jaygah-shop-ordering .title-orderby-shkrn{justify-content:flex-start;justify-self:start;background:transparent;box-shadow:none;margin:0;padding:0;border-radius:0;color:var(--jds-color-text);font-weight:700}
.jaygah-shop-ordering .woocommerce-ordering{display:flex;flex-wrap:wrap;gap:8px;margin:0;min-width:0}
.jaygah-shop-ordering .orderby-shkrn{min-height:var(--jds-touch-target);white-space:normal;background:var(--jds-color-surface);color:var(--jds-color-muted);border:1px solid var(--jds-color-border);border-radius:var(--jds-radius-control);font-weight:600;padding:8px 14px;transition:all var(--jds-duration-fast) var(--jds-ease)}
.jaygah-shop-ordering .orderby-shkrn:hover{background:var(--jds-color-surface-soft);color:var(--jds-color-text);border-color:var(--jds-color-primary)}
.jaygah-shop-ordering .orderby-shkrn:focus-visible{outline:var(--jds-focus-width) solid var(--jds-color-primary);outline-offset:var(--jds-focus-offset)}
.box-course .badge-darsad.jaygah-course-sale{position:static;inset:auto;z-index:auto;align-self:flex-start;flex:none;margin:12px 5px 0;padding:7px 12px;line-height:1.5;font-size:13px;max-width:calc(100% - 10px);white-space:normal}

.jaygah-shop-ordering .orderby-shkrn[aria-pressed="true"]{background:var(--jds-color-primary-soft);color:var(--jds-color-accent-text);border:1px solid var(--jds-color-primary);font-weight:800}.jaygah-shop-ordering .orderby-shkrn[aria-pressed="true"]::before{content:"✓";margin-inline-end:6px}

/* ==========================================================================
   JDS Phase 4: Single Course Page & Course Archive Modernization
   ========================================================================== */

/* Single Course Hero Container */
.product-top-header-shkrn,
.jaygah-course-hero {
    background: var(--jds-color-surface) !important;
    border: 1px solid var(--jds-color-border) !important;
    border-radius: var(--jds-radius-feature, 24px) !important;
    box-shadow: var(--jds-shadow-card) !important;
    color: var(--jds-color-text) !important;
    padding: clamp(24px, 4vw, 44px) !important;
    gap: clamp(20px, 3.5vw, 40px) !important;
    transition: background var(--jds-duration-fast) var(--jds-ease);
}

.image-left-box-product-shkrn {
    border-radius: var(--jds-radius-media, 18px) !important;
    background: var(--jds-color-surface-soft) !important;
    border: 1px solid var(--jds-color-border) !important;
    overflow: hidden !important;
}

.image-left-box-product-shkrn img,
.woocommerce-product-gallery__image--placeholder {
    border-radius: inherit !important;
    background: var(--jds-color-surface-soft) !important;
    object-fit: cover !important;
}

.product-title-shkrn {
    color: var(--jds-color-text) !important;
    font-size: var(--jds-type-page, 28px) !important;
    font-family: var(--jds-font-heading) !important;
    font-weight: 850 !important;
    line-height: var(--jds-leading-heading) !important;
    margin-bottom: var(--jds-space-3) !important;
}

.product-short-desc-shkrn {
    color: var(--jds-color-muted) !important;
    font-size: var(--jds-type-body, 15px) !important;
    line-height: var(--jds-leading-body) !important;
}

/* Course Hero Stats & Rating Row */
.jaygah-course-hero-stats > span,
.jaygah-course-hero-stats > a,
.rate-seasons-box-row > div {
    background: var(--jds-color-surface-soft) !important;
    border: 1px solid var(--jds-color-border) !important;
    border-radius: var(--jds-radius-control, 12px) !important;
    color: var(--jds-color-text) !important;
    padding: 10px 14px !important;
    font-weight: 700 !important;
}

/* Single Course Action / Purchase Buttons */
.box-btns-price-rate-product-shkrn button,
.box-btns-price-rate-product-shkrn .single_add_to_cart_button,
.jaygah-course-hero .button,
.single_add_to_cart_button {
    min-height: 48px !important;
    padding: 12px 28px !important;
    border-radius: var(--jds-radius-control, 14px) !important;
    background: var(--jds-action-background) !important;
    color: var(--jds-action-text) !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    border: 0 !important;
    box-shadow: var(--jds-shadow-sm) !important;
    cursor: pointer !important;
    transition: transform var(--jds-duration-fast) var(--jds-ease), box-shadow var(--jds-duration-fast) var(--jds-ease) !important;
}

.box-btns-price-rate-product-shkrn button:hover,
.box-btns-price-rate-product-shkrn .single_add_to_cart_button:hover,
.single_add_to_cart_button:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--jds-shadow-raised) !important;
}

/* Single Course Price Display */
.box-btns-price-rate-product-shkrn .price,
.box-btns-price-rate-product-shkrn .amount {
    color: var(--jds-color-text) !important;
    font-size: 26px !important;
    font-weight: 850 !important;
    letter-spacing: -0.02em !important;
}

/* Course Curriculum Section */
.jaygah-course-curriculum > details {
    background: var(--jds-color-surface) !important;
    border: 1px solid var(--jds-color-border) !important;
    border-radius: var(--jds-radius-card, 16px) !important;
    box-shadow: var(--jds-shadow-sm) !important;
    margin-bottom: var(--jds-space-3) !important;
    overflow: hidden !important;
    transition: border-color var(--jds-duration-fast) var(--jds-ease);
}

.jaygah-course-curriculum > details:hover {
    border-color: var(--jds-color-primary) !important;
}

.jaygah-course-curriculum summary {
    background: transparent !important;
    color: var(--jds-color-text) !important;
    min-height: 52px !important;
    padding: 14px 20px !important;
    font-weight: 800 !important;
    font-size: 16px !important;
}

.jaygah-course-curriculum li {
    border-top: 1px solid var(--jds-color-border) !important;
    padding: 12px 20px !important;
    color: var(--jds-color-text) !important;
    transition: background var(--jds-duration-fast) var(--jds-ease);
}

.jaygah-course-curriculum li:hover {
    background: var(--jds-color-surface-soft) !important;
}

.jaygah-course-curriculum li .jaygah-lesson-state {
    background: var(--jds-color-surface-soft) !important;
    border: 1px solid var(--jds-color-border) !important;
    color: var(--jds-color-muted) !important;
}

/* Course Description & Metadata Card */
.content-single-shkrn,
.shkrn-box-style-sidebar,
.jaygah-course-extra-card,
.jaygah-course-faq {
    background: var(--jds-color-surface) !important;
    border: 1px solid var(--jds-color-border) !important;
    border-radius: var(--jds-radius-card, 20px) !important;
    box-shadow: var(--jds-shadow-card) !important;
    color: var(--jds-color-text) !important;
}

/* Discussion & Review Cards */
.woocommerce #reviews .commentlist > li,
.comments-box .comment,
.jaygah-discussion-card {
    background: var(--jds-color-surface) !important;
    border: 1px solid var(--jds-color-border) !important;
    border-radius: var(--jds-radius-card, 16px) !important;
    box-shadow: var(--jds-shadow-sm) !important;
    color: var(--jds-color-text) !important;
    padding: 18px 22px !important;
}

/* Course Catalog Archive Cards (.box-course) */
.archive-grid-posts-shkrn {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
}
@media (max-width: 1024px) {
    .archive-grid-posts-shkrn {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    .archive-grid-posts-shkrn {
        grid-template-columns: 1fr !important;
    }
}

.box-course {
    background-color: var(--jds-color-surface) !important;
    border: 1px solid var(--jds-color-border) !important;
    border-radius: var(--jds-radius-card, 20px) !important;
    box-shadow: var(--jds-shadow-card) !important;
    padding: var(--jds-space-4, 16px) !important;
    transition: transform var(--jds-duration-fast) var(--jds-ease),
                box-shadow var(--jds-duration-fast) var(--jds-ease),
                border-color var(--jds-duration-fast) var(--jds-ease) !important;
}

.box-course:hover {
    transform: translateY(-2px) !important;
    border-color: var(--jds-color-primary) !important;
    box-shadow: var(--jds-shadow-raised) !important;
}

.box-course .course-openner-link-box-shkrn > h2 {
    color: var(--jds-color-text) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.6 !important;
    padding: 12px 4px 6px !important;
}

.box-course .detail,
.box-course .course-item-row-detail {
    color: var(--jds-color-muted) !important;
    font-size: 13px !important;
}

.box-course :is(.btn-more, .btn-more-course-shkrn, .add_to_cart_button, .button) {
    min-height: 44px !important;
    border-radius: var(--jds-radius-control, 12px) !important;
    font-weight: 750 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    background: var(--jds-action-background) !important;
    color: var(--jds-action-text) !important;
    border: 0 !important;
    transition: all var(--jds-duration-fast) var(--jds-ease) !important;
}

.box-course :is(.btn-more, .btn-more-course-shkrn, .add_to_cart_button, .button):hover {
    filter: brightness(1.08) !important;
    box-shadow: var(--jds-shadow-sm) !important;
}

.box-course .badge-darsad {
    border-radius: var(--jds-radius-pill, 99px) !important;
    background: var(--jds-action-background) !important;
    color: var(--jds-action-text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: var(--jds-shadow-sm) !important;
}

/* Dark Mode Fallback for Catalog & Product Placeholders */
body.dark-mode-shkrn .box-course .woocommerce-placeholder,
body.dark-mode-shkrn .woocommerce-product-gallery__image--placeholder,
body.dark-mode-shkrn .box-article img[src*="placeholder"],
body.dark-mode-shkrn .box-course img[src*="placeholder"] {
    background: var(--jds-color-surface-soft) !important;
    filter: brightness(0.85) contrast(1.1);
}