/* =====================================
LISTING TOOLBAR
SORT + PAGINATION
===================================== */

.sortPart,
.ds-toolbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 18px;

    margin:
            0
            0
            28px;

    padding:
            12px
            18px;

    min-height: 64px;

    border:
            1px solid var(--border);

    border-radius: 18px;

    background:
            rgba(255,255,255,.92);

    backdrop-filter:
            blur(10px);

    box-shadow:
            0 4px 18px rgba(15,23,42,.04);

    font-size: 14px;

    line-height: 1.5;
}

/* =====================================
SORT BUTTONS
===================================== */

.sortPart > a,
.sortPart .sort-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding:
            0
            14px;

    margin-left: 8px;

    border:
            1px solid rgba(15,23,42,.08);

    border-radius:
            999px;

    background:
            transparent;

    color:
            var(--text);

    font-size: 14px;

    font-weight: 600;

    text-decoration:
            none;

    transition:
            .18s ease;
}

/* hover */

.sortPart > a:hover {
    background:
            rgba(220,42,31,.06);

    color:
            var(--reda);

    border-color:
            rgba(220,42,31,.18);

    text-decoration:
            none;
}

/* active */

.sortPart > a.active,
.sortPart > a.asc,
.sortPart > a.desc {
    background:
            rgba(220,42,31,.08);

    color:
            var(--reda);

    border:
            1px solid rgba(220,42,31,.18);

    border-radius:
            999px;

    text-decoration:
            none;

    box-shadow:
            none;
}

/* =====================================
PAGINATION
===================================== */

.sortPart .fr {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-left: auto;

    padding-left: 18px;

    border-left:
            1px solid rgba(15,23,42,.08);
}

/* pagination links */

.sortPart .fr a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 38px;

    padding:
            0
            10px;

    border:
            1px solid var(--border);

    border-radius: 12px;

    background:
            #fff;

    color:
            var(--text);

    font-size: 14px;

    font-weight: 600;

    transition:
            .18s ease;
}

/* hover */

.sortPart .fr a:hover {
    background:
            rgba(220,42,31,.06);

    border-color:
            rgba(220,42,31,.18);

    color:
            var(--reda);

    transform:
            translateY(-1px);
}

/* active page */

.sortPart .fr a.active,
.sortPart .fr a.act,
.sortPart .fr a.selected {
    background:
            rgba(220,42,31,.08);

    color:
            var(--reda);

    border-color:
            rgba(220,42,31,.18);
}

/* hidden empty pagination */

.sortPart .fr a:empty {
    display: none;
}

/* =====================================
CATALOG TOOLBAR CLEARFIX
===================================== */

.fnpanel::after {
    content: "";

    display: block;

    clear: both;
}

/* toolbar spacing */

.fnpanel {
    margin-bottom: 72px;
}

/* =====================================
ACTIVE CATEGORY
===================================== */

#shopTree a.active,
#shopTree a.mkt.active {
    background:
            rgba(220,42,31,.08);

    color:
            var(--reda);

    border-color:
            rgba(220,42,31,.18);

    box-shadow:
            none;
}

/* text */

#shopTree a.active em,
#shopTree a.mkt.active em {
    color:
            var(--reda);

    font-style:
            normal;
}

/* hover */

#shopTree a.active:hover,
#shopTree a.mkt.active:hover {
    background:
            rgba(220,42,31,.12);

    color:
            var(--reda);
}

/* =====================================
GLOBAL FOCUS FIX
===================================== */

a,
button,
input,
textarea,
select {
    outline: none;
}

/* modern focus */

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;

    box-shadow:
            0 0 0 3px rgba(220,42,31,.16);
}

/* =====================================
PRODUCT IMAGE FOCUS FIX
===================================== */

.detail-odkaz:focus,
.detail-odkaz:active,
.detail-odkaz img:focus {
    outline: none;

    box-shadow: none;
}

/* =====================================
LOGO FOCUS FIX
===================================== */

#logo,
#logo:focus,
#logo:active,
#logo:focus-visible,
.ds-logo,
.ds-logo:focus,
.ds-logo:active,
.ds-logo:focus-visible {
    outline: none !important;

    box-shadow: none !important;

    border: none !important;
}

/* =====================================
HEADER / BANNER SPACING
===================================== */

.ds-menu-row,
#intro-banner,
.hero-banner,
.top-banner,
.banner {
    margin-bottom: 8px;
}

/* =====================================
CART FOCUS FIX
===================================== */

