.book-card-course .book-cover {
    height: auto;
    aspect-ratio: 4 / 3;
}

.book-card-course .book-cover img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.course-detail .detail-cover {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
}

.course-detail .detail-cover img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.course-gallery {
    grid-column: 1 / -1;
    min-width: 0;
}

.course-gallery a {
    display: block;
    margin-top: 16px;
}

.course-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.quick-add-btn:disabled,
.btn-add-detail:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.sticky-filter-dock:has(.course-directory-panel:not([hidden])) { position: static; }
.subcategory-panel.course-directory-panel { display: block; padding: 16px 0; }
.course-directory-panel .subcategory-heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 12px;
}
.course-directory-panel .subcategory-heading h2 { font-size: 17px; }
.course-directory-panel .subcategory-heading span { white-space: normal; font-size: 12px; }
.course-directory-panel .subcategory-chips { display: block; width: 100%; overflow: visible; padding: 0; }
.course-directory-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.course-directory-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid #e3cfb6;
    border-radius: 10px;
    background: #fffaf3;
    color: #513f34;
    text-align: left;
    text-decoration: none;
    white-space: normal;
}
.course-directory-name { font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.course-directory-count { color: #806d5b; font-size: 12px; line-height: 1.3; }
.course-directory-link:hover { border-color: var(--wine); background: #fff2e6; }
.course-directory-link.active { border-color: var(--wine); background: var(--wine); color: white; }
.course-directory-link.active .course-directory-count { color: #ffe4ca; }
.course-directory-link:focus-visible, .course-directory-back:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.course-directory-back { display: inline-block; margin-bottom: 12px; padding: 8px 0; color: var(--wine); font-weight: 700; text-underline-offset: 3px; }

@media (max-width: 1100px) {
    .course-directory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .subcategory-panel.course-directory-panel { padding: 12px 0; }
    .course-directory-panel .subcategory-heading { margin-bottom: 10px; }
    .course-directory-panel .subcategory-heading h2 { font-size: 15px; }
    .course-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .course-directory-link { min-height: 62px; padding: 8px; gap: 4px; border-radius: 8px; }
    .course-directory-name { font-size: 12px; }
    .course-directory-count { font-size: 11px; }
    .course-results-actions { flex-wrap: wrap; max-width: 100%; }
    .course-results-actions .section-note { white-space: normal; }
}