/* Jaygah Design System (JDS). Extend the existing theme; stored options remain authoritative. */
:root {
    --jds-site-primary: var(--shkrn-var-main-color, #008a90);
    --jds-site-font: var(--shkrn-var-font-family, Abar, sans-serif);
    --jds-color-primary: var(--jds-site-primary);
    --jds-color-secondary: var(--jaygah-secondary, #006b70);
    --jds-color-surface: var(--shkrn-var-color-light-dark-middle, #fff);
    --jds-color-text: var(--shkrn-var-color-light-dark-text, #18343d);
    --jds-color-muted: var(--shkrn-var-color-light-dark-opacity-text, #647780);
    --jds-color-success: #087f5b;
    --jds-color-warning: #b77913;
    --jds-color-danger: #b42338;
    --jds-color-on-primary: var(--jaygah-on-primary, #fff);
    --jds-action-start: var(--jaygah-action-primary, var(--jds-color-primary));
    --jds-action-end: var(--jaygah-action-secondary, var(--jds-color-secondary));
    --jds-action-text: var(--jaygah-action-foreground, #fff);
    --jds-action-background: linear-gradient(135deg, var(--jds-action-start), var(--jds-action-end));
    --jds-font-family: var(--shkrn-var-font-family, Abar, sans-serif);
    --jds-font-heading: var(--jds-font-family);
    --jds-type-caption: .75rem;
    --jds-type-meta: .8125rem;
    --jds-type-small: .875rem;
    --jds-type-body: 1rem;
    --jds-type-card-title: 1rem;
    --jds-type-section: clamp(1.375rem, 2.5vw, 2.125rem);
    --jds-type-page: clamp(1.75rem, 3vw, 2.625rem);
    --jds-leading-heading: 1.5;
    --jds-leading-body: 1.9;
    --jds-weight-body: 400;
    --jds-weight-label: 700;
    --jds-weight-heading: 800;
    --jds-space-1: .25rem;
    --jds-space-2: .5rem;
    --jds-space-3: .75rem;
    --jds-space-4: 1rem;
    --jds-space-5: 1.25rem;
    --jds-space-6: 1.5rem;
    --jds-space-8: 2rem;
    --jds-space-10: 2.5rem;
    --jds-space-12: 3rem;
    --jds-section-space: clamp(2rem, 4vw, 4rem);
    --jds-container-gutter: clamp(1rem, 2vw, 2rem);
    --jds-component-gap: var(--jds-space-5);
    --jds-card-padding: var(--jds-space-3);
    --jds-radius-control: clamp(8px, calc(var(--jds-radius-card) / 2), 18px);
    --jds-radius-group: calc(var(--jds-radius-control) + 6px);
    --jds-radius-media: 18px;
    --jds-radius-card: 24px;
    --jds-radius-feature: 32px;
    --jds-radius-pill: 999px;
    --jds-shadow-sm: 0 2px 8px #18343d08;
    --jds-shadow-card: 0 8px 28px #18343d0a;
    --jds-shadow-raised: 0 16px 40px #18343d18;
    --jds-container: 1200px;
    --jds-container-wide: 1440px;
    --jds-copy-width: 76ch;
    /* CSS custom properties cannot drive @media. These document the matching query thresholds. */
    --jds-breakpoint-mobile: 600px;
    --jds-breakpoint-tablet: 768px;
    --jds-breakpoint-layout: 1000px;
    --jds-breakpoint-desktop: 1440px;
    --jds-touch-target: 44px;
    --jds-control-height: 48px;
    --jds-duration-fast: 160ms;
    --jds-duration-base: 220ms;
    --jds-duration-slow: 320ms;
    --jds-ease: cubic-bezier(.2, .7, .2, 1);
    --jds-disabled-opacity: .55;
    --jds-focus-width: 2px;
    --jds-focus-offset: 3px;
    /* Compatibility contract for existing account, learning and theme components. */
    --jaygah-primary: var(--jds-color-primary);
    --jaygah-font: var(--jds-font-family);
    --jaygah-radius-sm: var(--jds-radius-control);
    --jaygah-radius-md: var(--jds-radius-media);
    --jaygah-radius-lg: var(--jds-radius-card);
    --jaygah-space: var(--jds-container-gutter);
    --jaygah-shadow: var(--jds-shadow-card);
    --jaygah-danger: var(--jds-color-danger);
    --jaygah-action-background: var(--jds-action-background);
    --jaygah-action-gradient: var(--jds-action-background);
    --jaygah-action-shadow: 0 6px 22px color-mix(in srgb, var(--jds-color-primary) 20%, transparent);
}
/* Resolve aliases on the body owning the theme's light, dark or system palette. */
body {
    --jds-site-text: var(--shkrn-var-color-light-dark-text, #18343d);
    --jds-color-surface: var(--shkrn-var-color-light-dark-middle, #fff);
    --jds-color-text: var(--shkrn-var-color-light-dark-text, #18343d);
    --jds-color-muted: var(--shkrn-var-color-light-dark-opacity-text, #647780);
    --jds-color-surface-soft: color-mix(in srgb, var(--jds-color-text) 4%, var(--jds-color-surface));
    --jds-color-page: var(--jds-color-surface-soft);
    --jds-color-border: color-mix(in srgb, var(--jds-color-text) 18%, var(--jds-color-surface));
    --jds-color-control-border: color-mix(in srgb, var(--jds-color-text) 55%, var(--jds-color-surface));
    --jds-focus-color: var(--jds-color-accent-text);
    --jds-color-danger-text: color-mix(in srgb, var(--jds-color-danger) 20%, var(--jds-color-text));
    --jds-color-primary-soft: color-mix(in srgb, var(--jds-color-primary) 10%, var(--jds-color-surface));
    --jds-color-accent-text: color-mix(in srgb, var(--jds-color-primary) 20%, var(--jds-color-text));
    --jds-color-success-text: color-mix(in srgb, var(--jds-color-success) 20%, var(--jds-color-text));
    --jds-color-warning-text: color-mix(in srgb, var(--jds-color-warning) 20%, var(--jds-color-text));
    --jds-focus-ring: 0 0 0 4px var(--jds-color-primary-soft);
    --jaygah-card-bg: var(--jds-color-surface);
    --jaygah-surface: var(--jds-color-surface);
    --jaygah-surface-soft: var(--jds-color-surface-soft);
    --jaygah-page-bg: var(--jds-color-page);
    --jaygah-text: var(--jds-color-text);
    --jaygah-muted: var(--jds-color-muted);
    --jaygah-line: var(--jds-color-border);
    --jaygah-primary-soft: var(--jds-color-primary-soft);
    --jaygah-accent-text: var(--jds-color-accent-text);
    --jaygah-success-text: var(--jds-color-success-text);
    --jaygah-warning-text: var(--jds-color-warning-text);
    --jaygah-control-bg: var(--jds-color-surface-soft);
    --jaygah-control-border: var(--jds-color-control-border);
}
/* Globals apply only to owned widgets. Native dashboard/lesson UI stays independent of Elementor. */
:where(.jds-widget) {
    --jds-color-primary: var(--jds-elementor-primary, var(--jds-site-primary));
    --jds-color-secondary: var(--jds-elementor-secondary, var(--jaygah-secondary, #006b70));
    --jds-color-text: var(--jds-elementor-text, var(--jds-site-text));
    --jds-font-family: var(--jds-elementor-font-family, var(--jds-site-font));
    --jds-font-heading: var(--jds-elementor-font-heading, var(--jds-font-family));
    --jds-color-primary-soft: color-mix(in srgb, var(--jds-color-primary) 10%, var(--jds-color-surface));
    --jds-color-accent-text: color-mix(in srgb, var(--jds-color-primary) 20%, var(--jds-color-text));
    --shkrn-var-main-color: var(--jds-color-primary);
    --shkrn-var-color-light-dark-text: var(--jds-color-text);
    --shkrn-var-font-family: var(--jds-font-family);
    --jds-action-background: linear-gradient(135deg, var(--jds-action-start), var(--jds-action-end));
    --jaygah-action-background: var(--jds-action-background);
    --jaygah-action-gradient: var(--jds-action-background);
    --jaygah-action-foreground: var(--jds-action-text);
    --jaygah-on-primary: var(--jds-color-on-primary);
    --jaygah-radius-lg: var(--jds-radius-card);
    --jaygah-radius-md: var(--jds-radius-media);
    --jaygah-radius-sm: var(--jds-radius-control);
    --jaygah-control-radius: var(--jds-radius-control);
    --jaygah-control-group-radius: var(--jds-radius-group);
    --jaygah-shadow: var(--jds-shadow-card);
    --jaygah-primary: var(--jds-color-primary);
    --jaygah-text: var(--jds-color-text);
    --jaygah-font: var(--jds-font-family);
    --jaygah-primary-soft: var(--jds-color-primary-soft);
    --jaygah-accent-text: var(--jds-color-accent-text);
    font-family: var(--jds-font-family);
}
:where(.jaygah-account-app,.jaygah-learning-player-page,.jaygah-assessment-page,.jaygah-checkout-shell){font-family:var(--jaygah-font)}
:is(.jaygah-dashboard-continue,.jaygah-student-stats article,.jaygah-unified-settings,.jaygah-library-certificate,.jaygah-activity-event,.jaygah-chat,.jaygah-empty-state){border-radius:var(--jaygah-radius-lg);box-shadow:var(--jaygah-shadow)}
:where(.jaygah-button,.jaygah-checkout-shell #place_order,form.login .submit-btn){min-height:44px;border-radius:var(--jaygah-radius-sm);background:var(--jaygah-action-background);color:var(--jaygah-action-foreground,#fff);box-shadow:var(--jaygah-action-shadow)}
:where(.jaygah-button-ghost,.jaygah-button-secondary){background:var(--jaygah-primary-soft);color:var(--jaygah-accent-text);box-shadow:none}
:where([data-jaygah-delete-note],.jaygah-action-danger){color:var(--jaygah-danger);background:transparent;box-shadow:none}
:where(button,a,input,textarea,select):focus-visible{outline:2px solid var(--jaygah-primary);outline-offset:3px}
/* Adapt reusable widgets to their column, independently of the viewport. */
:where(.elementor-widget[data-widget_type^="jaygah"],.elementor-widget[data-widget_type="customers-slider.default"]){container-type:inline-size;container-name:jaygah-widget;min-width:0}
:where(.box-course,.box-article){container-type:inline-size;container-name:jaygah-card;min-width:0;overflow-wrap:anywhere}
:where(.box-course,.box-article)>a:first-child{min-width:0;flex:1}
:where(.box-course,.box-article)>a>img{aspect-ratio:16/9;object-fit:cover}
:where(.box-course,.box-article) :is(h2,p,.price,.course-teacher-shkrn){min-width:0;overflow-wrap:anywhere}
:where(.box-course,.box-article) :is(.btn-more,.btn-more-course-shkrn,.add_to_cart_button){margin-block-start:auto;min-height:44px;flex:0 0 auto}
.course-item-row-detail{flex-wrap:wrap;gap:8px}
.course-teacher-shkrn>span{min-width:0;overflow-wrap:anywhere}
.jaygah-media-fallback{object-fit:contain!important;background:var(--jaygah-primary-soft)}
.jaygah-carousel-empty{padding:24px;text-align:center;color:var(--jaygah-muted);border-radius:var(--jaygah-radius-md);background:var(--jaygah-primary-soft)}
.jaygah-carousel-empty[hidden]{display:none}
@container jaygah-card (max-width:260px){.course-item-row-detail{align-items:flex-start;flex-direction:column}.course-item-row-detail .price{max-width:100%;margin-inline:0}.box-course h2,.box-article h2{font-size:15px}.box-course .sale-counter-shkrn{flex-wrap:wrap}}
@container jaygah-widget (max-width:560px){.jaygah-course-piece .jaygah-piece-grid{grid-template-columns:minmax(0,1fr)}.posts-section-header{flex-wrap:wrap;gap:12px}.search-el-jaygah form{display:flex;flex-wrap:wrap;gap:8px}.search-el-jaygah input{min-width:0;max-width:100%;flex:1}.jaygah-course-piece h2{font-size:24px}.jaygah-piece-cta{max-width:100%;white-space:normal}}
@container jaygah-widget (max-width:320px){.jaygah-carousel-filters{max-width:100%;flex-wrap:wrap}.posts-title-shkrn h2{font-size:20px}.more-button-section-shkrn{white-space:normal;max-width:100%}}
.header-shkrn .jaygah-menu-fit>ul{flex-wrap:nowrap;justify-content:flex-start;overflow:visible}
.header-shkrn .jaygah-menu-fit>ul>li{flex:0 0 auto}
.header-shkrn .jaygah-menu-more[hidden]{display:none}
.header-shkrn .jaygah-menu-more>button{font:inherit;color:inherit;border:0;background:transparent;min-height:44px;padding:8px 14px;cursor:pointer}
.header-shkrn .jaygah-menu-more>ul{inset-inline-end:0;inset-inline-start:auto;width:min(320px,calc(100vw - 32px))}
.header-shkrn .jaygah-menu-more:not(.is-open)>ul{display:none}
.header-shkrn .jaygah-menu-more.is-open>ul{display:block;visibility:visible;opacity:1!important}
.header-shkrn .jaygah-menu-more>ul>li{float:none;width:100%}
body.jaygah-reduced-motion :is(.box-course,.box-article){transition:none!important}
body.jaygah-reduced-motion :is(.box-course,.box-article):hover{transform:none}

/* JDS component contracts; :where keeps explicit Elementor controls above these defaults. */
:where(.jds-container) { width: min(100% - 2 * var(--jds-container-gutter), var(--jds-container)); margin-inline: auto; }
:where(.jds-section) { padding-block: var(--jds-section-space); }
:where(.jds-section-header, .posts-section-header) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jds-space-4); min-width: 0; }
:where(.jds-section-title) { margin: 0; color: inherit; font: var(--jds-weight-heading) var(--jds-type-section)/var(--jds-leading-heading) var(--jds-font-heading); overflow-wrap: anywhere; }
:where(.jds-section-description) { max-width: var(--jds-copy-width); margin-block: var(--jds-space-2) 0; color: var(--jds-color-muted); font-size: var(--jds-type-small); line-height: var(--jds-leading-body); }
:where(.jds-card) { box-sizing: border-box; min-width: 0; padding: var(--jds-card-padding); border: 1px solid var(--jds-color-border); border-radius: var(--jds-radius-card); background: var(--jds-color-surface); color: var(--jds-color-text); box-shadow: var(--jds-shadow-card); overflow-wrap: anywhere; }
:where(.jds-card--course, .jds-card--article, .jds-card--instructor) { display: flex; flex-direction: column; gap: var(--jds-space-3); }
:where(.jds-card__media) { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--jds-radius-media); }
:where(.jds-card--instructor .jds-card__media) { aspect-ratio: 4/5; }
:where(.jds-card__title) { margin: 0; font: var(--jds-weight-heading) var(--jds-type-card-title)/var(--jds-leading-heading) var(--jds-font-heading); }
:where(.jds-card__action) { margin-block-start: auto; }
:where(.jds-button) { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--jds-space-2); min-height: var(--jds-touch-target); max-width: 100%; padding: var(--jds-space-3) var(--jds-space-5); border: 1px solid transparent; border-radius: var(--jds-radius-control); background: var(--jds-action-background); color: var(--jds-action-text); font: var(--jds-weight-label) var(--jds-type-small)/1.6 var(--jds-font-family); text-align: center; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; transition: box-shadow var(--jds-duration-fast) var(--jds-ease), background-color var(--jds-duration-fast) var(--jds-ease); }
:where(.jds-button--secondary) { background: var(--jds-color-primary-soft); color: var(--jds-color-accent-text); }
:where(.jds-button--ghost) { background: transparent; color: var(--jds-color-text); border-color: var(--jds-color-border); }
:where(.jds-button--danger) { background: transparent; color: var(--jds-color-danger-text); border-color: currentColor; }
:where(.jds-button:not(:disabled):not([aria-disabled=true])):hover { box-shadow: var(--jds-shadow-sm); }
:where(.jds-button:disabled, .jds-button[aria-disabled=true], .jds-control:disabled) { opacity: var(--jds-disabled-opacity); cursor: not-allowed; box-shadow: none; }
:where(.jds-button[aria-busy=true]) { cursor: progress; }
:where(.jds-button[aria-busy=true])::after { content: ''; width: 1em; height: 1em; flex: none; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: jds-spin 700ms linear infinite; }
:where(.jds-control) { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: var(--jds-control-height); padding: var(--jds-space-3) var(--jds-space-4); border: 1px solid var(--jds-color-control-border); border-radius: var(--jds-radius-control); background: var(--jds-color-surface-soft); color: var(--jds-color-text); font: inherit; font-size: var(--jds-type-small); line-height: 1.6; }
:where(textarea.jds-control) { min-height: 7rem; resize: vertical; }
:where(.jds-control[aria-invalid=true]) { border-color: var(--jds-color-danger); }
:where(.jds-field-help) { display: block; margin-block-start: var(--jds-space-2); color: var(--jds-color-muted); font-size: var(--jds-type-meta); }
:where(.jds-tabs, .jds-filters) { display: flex; gap: var(--jds-space-2); flex-wrap: wrap; max-width: 100%; }
:where(.jds-tabs > :is(a,button), .jds-filters > :is(a,button)) { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: var(--jds-touch-target); padding: var(--jds-space-2) var(--jds-space-4); border: 1px solid transparent; border-radius: var(--jds-radius-control); background: var(--jds-color-surface-soft); color: var(--jds-color-text); font: inherit; font-size: var(--jds-type-small); cursor: pointer; }
:where(.jds-tabs [aria-selected=true], .jds-filters [aria-pressed=true]) { background: var(--jds-color-primary-soft); color: var(--jds-color-accent-text); box-shadow: inset 0 -3px var(--jds-color-primary); font-weight: var(--jds-weight-label); }
:where(.jds-carousel-nav) { display: inline-flex; align-items: center; gap: var(--jds-space-2); }
:where(.jds-carousel-nav > button) { display: grid; place-items: center; width: var(--jds-touch-target); min-height: var(--jds-touch-target); padding: var(--jds-space-2); border: 1px solid var(--jds-color-border); border-radius: var(--jds-radius-control); background: var(--jds-color-surface); color: var(--jds-color-text); box-shadow: var(--jds-shadow-sm); cursor: pointer; }
:where(.jds-carousel-nav > button:disabled) { opacity: var(--jds-disabled-opacity); cursor: not-allowed; box-shadow: none; }
:where(.jds-empty, .jaygah-empty-state, .jaygah-carousel-empty, .jaygah-teacher-empty) { padding: var(--jds-space-8) var(--jds-space-5); border-radius: var(--jds-radius-card); text-align: center; line-height: var(--jds-leading-body); overflow-wrap: anywhere; }
:where(.jds-empty__title) { margin: 0; font-size: var(--jds-type-card-title); font-weight: var(--jds-weight-heading); }
:where(.jds-empty__action) { margin-block-start: var(--jds-space-4); }
:where(.jds-skeleton) { display: block; min-height: 1em; border-radius: var(--jds-radius-control); background: var(--jds-color-surface-soft); background-image: linear-gradient(90deg,transparent,color-mix(in srgb,var(--jds-color-text) 8%,transparent),transparent); background-size: 200% 100%; animation: jds-shimmer 1400ms ease-in-out infinite; }
:where(.jds-skeleton--media) { aspect-ratio: 16/9; }
:where(.jds-skeleton--text) { width: 80%; margin-block: var(--jds-space-2); }
:where(.jds-notice) { box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--jds-space-3); padding: var(--jds-space-4); border: 1px solid var(--jds-color-border); border-inline-start: 3px solid var(--jds-color-primary); border-radius: var(--jds-radius-control); background: var(--jds-color-surface); color: var(--jds-color-text); line-height: var(--jds-leading-body); overflow-wrap: anywhere; }
:where(.jds-notice--success) { border-inline-start-color: var(--jds-color-success); }
:where(.jds-notice--warning) { border-inline-start-color: var(--jds-color-warning); }
:where(.jds-notice--error) { border-inline-start-color: var(--jds-color-danger); }
:where(.jds-button, .jds-control, .jds-tabs a, .jds-tabs button, .jds-filters a, .jds-filters button, .jds-carousel-nav button):focus-visible { outline: var(--jds-focus-width) solid var(--jds-focus-color); outline-offset: var(--jds-focus-offset); }
@keyframes jds-spin { to { transform: rotate(1turn); } }
@keyframes jds-shimmer { to { background-position: -200% 0; } }
@media (max-width:600px) { :where(.jds-control) { font-size: var(--jds-type-body); } }
@media (prefers-reduced-motion:reduce) { :where(.jds-button, .jds-control, .jds-skeleton) { transition: none; animation: none; } :where(.jds-button[aria-busy=true])::after { animation: none; } }
body.jaygah-reduced-motion :where(.jds-button, .jds-control, .jds-skeleton), body.jaygah-reduced-motion :where(.jds-button[aria-busy=true])::after { transition: none; animation: none; }

:where(.jds-control)::placeholder{color:var(--jds-color-muted);opacity:1}

/* Existing promotional banner adapts to its widget column, with a viewport fallback. */
@container jaygah-widget (max-width:680px) {
    .jds-widget .banner { grid-template-columns:minmax(0,1fr); padding:var(--jds-space-5) var(--jds-space-4); }
    .jds-widget .banner :is(.banner-right,.banner-left) { padding:0; }
}
@media(max-width:680px) {
    .jds-widget .banner { grid-template-columns:minmax(0,1fr); padding:var(--jds-space-5) var(--jds-space-4); }
    .jds-widget .banner :is(.banner-right,.banner-left) { padding:0; }
}