/*
 * Runtime-safe category-tabs refinements.
 * Loaded after the generated breakpoint bundles so the CMS component does not
 * depend on a separate frontend asset build before Magento static deployment.
 */
.xbau-category-tabs__tablist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
    overflow: visible;
    padding: 0 0 10px;
}

.xbau-category-tabs__tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
}

.xbau-category-tabs__tab {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.xbau-category-tabs__tab:hover,
.xbau-category-tabs__tab[aria-selected='true'] {
    background: #fff !important;
    border-color: #1E99A4 !important;
    color: #1E99A4 !important;
}

.xbau-category-tabs__panels {
    box-shadow: none !important;
}

.xbau-category-tabs__panel-title {
    font-size: 18px !important;
    line-height: 32px !important;
}

.xbau-category-tabs__view-all {
    font-size: 12px !important;
    gap: 13px !important;
    line-height: 24px !important;
}

.xbau-category-tabs__picture,
.xbau-category-tabs__image {
    display: block;
    height: 100%;
    width: 100%;
}

.xbau-category-tabs__image {
    object-fit: contain;
}

/* Homepage spacing is owned by the category component, not by collapsible
   PageBuilder margins. The final tab-to-panel distance is 10px tablist
   padding + 14px panel margin, so the first tab receives the same exact 24px
   distance from the preceding banner row. */
.cms-index-index .hero-banner.col-3-layout {
    margin-bottom: 0 !important;
}

.cms-index-index [data-content-type='row']:has(+ .xbau-home-category-tabs-row) {
    margin-bottom: 0 !important;
}

.cms-index-index .xbau-home-category-tabs-row,
.cms-index-index .xbau-home-category-tabs-row > [data-element='inner'],
.cms-index-index .xbau-home-category-tabs-row > [data-element='inner'] > [data-content-type='html'] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.cms-index-index .xbau-home-category-tabs-row .xbau-category-tabs {
    margin-top: 0;
    padding-top: 24px;
}

/* On the root Categories page the component lives in columns.top, before the
   floated two-column catalog region. The dedicated shell prevents the filter
   rail from squeezing the component into the product column. */
.catalog-category-view .xbau-category-tabs-shell {
    box-sizing: border-box;
    clear: both;
    margin: 0 0 48px;
    max-width: 100%;
    width: 100%;
}

.catalog-category-view .xbau-category-tabs-shell > .xbau-category-tabs {
    margin: 0;
    max-width: 100%;
    width: 100%;
}

@media (min-width: 768px) and (max-width: 1024px) {
    #html-body .xbau-home-category-tabs-row > [data-element='inner'] {
        box-sizing: border-box;
        padding-left: 24px;
        padding-right: 24px;
    }

    .xbau-category-tabs {
        margin: 40px 0;
    }

    /* Tablet keeps the same single, swipeable root-category rail as mobile.
       The two semantic row wrappers remain in the DOM, but form one
       uninterrupted visual row; grouped two-row presentation starts only on
       desktop above 1024px. */
    .xbau-category-tabs__tablist {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
        scrollbar-color: #9C9EA1 transparent;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    .xbau-category-tabs__tab-row {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        max-width: none;
    }

    .xbau-category-tabs__tab {
        max-width: none;
        min-width: max-content;
        overflow-wrap: normal;
        white-space: nowrap;
    }

    .xbau-category-tabs__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xbau-category-tabs__card {
        align-items: center;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .xbau-category-tabs__media {
        background: #fff;
        flex-basis: 96px;
        height: 96px;
        width: 100%;
    }

    .xbau-category-tabs__image {
        object-position: center;
    }

    .xbau-category-tabs__card-title {
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 767px) {
    #html-body .xbau-home-category-tabs-row > [data-element='inner'] {
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
    }

    .xbau-category-tabs__tablist {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
        scrollbar-color: #9C9EA1 transparent;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    .xbau-category-tabs__tab-row {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        max-width: none;
    }

    .xbau-category-tabs__tab {
        max-width: none;
        min-width: max-content;
        overflow-wrap: normal;
        white-space: nowrap;
    }

    .catalog-category-view .xbau-category-tabs-shell {
        margin-bottom: 32px;
    }

    .xbau-category-tabs__card {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        min-height: 154px;
        padding: 10px;
    }

    .xbau-category-tabs__media {
        aspect-ratio: 1 / 1;
        flex: 0 0 auto;
        height: auto;
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 359px) {
    .xbau-category-tabs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xbau-category-tabs__card {
        align-items: flex-start;
        flex-direction: column;
        min-height: 154px;
    }

    .xbau-category-tabs__media {
        aspect-ratio: 1 / 1;
        flex: 0 0 auto;
        height: auto;
        min-width: 0;
        width: 100%;
    }
}