/* The age-first catalog and its shared compact card. */
.kenz-catalog-shell .kenz-catalog-main {
    padding-block: var(--kenz-space-5) calc(var(--kenz-bottom-nav-clearance) + var(--kenz-space-8));
}
.kenz-catalog-shell .kenz-catalog-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kenz-space-6);
}
.kenz-catalog-shell .kenz-intro-copy { max-width: none; text-align: start; }
.kenz-catalog-shell .kenz-intro-copy h1 {
    max-width: none;
    font-size: var(--kenz-catalog-title-mobile);
    font-weight: 800;
    line-height: 1.25;
    color: var(--kenz-color-primary);
    letter-spacing: normal;
}
.kenz-catalog-shell .kenz-path-picker {
    gap: var(--kenz-space-5);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.kenz-catalog-shell :is(.kenz-stage-step, .kenz-topic-step) {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.kenz-catalog-shell .kenz-stage-step legend,
.kenz-topic-step h2 {
    margin: 0;
    padding: 0;
    margin-block-end: var(--kenz-space-3);
    color: var(--kenz-color-text);
    font-family: var(--kenz-font-display);
    font-size: var(--kenz-text-sm);
    font-weight: 700;
    line-height: 1.5;
}
.kenz-age-picker { position: relative; }
.kenz-age-picker select {
    display: block;
    width: 100%;
    min-height: var(--kenz-control-height);
    appearance: none;
    background-image: none;
    padding: var(--kenz-space-3) var(--kenz-space-4);
    padding-inline-end: var(--kenz-space-10);
    border: var(--kenz-line-thin) solid var(--kenz-color-border-strong);
    border-radius: var(--kenz-control-radius);
    background: var(--kenz-catalog-surface);
    color: var(--kenz-color-text);
    font-family: var(--kenz-font-body);
    font-size: var(--kenz-text-sm);
    cursor: pointer;
}
.kenz-age-picker > :is(.kenz-icon, .ph) {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--kenz-space-4);
    width: var(--kenz-space-4);
    height: var(--kenz-space-4);
    transform: translateY(-50%);
    pointer-events: none;
}
.kenz-topic-picker { position: relative; }
.kenz-topic-picker summary {
    display: flex;
    min-height: var(--kenz-control-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--kenz-space-3);
    padding: var(--kenz-space-3) var(--kenz-space-4);
    border: var(--kenz-line-thin) solid var(--kenz-color-border-strong);
    border-radius: var(--kenz-control-radius);
    font-size: var(--kenz-text-sm);
    cursor: pointer;
    list-style: none;
}
.kenz-topic-picker summary::-webkit-details-marker { display: none; }
.kenz-topic-picker[open] summary { border-color: var(--kenz-color-primary); }
.kenz-topic-picker[open] summary > .ph { transform: rotate(180deg); }
.kenz-topic-options {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + var(--kenz-space-2));
    z-index: 5;
    display: grid;
    max-height: var(--kenz-catalog-topic-height);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: var(--kenz-space-2);
    border: var(--kenz-line-thin) solid var(--kenz-catalog-border);
    border-radius: var(--kenz-control-radius);
    background: var(--kenz-catalog-surface);
    box-shadow: var(--kenz-shadow-lead);
}
.kenz-topic-options label {
    display: flex;
    min-height: var(--kenz-catalog-touch);
    align-items: center;
    gap: var(--kenz-space-3);
    padding: var(--kenz-space-2) var(--kenz-space-3);
    border-radius: var(--kenz-radius-sm);
    font-size: var(--kenz-text-sm);
    cursor: pointer;
}
.kenz-topic-options label:has(input:checked),
.kenz-topic-options label:hover { background: var(--kenz-color-primary-soft); }
.kenz-topic-options input {
    width: var(--kenz-space-4);
    height: var(--kenz-space-4);
    flex: 0 0 auto;
    accent-color: var(--kenz-color-primary);
}
.kenz-picker-help {
    margin: var(--kenz-space-2) 0 0;
    color: var(--kenz-color-text-muted);
    font-size: var(--kenz-text-xs);
}
.kenz-selected-topics { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--kenz-space-2); }
.kenz-selected-topics:empty { display: none; }
.kenz-topic-chip {
    display: inline-flex;
    min-height: var(--kenz-catalog-touch);
    align-items: center;
    gap: var(--kenz-space-2);
    margin-block-start: 0;
    padding: var(--kenz-space-2) var(--kenz-space-3);
    border: var(--kenz-line-thin) solid var(--kenz-color-border);
    border-radius: var(--kenz-chip-radius);
    background: var(--kenz-color-primary-soft);
    color: var(--kenz-color-primary);
    font: inherit;
    font-size: var(--kenz-text-xs);
    cursor: pointer;
}
.kenz-catalog-shell .kenz-results { margin-block-start: var(--kenz-space-6); }
.kenz-results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--kenz-space-3); flex-wrap: wrap; margin-block-end: var(--kenz-space-4); }
.kenz-catalog-shell .kenz-results-summary {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--kenz-space-3);
    padding: 0;
    background: transparent;
}
.kenz-catalog-shell .kenz-results-summary h2 {
    display: inline-flex;
    align-items: center;
    gap: var(--kenz-space-2);
    margin: 0;
    padding: var(--kenz-space-1) var(--kenz-space-3);
    border: var(--kenz-card-border);
    border-radius: var(--kenz-chip-radius);
    background: var(--kenz-catalog-surface);
    color: var(--kenz-text-heading);
    font-family: var(--kenz-font-display);
    font-size: var(--kenz-text-sm);
    font-weight: 700;
}
.kenz-catalog-shell .kenz-results-summary p {
    margin-block-start: var(--kenz-space-2);
    font-size: var(--kenz-text-xs);
}
.kenz-catalog-shell .kenz-reset-link {
    min-height: var(--kenz-catalog-touch);
    flex: 0 0 auto;
    align-items: center;
    color: var(--kenz-color-primary);
    font-size: var(--kenz-text-sm);
}
.kenz-catalog-shell .kenz-catalog-sort {
    flex-wrap: wrap;
    justify-content: end;
    margin-block: 0;
}
.kenz-catalog-shell .kenz-catalog-sort :is(button, select) { min-height: var(--kenz-catalog-touch); }
.kenz-sort-picker { position: relative; display: inline-flex; align-items: center; }
.kenz-catalog-shell .kenz-sort-picker select {
    appearance: none;
    background-image: none;
    padding: var(--kenz-space-2) var(--kenz-space-4);
    padding-inline-end: var(--kenz-space-10);
    border: var(--kenz-line-thin) solid var(--kenz-color-border-strong);
    border-radius: var(--kenz-control-radius);
    background: var(--kenz-catalog-surface);
    color: var(--kenz-color-text);
    font-family: var(--kenz-font-body);
    font-size: var(--kenz-text-sm);
    font-weight: 600;
    cursor: pointer;
}
.kenz-sort-picker > :is(.kenz-icon, .ph) {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--kenz-space-3);
    width: var(--kenz-space-4);
    height: var(--kenz-space-4);
    transform: translateY(-50%);
    color: var(--kenz-color-text);
    pointer-events: none;
}
.kenz-catalog-shell .kenz-catalog-sort button {
    background: var(--kenz-color-primary-soft);
    color: var(--kenz-color-primary);
}
:is(.kenz-catalog-shell, .kenz-instructor-profile) .kenz-course-list { grid-template-columns: minmax(0, 1fr); gap: var(--kenz-space-4); }
.kenz-course-row.kenz-course-row--compact {
    position: relative;
    display: grid;
    grid-template-columns: var(--kenz-catalog-cover-size) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    height: 100%;
    align-items: start;
    gap: var(--kenz-catalog-card-gap);
    padding: var(--kenz-catalog-card-padding);
    overflow: visible;
    border: var(--kenz-line-thin) solid var(--kenz-catalog-border);
    background: var(--kenz-catalog-surface);
    transform: none;
    transition: border-color var(--kenz-duration-fast) var(--kenz-ease-out), box-shadow var(--kenz-duration-fast) var(--kenz-ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .kenz-course-row.kenz-course-row--compact:hover {
        border-color: var(--kenz-purple-300);
        box-shadow: var(--kenz-shadow-primary-soft);
    }
}
.kenz-course-row--compact .kenz-course-media {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    height: var(--kenz-catalog-cover-size);
    min-height: 0;
    place-items: center;
    aspect-ratio: 1;
    border-radius: var(--kenz-control-radius);
    background: var(--kenz-color-primary-soft);
    color: var(--kenz-color-primary);
}
.kenz-course-row--compact .kenz-course-media img { width: 100%; height: 100%; min-height: 0; max-height: var(--kenz-catalog-cover-size); aspect-ratio: 1 / 1; object-fit: cover; }
.kenz-course-age-range { display: inline-flex; direction: rtl; align-items: baseline; gap: var(--kenz-space-1); white-space: nowrap; }
.kenz-course-row--compact .kenz-course-cart .kenz-icon { width: var(--kenz-space-5); height: var(--kenz-space-5); }
.kenz-course-row--compact .kenz-course-content { display: block; padding: 0; }
.kenz-course-row--compact .kenz-course-content h3 {
    margin: 0;
    font-family: var(--kenz-font-display);
    font-size: var(--kenz-catalog-card-title);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.kenz-course-card-link { color: var(--kenz-color-text); text-decoration: none; }
.kenz-course-card-link::after { position: absolute; inset: 0; z-index: 1; border-radius: var(--kenz-card-radius); content: ""; }
.kenz-course-card-link:focus-visible::after { outline: var(--kenz-focus-width) solid var(--kenz-color-focus); outline-offset: var(--kenz-focus-width); }
.kenz-course-row--compact .kenz-course-type {
    display: inline-block;
    margin: 0 0 var(--kenz-space-1) !important;
    padding: 0.1rem var(--kenz-space-2);
    border-radius: var(--kenz-chip-radius);
    background: var(--kenz-color-primary-soft);
    color: var(--kenz-color-primary) !important;
    font-size: var(--kenz-catalog-card-caption);
    font-weight: 700;
    line-height: 1.5;
}
.kenz-course-row--compact .kenz-course-card-result {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: var(--kenz-space-1) 0 0;
    color: var(--kenz-color-text-muted);
    font-size: var(--kenz-text-sm);
    line-height: 1.65;
}
.kenz-course-row--compact .kenz-course-card-age {
    margin: var(--kenz-space-1) 0 0;
    color: var(--kenz-color-text-muted);
    font-size: var(--kenz-text-xs);
}
.kenz-course-row--compact .kenz-course-offer {
    grid-column: 1 / -1;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--kenz-space-3);
    margin-block-start: auto;
    padding-block-start: var(--kenz-space-3);
    border-block-start: var(--kenz-line-thin) solid var(--kenz-color-border);
}
.kenz-course-row--compact .kenz-course-price { font-size: var(--kenz-font-size-20); }
.kenz-course-row--compact .kenz-course-price ins { font-size: inherit; }
.kenz-course-row--compact .kenz-course-actions {
    position: relative;
    z-index: 2;
    width: auto;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    margin-inline-start: auto;
}
.kenz-course-row--compact .kenz-course-start {
    min-height: var(--kenz-catalog-touch);
    min-width: 0;
    flex: 1 1 auto;
    background: var(--kenz-catalog-action-bg);
    color: var(--kenz-catalog-action-text);
    white-space: nowrap;
}
.kenz-course-row--compact .kenz-course-cart {
    display: grid;
    width: var(--kenz-catalog-touch);
    min-width: var(--kenz-catalog-touch);
    height: var(--kenz-catalog-touch);
    place-items: center;
    border-radius: var(--kenz-control-radius);
    background: var(--kenz-color-primary-soft);
    color: var(--kenz-color-primary);
    font-size: var(--kenz-text-lg);
    text-decoration: none;
}
.kenz-course-row--compact .kenz-course-cart[aria-busy="true"] { opacity: .6; pointer-events: none; }
.kenz-catalog-shell .kenz-course-load-more-wrap { margin-block-start: var(--kenz-space-6); }
.kenz-catalog-shell .kenz-course-load-more { min-width: 0; padding-inline: var(--kenz-space-6); }
.kenz-topic-picker summary:focus-visible,
.kenz-topic-options input:focus-visible,
.kenz-topic-chip:focus-visible { outline: var(--kenz-focus-width) solid var(--kenz-color-focus); outline-offset: var(--kenz-focus-width); }

@media (min-width: 48rem) {
    .kenz-catalog-shell .kenz-catalog-main { padding-block: var(--kenz-space-8) var(--kenz-space-20); }
    .kenz-catalog-shell .kenz-intro-copy h1 { font-size: var(--kenz-catalog-title-size); }
    .kenz-catalog-shell .kenz-path-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kenz-space-4); padding: 0; }
    :is(.kenz-catalog-shell, .kenz-instructor-profile) .kenz-course-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kenz-course-row.kenz-course-row--compact { --kenz-catalog-cover-size: var(--kenz-catalog-cover-desktop); }
}
@media (max-width: 23rem) {
    .kenz-course-row--compact { --kenz-catalog-cover-size: var(--kenz-catalog-cover-small); --kenz-catalog-card-padding: var(--kenz-space-3); }
}

.kenz-catalog-shell .kenz-results[aria-busy="true"] { opacity: .6; }
.kenz-catalog-filter-status:not(.kenz-visually-hidden) {
    margin-block: var(--kenz-space-4);
    color: var(--kenz-color-error-text);
}
.kenz-catalog-filter-retry:not([hidden]) {
    min-height: var(--kenz-catalog-touch);
    padding: var(--kenz-space-2) var(--kenz-space-4);
    border: var(--kenz-line-thin) solid var(--kenz-color-primary);
    border-radius: var(--kenz-control-radius);
    background: var(--kenz-catalog-surface);
    color: var(--kenz-color-primary);
    font: inherit;
    cursor: pointer;
}

/* Keep numeric age ranges in ascending visual order inside the RTL card. */
.kenz-course-row--compact .kenz-course-card-age { direction: rtl; text-align: right; }

.kenz-course-row--compact .kenz-course-start--continue { background: var(--kenz-color-primary-soft); color: var(--kenz-color-primary); border-color: var(--kenz-color-border-strong); }
.kenz-course-row--compact .kenz-course-start--continue:hover { background: var(--kenz-button-secondary-bg-hover); color: var(--kenz-color-primary); }