#kosik a,
#kosik a:focus,
#kosik a:active,
#kosik a:focus-visible,
.ds-cart-container a,
.ds-cart-container a:focus,
.ds-cart-container a:active,
.ds-cart-container a:focus-visible {
    outline: none !important;

}

/* =====================================
PRODUCT TITLE FOCUS FIX
===================================== */

.product-card h3 a:focus,
.product-card h3 a:active,
.product-card h3 a:focus-visible {
    outline: none !important;
}

/* =====================================
BACK TO TOP
===================================== */

.back-to-top {
    position: fixed;

    right: 18px;
    bottom: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border:
            1px solid rgba(220,42,31,.18);

    border-radius: 14px;

    background:
            rgba(255,255,255,.92);

    backdrop-filter:
            blur(10px);

    color:
            var(--reda);

    font-size: 18px;
    font-weight: 700;

    text-decoration:
            none;

    box-shadow:
            0 8px 24px rgba(15,23,42,.10);

    transition:
            .18s ease;

    z-index: 999;
}

/* hover */

.back-to-top:hover {
    transform:
            translateY(-2px);

    background:
            rgba(220,42,31,.08);

    color:
            var(--reda);
}

/* =====================================
FOOTER GRID
===================================== */

.ds-footer-grid {
    display: grid;

    grid-template-columns:
        1fr
        320px;

    gap: 48px;

    align-items: end;
}

/* info block */

.ds-footer-info {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: flex-end;
}

/* title */

.ds-footer-info h4 {
    margin-bottom: 18px;
}

/* links */

.ds-footer-links {
    display: flex;

    flex-direction: column;

    gap: 14px;
}

/* links reset */

.ds-footer-links a {
    display: inline-flex;

    color:
            rgba(255,255,255,.82);

    text-decoration:
            none;

    transition:
            .18s ease;
}

/* hover */

.ds-footer-links a:hover {
    color:
            #fff;
}

/* =====================================
FOOTER BOTTOM
===================================== */

.ds-footer-bottom {
    text-align: center;
}

.ds-footer-bottom p {
    margin: 0;

    text-align: center;
}

/* =====================================
FOOTER MENU RESET
===================================== */

.ds-footer-links ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

/* položky */

.ds-footer-links li {
    margin: 0 0 12px;
    padding: 0;
}

/* nested UL */

.ds-footer-links ul ul {
    margin-top: 10px;

    padding-left: 0;
}

/* odkazy */

.ds-footer-links a {
    display: inline-flex;

    color:
            rgba(255,255,255,.82);

    text-decoration:
            none;

    transition:
            .18s ease;
}

/* hover */

.ds-footer-links a:hover {
    color:
            #fff;
}


/* =====================================
RESPONSIVE
MOBILE
===================================== */

@media (max-width: 768px) {

    /* =====================================
    HEADER
    ====================================== */

    .ds-header-main-inner {
        flex-direction: column;

        gap: 14px;
    }

    .ds-search-wrap,
    .ds-cart-wrap {
        width: 100%;
    }

    .ds-search-form {
        width: 100%;
    }

    /* =====================================
    CATEGORY BAR
    ====================================== */

    #tree-kategorie {
        overflow-x: auto;

        padding-bottom: 4px;
    }

    #shopTree ul.mkt {
        display: flex;

        flex-wrap: nowrap;

        justify-content: flex-start;

        gap: 8px;

        min-width: max-content;
    }

    #shopTree a.mkt {
        min-height: 36px;

        padding:
                0
                14px;

        font-size: 12px;

        white-space: nowrap;
    }

    /* =====================================
TOOLBAR
===================================== */

    .sortPart,
    .ds-toolbar {
        display: flex;

        flex-direction: row;

        align-items: center;

        gap: 6px;

        overflow-x: auto;

        white-space: nowrap;

        padding: 12px 14px;
    }

    /* sort title */

    .sortPart {
        font-size: 10px;
        padding: 10px 12px;
    }

    /* sort links */

    .sortPart > a {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        flex: 0 0 auto;

        min-height: 36px;

        padding:
                0
                12px;

        margin-left: 0;

        font-size: 12px;

        white-space: nowrap;
    }

    /* pagination */

    .sortPart .fr {
        display: none;
    }

    /* =====================================
    PRODUCT GRID
    ====================================== */

    #cont .produkt {
        width: 100%;

        padding: 0;

        margin-bottom: 16px;
    }

    /* =====================================
    BACK TO TOP
    ====================================== */

    .back-to-top {
        right: 14px;
        bottom: 14px;

        width: 42px;
        height: 42px;
    }
}