/*
!* responsive-fix.css (2025-12-21)
   Small overrides to fix layout issues on narrow screens and prevent empty gaps.
*!

!* Make fixed-width containers fluid ONLY on narrower screens.
   On desktop, keep the base fixed-width layout from styles.min.css.
*!
@media only screen and (max-width: 1200px) {
    .container-fluid,
    .container-fluid-980,
    .container-fluid-1200,
    .content {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        !* Keep a consistent “gutters” padding on narrow screens *!
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    .container-fluid,
    .content {
        max-width: 1140px;
    }

    .container-fluid-980 {
        max-width: 980px;
    }

    .container-fluid-1200 {
        max-width: 1200px;
    }

    !* Common fixed-width helpers used on articles. *!
    .article__w.w940,
    .share__w {
        width: 100%;
        max-width: 940px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    !* Extra attention: custom.css forces a fixed 940px wrapper for the homepage
       publications block: `.article-more.mt40 .article-items-wrapper { width: 940px; }`
       On smaller viewports this causes cards to sit too close to the edges.
    *!
    .article-more.mt40 .article-items-wrapper {
        width: 100% !important;
        max-width: 940px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
}

!* Fix “two cards + huge empty middle” on homepage/blog lists. *!
.news-list .article-items-wrapper {
    justify-content: center;
    gap: 30px;
}

!* Homepage "Нові публікації": keep text aligned with preview image at all widths.
   Base CSS centers images inside a fixed-height wrapper; when images have different
   intrinsic sizes this makes the content appear misaligned.
*!
.news-list .article-items-wrapper .article-item .img-wrapper {
    display: block;
    height: 220px;
    overflow: hidden;
}

.news-list .article-items-wrapper .article-item .img-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 767px) {
    .news-list .article-items-wrapper {
        justify-content: center;
    }
}

!* Fix broken 2-column grids in mobile dropdowns (levels/categories).
   The base CSS uses `space-between`, which can create huge gaps on some widths.
*!
.static-fixed-top_mobile .static-levels-switcher .dropdown-menu ul,
.static-fixed-top_mobile .static-categ-switcher .dropdown-menu ul {
    justify-content: center;
    gap: 12px;
}

!* Category pages: keep the header (incl. search icon) clickable/visible.
    Some category top blocks can overlap the header area.
*!
header.header {
	position: relative;
	z-index: 50;
}

.subscription-billing {
    margin-top: 42px;
    padding-top: 28px;
    border-top: 1px solid #edf1f4;
    color: #5e6977;
}

.user-profile__subscribe #idFormticket.current-ticket-form {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible;
}

.user-profile__subscribe #idFormticket.current-ticket-form .table {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.user-profile__subscribe #idFormticket.current-ticket-form table {
    margin-bottom: 0 !important;
}

.user-profile__subscribe .current-ticket-actions {
    margin-top: 22px;
}

@media only screen and (max-width: 767px) {
    .user-profile__subscribe #idFormticket.current-ticket-form .table {
        overflow: visible !important;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table,
    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table tbody,
    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table tr,
    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table td {
        display: block;
        width: 100%;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table thead {
        display: none;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table tr {
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid #edf1f4;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(68, 80, 123, .07);
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table td {
        margin-top: 10px;
        padding: 0 !important;
        color: #44507b;
        font-size: 13px;
        line-height: 1.35 !important;
        text-align: left !important;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table td:first-child {
        margin-top: 0;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        color: #8c9aa8;
        font-family: Museo500, Arial, sans-serif;
        font-size: 11px;
        line-height: 1.2;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table td.info-block.padding-td {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table img {
        max-width: 46px;
        flex: 0 0 auto;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table .info-wrapper {
        display: block;
        min-width: 0;
        margin-left: 0;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table .info-wrapper .class {
        line-height: 1.25;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table .info-wrapper.premium {
        display: inline-block;
        width: auto;
        height: auto;
        padding: 5px 11px;
        line-height: 1.2;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table span.selected {
        text-align: left;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table select,
    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table .nice-select {
        width: 100%;
        max-width: none;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table .android-app-subscribe {
        margin-top: 14px;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table .android-app-subscribe .small-btn {
        width: 100%;
        min-height: 38px;
    }

    .user-profile__subscribe #idFormticket.current-ticket-form .current-ticket-table .recurring-managed-subscribe {
        display: none !important;
    }

    .user-profile__subscribe .current-ticket-actions {
        margin-top: 18px;
    }

    .user-profile__subscribe .current-ticket-actions .btn-orange {
        width: 100%;
        max-width: 260px;
    }
}

.subscription-billing,
.subscription-billing * {
    box-sizing: border-box;
}

.subscription-billing__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.subscription-billing__eyebrow {
    margin-bottom: 6px;
    color: #54b574;
    font-family: Museo700, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
}

.subscription-billing__title {
    margin: 0;
    padding: 0 !important;
    max-width: none !important;
    color: #44507b;
    font-family: Museo700, Arial, sans-serif;
    font-size: 22px !important;
    line-height: 1.25;
    text-align: left !important;
}

.subscription-billing__list {
    display: grid;
    gap: 14px;
}

.subscription-billing__item {
    overflow-wrap: anywhere;
    border: 1px solid #edf1f4;
    border-radius: 8px;
    background: #fff;
}

.subscription-billing__main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 18px 4px;
}

.subscription-billing__plan {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.subscription-billing__period {
    color: #44507b;
    font-family: Museo700, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.3;
}

.subscription-billing__status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 14px;
    background: #eef8f4;
    color: #54b574;
    font-family: Museo700, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.2;
}

.subscription-billing__status--pending,
.subscription-billing__status--past_due,
.subscription-billing__status--failed {
    background: #fff7ea;
    color: #f8a52f;
}

.subscription-billing__status--cancelled,
.subscription-billing__status--expired {
    background: #f6f8fa;
    color: #86939e;
}

.subscription-billing__target {
    min-width: 180px;
    color: #86939e;
    font-family: Museo500, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    text-align: right;
}

.subscription-billing__details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 16px 18px 18px;
}

.subscription-billing__details div {
    min-width: 0;
}

.subscription-billing__details dt {
    margin-bottom: 5px;
    color: #a5b0ba;
    font-family: Museo500, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.2;
}

.subscription-billing__details dd {
    margin: 0;
    color: #5e6977;
    font-family: Museo500, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
}

.subscription-billing__notice {
    margin: 0 18px 18px;
    padding: 12px 14px;
    border: 1px solid #edf1f4;
    border-radius: 8px;
    background: #f8fafb;
    color: #6c7c8c;
    font-family: Museo500, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
}

.subscription-billing__notice--off {
    border-color: #d9ece3;
    background: #f1fbf6;
    color: #4f9d68;
}

.subscription-billing__danger {
    margin-top: 2px;
    padding: 14px 18px;
    border-top: 1px solid #f4ddd6;
    border-radius: 0 0 8px 8px;
    background: #fff8f6;
}

.subscription-billing__confirm-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.subscription-billing__danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.subscription-billing__danger-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: #8c5b4c;
    font-family: Museo500, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.35;
}

.subscription-billing__danger-copy strong {
    color: #f9650c;
    font-family: Museo700, Arial, sans-serif;
    font-size: 14px;
}

.subscription-billing__cancel-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    margin: 0;
}

.subscription-billing__cancel-open,
.subscription-billing__cancel-button,
.subscription-billing__cancel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 158px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid #f9650c;
    border-radius: 8px;
    background: #fff;
    color: #f9650c;
    cursor: pointer;
    font-family: Museo700, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background .3s, color .3s, border-color .3s;
}

.subscription-billing__cancel-open {
    flex: 0 0 auto;
}

.subscription-billing__cancel-button {
    background: #f9650c;
    color: #fff;
}

.subscription-billing__cancel-close {
    border-color: #edf1f4;
    background: #fff;
    color: #6c7c8c;
}

.subscription-billing__cancel-open:focus,
.subscription-billing__cancel-open:hover,
.subscription-billing__cancel-button:focus,
.subscription-billing__cancel-button:hover {
    border-color: #e1580d;
    background: #f9650c;
    color: #fff;
}

.subscription-billing__cancel-close:focus,
.subscription-billing__cancel-close:hover {
    border-color: #d7dde3;
    background: #f8fafb;
    color: #44507b;
}

.subscription-billing__confirm {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f4ddd6;
}

.subscription-billing__confirm-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: #8c5b4c;
    font-family: Museo500, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.35;
}

.subscription-billing__confirm-copy strong {
    color: #44507b;
    font-family: Museo700, Arial, sans-serif;
    font-size: 14px;
}

.subscription-billing__confirm-toggle:checked ~ .subscription-billing__danger-row .subscription-billing__cancel-open {
    display: none;
}

.subscription-billing__confirm-toggle:checked ~ .subscription-billing__confirm {
    display: flex;
}

.buyticket-full-access-page .subscribe-category .subscribe-items--item .radio-switch .wrapper {
    overflow: hidden;
}

.buyticket-full-access-page .subscribe-category .subscribe-items--item .radio-switch label {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

.buyticket-payment-page.recurring-checkout-page .recurring-checkout-note {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
}

.buyticket-payment-page.recurring-checkout-page .payments__w {
    margin-top: 22px;
}

.buyticket-payment-page.recurring-checkout-page .hint-text {
    min-height: 0;
}

@media only screen and (max-width: 767px) {
    .subscription-billing {
        margin-top: 30px;
        padding-top: 22px;
    }

    .subscription-billing__header,
    .subscription-billing__main,
    .subscription-billing__danger-row,
    .subscription-billing__cancel-form {
        display: block;
    }

    .subscription-billing__title {
        font-size: 20px !important;
    }

    .subscription-billing__target {
        min-width: 0;
        margin-top: 8px;
        text-align: left;
    }

    .subscription-billing__details {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 14px;
    }

    .subscription-billing__details div {
        display: grid;
        grid-template-columns: minmax(104px, 40%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }

    .subscription-billing__details dt {
        margin-bottom: 0;
    }

    .subscription-billing__danger-copy,
    .subscription-billing__confirm-copy {
        margin-bottom: 12px;
    }

    .subscription-billing__cancel-open,
    .subscription-billing__cancel-close,
    .subscription-billing__cancel-form,
    .subscription-billing__cancel-button {
        width: 100%;
    }

    .subscription-billing__cancel-close {
        margin-top: 10px;
    }

    .subscription-billing__confirm-toggle:checked ~ .subscription-billing__confirm {
        display: block;
    }

    .subscription-billing__cancel-button {
        min-width: 0;
    }

    .buyticket-full-access-page .container-fluid-1200 {
        padding-left: 12px;
        padding-right: 12px;
    }

    .buyticket-full-access-page .subscribe-wrapper {
        padding-bottom: 32px;
    }

    .buyticket-full-access-page .subscribe-wrapper .h1 {
        padding-top: 58px;
        margin-bottom: 18px;
        font-size: 24px;
        line-height: 1.2;
        text-align: center;
    }

    .buyticket-full-access-page .subscribe-wrapper .form-wrapper,
    .buyticket-full-access-page .subscribe-category {
        width: 100%;
        min-width: 0;
        padding: 0;
    }

    .buyticket-full-access-page #idFormticket {
        padding-right: 0;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items-block {
        width: 100%;
        overflow: hidden;
        border-radius: 8px;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items-block table,
    .buyticket-full-access-page .subscribe-category .subscribe-items-block tbody,
    .buyticket-full-access-page .subscribe-category .subscribe-items-block tbody tr,
    .buyticket-full-access-page .subscribe-category .subscribe-items-block td {
        display: block;
        width: 100%;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items-block thead,
    .buyticket-full-access-page .subscribe-category .subscribe-items--header {
        display: none !important;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) 48px;
        grid-template-areas:
            "icon info action"
            "period period period"
            "number price price";
        gap: 12px 10px;
        align-items: center;
        padding: 16px;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .category-icon {
        display: block !important;
        grid-area: icon;
        width: auto;
        height: auto;
        padding: 0;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .category-icon img {
        display: block;
        max-width: 48px;
        margin: 0;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .category-info {
        grid-area: info;
        width: auto;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .category-info .title {
        margin-bottom: 2px;
        line-height: 1.25;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .radio-switch {
        grid-area: period;
        display: block;
        width: 100%;
        margin: 2px 0 0;
        padding: 0;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .radio-switch .wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
        width: 100%;
        margin: 0;
        overflow: hidden;
        border-radius: 18px;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .radio-switch label {
        width: auto;
        min-width: 0;
        padding: 0 6px;
        line-height: 36px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
        border-radius: 18px;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .perioddate.total {
        margin-top: 6px;
        min-height: 14px;
        line-height: 1.2;
        text-align: center;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .category-number {
        grid-area: number;
        width: auto;
        padding: 0;
        justify-self: start;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .category-number .input-number {
        width: 118px;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .category-price {
        grid-area: price;
        width: auto;
        font-size: 16px;
        line-height: 1.15;
        text-align: right;
        justify-self: end;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .category-price .total {
        margin-top: 4px;
        min-height: 0;
        line-height: 1.2;
        text-align: right;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .category-add {
        grid-area: action;
        width: auto;
        padding: 0;
        text-align: right;
        justify-self: end;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .category-add__btn {
        width: 44px;
        height: 44px;
    }

    .buyticket-full-access-page .subscribe-aside {
        float: none;
        width: 100%;
        margin: 20px 0 0;
        background: transparent;
        border-radius: 0;
    }

    .buyticket-full-access-page .subscribe-aside .fixed {
        position: static;
        left: auto;
        width: 100%;
        max-height: none;
        margin: 0;
        overflow: visible;
        transform: none;
        border-radius: 8px;
    }

    .buyticket-full-access-page .subscribe-aside .fixed-inner {
        width: 100%;
        max-height: none;
        padding-right: 0;
        overflow: visible;
    }

    .buyticket-full-access-page .subscribe-aside .fixed .top-image {
        display: none;
    }

    .buyticket-full-access-page .subscribe-aside .fixed .fixed-inner .subscribe-mobile-header {
        display: flex;
        height: 52px;
        line-height: 52px;
        padding: 0 16px;
        border-radius: 8px 8px 0 0;
    }

    .buyticket-full-access-page .subscribe-aside .fixed .fixed-inner .subscribe__btn {
        display: block !important;
        padding: 12px 16px 16px;
        background: #321347;
    }

    .buyticket-full-access-page .subscribe-aside .fixed .fixed-inner .subscribe__btn .btn-orange {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 360px) {
    .buyticket-full-access-page .subscribe-category .subscribe-items--item {
        grid-template-columns: 46px minmax(0, 1fr) 44px;
        padding: 14px 12px;
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .radio-switch .wrapper {
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    }

    .buyticket-full-access-page .subscribe-category .subscribe-items--item .radio-switch label {
        font-size: 12px;
    }
}

.category-levels.content-top-block {
	position: relative;
	z-index: 1;
}

!* Hover preview: never exceed viewport width.
    Horizontal positioning is clamped via templates/default/js/preview-clamp.js
*!
.img-preview {
	max-width: calc(100vw - 16px);
}

!* =============================================
   TABLET FIX: Grade cards grid (Малюки, Дошкільнята, etc.)
   The base CSS uses space-between which creates a visible gap.
   ============================================= *!

!* Make the grades wrapper use gap instead of space-between *!
.category-grades .grades__w {
    justify-content: center;
    gap: 20px;
}

!* Ensure grade cards (levels) fill available space nicely on tablet *!
.category-grades .grades-group .level {
    width: 100%;
}

!* Category pages: keep 2-column layout from 600px and up.
   Some base breakpoints around ~1024–1366 can revert to 1 column.
*!
@media only screen and (min-width: 600px) {
    .category-grades .grades__w {
        !* Use grid to make a stable 2-column layout across tablet/desktop,
           regardless of base flex/width overrides in styles/custom CSS. *!
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: start;
    }

    .category-grades .grades-group {
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    .category-grades .grades-group.whole-row,
    .category-grades .grades-group.grades-group-books {
        grid-column: 1 / -1;
    }

    !* If there's only one block on the page, make it span full width
       (otherwise the second column looks like an empty gap). *!
    .category-grades .grades__w > .grades-group:not(.whole-row):not(.grades-group-books):only-child {
        grid-column: 1 / -1;
    }

    !* TaskCategLevel_1: when the grade-group spans full width (whole-row),
       the template JS splits tasks into .tasks__w.j-first and .tasks__w.j-second.
       Make those wrappers render as 2 columns at 600px+.
    *!
    .category-grades:not(.zno-page) .grades-group.whole-row .level-tasks:not(.level-tasks-books) {
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }

    .category-grades:not(.zno-page) .grades-group.whole-row .level-tasks:not(.level-tasks-books) .tasks__w {
        flex: 1 1 0;
        min-width: 0;
    }

    .category-grades:not(.zno-page) .grades-group.whole-row .level-tasks:not(.level-tasks-books) .tasks__w.j-second {
        display: block !important;
    }
}

!* ZNO category pages (TaskCategLevel_2, categ:type=5):
   The page already uses 2 columns of topics. Splitting each topic's task list
   into 2 columns creates a large empty half when a topic has only a few tasks.
   Keep each topic's task list single-column.
*!
@media only screen and (min-width: 600px) {
    .category-grades.zno-page .grades-group.whole-row .level-tasks:not(.level-tasks-books) {
        display: block !important;
    }

    .category-grades.zno-page .grades-group.whole-row .level-tasks:not(.level-tasks-books) .tasks__w.j-second {
        display: none !important;
    }

    .category-grades.zno-page .grades-group.whole-row .level-tasks:not(.level-tasks-books) .tasks__w.j-first {
        width: 100% !important;
        max-width: none !important;
    }
}

!* Category pages (Option B): keep ONLY 2 columns total on the page from 600px+.
   The page already shows two sections side-by-side, so each section should stay
   single-column internally (otherwise it looks like 4 columns).
   We do this by hiding the secondary task column and letting the main one fill.
   Scope narrowly and do not touch books lists or full-row blocks.
*!
@media only screen and (min-width: 600px) {
    .category-grades .grades-group:not(.whole-row) .level-tasks:not(.level-tasks-books) .tasks__w.j-second {
        display: none !important;
    }

    .category-grades .grades-group:not(.whole-row) .level-tasks:not(.level-tasks-books) .tasks__w.j-first {
        width: 100% !important;
        max-width: none !important;
    }
}

!* =============================================
   CATEGORY REWARDS PAGE (TaskCategRewards)
   - Do NOT use the 2-column grade cards grid.
   - Render rewards as a 5-column responsive grid.
   ============================================= *!

!* The generic category layout turns `.grades__w` into a 2-column grid at 600px+.
   On the rewards page this creates an empty right column and the rewards block
   becomes narrow. Force a single-column flow here.
*!
.category-grades.category-rewards .grades__w {
    display: block !important;
}

.category-grades.category-rewards .grades-group.j-second {
    display: none !important;
}

!* Rewards grid: 5 columns on desktop, responsive down. *!
.category-grades.category-rewards #reward_frame .rewards-list__w {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    justify-items: center;
}

.category-grades.category-rewards #reward_frame .reward-item {
    float: none;
    margin: 0 !important;
}

@media only screen and (max-width: 1199px) {
    .category-grades.category-rewards #reward_frame .rewards-list__w {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 991px) {
    .category-grades.category-rewards #reward_frame .rewards-list__w {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .category-grades.category-rewards #reward_frame .rewards-list__w {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

!* =============================================
   OLYMPIAD LISTING (safe selector)
   `/olimpiada/` uses a dedicated `#j-grades-group` wrapper in production.
   We scope via `:has()` to avoid affecting other category pages.
   ============================================= *!

!* Safe olympiad root fallback (as seen on /olimpiada/ in production HTML).
   `#j-grades-group` is reused elsewhere, so scope via modern `:has()`:
   apply ONLY when the Olimpíada top-menu item is active.
*!
body:has(.nav-main li.active a[href*="/olimpiada/"]) .category-grades .grades-group#j-grades-group {
        width: 100% !important;
        max-width: none !important;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
    }

body:has(.nav-main li.active a[href*="/olimpiada/"]) .category-grades .grades-group#j-grades-group .level {
        width: auto !important;
        margin: 0;
    }

    !* Olimpíada root: each level often has 1 task.
       The template/JS keeps an empty `.tasks__w.j-second`, and our generic
       responsive rules can render `.level-tasks` as 2 columns, leaving a
       big empty rectangle. Force a single tasks column here.
    *!
body:has(.nav-main li.active a[href*="/olimpiada/"]) .category-grades .grades-group#j-grades-group .level-tasks {
        display: block !important;
    }

body:has(.nav-main li.active a[href*="/olimpiada/"]) .category-grades .grades-group#j-grades-group .level-tasks .tasks__w.j-second {
        display: none !important;
    }

body:has(.nav-main li.active a[href*="/olimpiada/"]) .category-grades .grades-group#j-grades-group .level-tasks .tasks__w.j-first {
        width: 100% !important;
        max-width: none !important;
    }

    @media only screen and (max-width: 767px) {
        body:has(.nav-main li.active a[href*="/olimpiada/"]) .category-grades .grades-group#j-grades-group {
            grid-template-columns: 1fr;
            gap: 16px;
        }
    }

!* Smaller tablets / large phones: single column *!
@media only screen and (max-width: 599px) {
    .category-grades .grades-group,
    .category-grades .grades-group:not(.whole-row) {
        width: 100%;
        flex: 0 0 100%;
    }
}




!* Rating (mobile): make league strip swipeable and show “peek” next card *!
@media only screen and (max-width: 1024px) {
    !* Base CSS sets `.rating-carousel { display:flex }`, which breaks Slick layout.
       Only override when Slick is initialized. *!
    #j-rating.slick-initialized {
        display: block;
    }

    !* Create consistent gutters between slides and keep edges aligned *!
    #j-rating.slick-initialized .slick-list {
        margin: 0 -10px;
        touch-action: pan-y;
    }

    #j-rating.slick-initialized .slick-slide {
        padding: 0 10px;
        box-sizing: border-box;
    }
}
*/