/* ==========================================================
   JOSPORT REDESIGN 2026
   CATEGORY V3
   ========================================================== */

/* 1. Původní H1 zůstává v HTML, ale je vizuálně skrytý */
.type-category .category-title,
.type-category h1.category-title,
.type-category .content-wrapper h1:first-of-type{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    margin:-1px!important;
    padding:0!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    border:0!important;
}

/* 2. Marketingový nadpis nad podkategoriemi */
.type-category .jo-category-intro-v2{
    width:100%;
    max-width:1180px;
    margin:22px auto 28px;
    padding:0 20px;
    box-sizing:border-box;
    text-align:center;
}

.type-category .jo-category-intro-v2__title{
    margin:0 0 10px!important;
    color:#0d1f3c!important;
    font-size:34px!important;
    line-height:1.15!important;
    font-weight:800!important;
    letter-spacing:-.02em;
}

.type-category .jo-category-intro-v2__subtitle{
    max-width:860px;
    margin:0 auto!important;
    color:#5f6f82!important;
    font-size:17px!important;
    line-height:1.55!important;
}

.type-category .jo-category-intro-v2__subtitle strong{
    color:#17385f!important;
    font-weight:800!important;
}

/* 3. Menší horní mezery kolem původního obalu kategorie */
.type-category .category-top,
.type-category .category-header{
    margin-top:0!important;
    padding-top:0!important;
}

@media (max-width:767px){
    .type-category .jo-category-intro-v2{
        margin:16px auto 20px;
        padding:0 16px;
    }

    .type-category .jo-category-intro-v2__title{
        font-size:25px!important;
        line-height:1.18!important;
    }

    .type-category .jo-category-intro-v2__subtitle{
        font-size:15px!important;
        line-height:1.5!important;
    }
}


/* ==========================================================
   4. MODERNÍ DLAŽDICE PODKATEGORIÍ
   ========================================================== */

.type-category ul.subcategories.with-image,
.type-category .subcategories.with-image{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
    width:100%!important;
    margin:0 0 34px!important;
    padding:0!important;
    list-style:none!important;
}

.type-category ul.subcategories.with-image > li,
.type-category .subcategories.with-image > li{
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}

.type-category ul.subcategories.with-image > li > a,
.type-category .subcategories.with-image > li > a{
    position:relative!important;
    display:grid!important;
    grid-template-columns:56px minmax(0,1fr) 28px!important;
    align-items:center!important;
    gap:14px!important;
    min-height:104px!important;
    padding:16px 18px!important;
    border:1px solid #dfe7ef!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,#fff 0%,#f9fbfd 100%)!important;
    color:#10233f!important;
    text-decoration:none!important;
    box-shadow:0 8px 24px rgba(17,52,89,.07)!important;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease!important;
    overflow:hidden!important;
}

.type-category ul.subcategories.with-image > li > a:hover,
.type-category .subcategories.with-image > li > a:hover{
    transform:translateY(-2px)!important;
    border-color:#b8d5e9!important;
    box-shadow:0 14px 30px rgba(17,52,89,.12)!important;
}

.type-category ul.subcategories.with-image img,
.type-category .subcategories.with-image img{
    grid-column:1!important;
    width:52px!important;
    height:52px!important;
    padding:9px!important;
    border-radius:50%!important;
    background:#f0f7fd!important;
    object-fit:contain!important;
    box-sizing:border-box!important;
}

.type-category ul.subcategories.with-image .text,
.type-category ul.subcategories.with-image .category-name,
.type-category ul.subcategories.with-image .subcategory-name,
.type-category .subcategories.with-image .text,
.type-category .subcategories.with-image .category-name,
.type-category .subcategories.with-image .subcategory-name{
    grid-column:2!important;
    display:block!important;
    min-width:0!important;
    margin:0!important;
    color:#10233f!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.25!important;
    white-space:normal!important;
}

.type-category ul.subcategories.with-image > li > a::after,
.type-category .subcategories.with-image > li > a::after{
    content:"›"!important;
    grid-column:3!important;
    display:grid!important;
    place-items:center!important;
    width:28px!important;
    height:28px!important;
    border-radius:50%!important;
    background:#eef6fc!important;
    color:#0672bd!important;
    font-size:24px!important;
    font-weight:500!important;
    line-height:1!important;
}

/* ==========================================================
   5. SEKCE NEJPRODÁVANĚJŠÍ
   ========================================================== */

.type-category .products-top-wrapper{
    margin:0 0 36px!important;
    padding:0!important;
}

.type-category .products-top-header,
.type-category #productsTopHeading{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    margin:0 0 18px!important;
    padding:0!important;
    color:#10233f!important;
    font-size:28px!important;
    font-weight:800!important;
    line-height:1.15!important;
}

.type-category .products-top-header::before,
.type-category #productsTopHeading::before{
    content:"★"!important;
    display:grid!important;
    place-items:center!important;
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    border-radius:50%!important;
    background:#eef6fc!important;
    color:#087bc7!important;
    font-size:16px!important;
}

.type-category #productsTop.products,
.type-category .products-top-wrapper .products{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:18px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
}

.type-category #productsTop .product,
.type-category #productsTop .product-wrapper,
.type-category .products-top-wrapper .product,
.type-category .products-top-wrapper .product-wrapper{
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}

.type-category #productsTop .p,
.type-category .products-top-wrapper .p{
    position:relative!important;
    display:grid!important;
    grid-template-columns:42% minmax(0,1fr)!important;
    grid-template-rows:auto 1fr auto!important;
    gap:10px 16px!important;
    min-height:260px!important;
    padding:18px!important;
    border:1px solid #dfe7ef!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 10px 28px rgba(17,52,89,.08)!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
}

.type-category #productsTop .image,
.type-category #productsTop .p-image,
.type-category .products-top-wrapper .image,
.type-category .products-top-wrapper .p-image{
    grid-column:1!important;
    grid-row:1 / 4!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    min-height:210px!important;
    margin:0!important;
    padding:0!important;
}

.type-category #productsTop img,
.type-category .products-top-wrapper img{
    width:100%!important;
    height:210px!important;
    object-fit:contain!important;
}

.type-category #productsTop .name,
.type-category #productsTop .p-name,
.type-category .products-top-wrapper .name,
.type-category .products-top-wrapper .p-name{
    grid-column:2!important;
    margin:0!important;
    color:#0d1f3c!important;
    font-size:16px!important;
    font-weight:800!important;
    line-height:1.3!important;
    text-transform:uppercase!important;
}

.type-category #productsTop .availability,
.type-category .products-top-wrapper .availability{
    grid-column:2!important;
    margin:0!important;
    color:#1a8c3d!important;
    font-size:14px!important;
    font-weight:700!important;
}

.type-category #productsTop .price,
.type-category .products-top-wrapper .price{
    grid-column:2!important;
    align-self:end!important;
    margin:0!important;
    color:#0b1f3d!important;
    font-size:22px!important;
    font-weight:900!important;
}

.type-category #productsTop .jo-top-badge-v3,
.type-category .products-top-wrapper .jo-top-badge-v3{
    position:absolute!important;
    top:14px!important;
    left:14px!important;
    z-index:3!important;
    display:inline-flex!important;
    align-items:center!important;
    min-height:28px!important;
    padding:0 12px!important;
    border-radius:8px!important;
    background:linear-gradient(135deg,#0d86d6,#075b9f)!important;
    color:#fff!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.02em!important;
    box-shadow:0 6px 14px rgba(7,91,159,.22)!important;
}

.type-category .products-top-wrapper .button-wrapper{
    margin:18px 0 0!important;
    text-align:center!important;
}

.type-category .products-top-wrapper .button-wrapper a,
.type-category .products-top-wrapper .button-wrapper button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:44px!important;
    padding:0 20px!important;
    border:1px solid #cfe0ed!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#075b9f!important;
    font-size:14px!important;
    font-weight:800!important;
    text-decoration:none!important;
    box-shadow:0 6px 16px rgba(17,52,89,.06)!important;
}

@media (max-width:1199px){
    .type-category ul.subcategories.with-image,
    .type-category .subcategories.with-image{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    .type-category #productsTop.products,
    .type-category .products-top-wrapper .products{
        grid-template-columns:1fr!important;
    }
}

@media (max-width:767px){
    .type-category ul.subcategories.with-image,
    .type-category .subcategories.with-image{
        grid-template-columns:1fr!important;
        gap:10px!important;
        margin-bottom:24px!important;
    }

    .type-category ul.subcategories.with-image > li > a,
    .type-category .subcategories.with-image > li > a{
        min-height:82px!important;
        grid-template-columns:46px minmax(0,1fr) 26px!important;
        padding:12px 14px!important;
        border-radius:14px!important;
    }

    .type-category ul.subcategories.with-image img,
    .type-category .subcategories.with-image img{
        width:44px!important;
        height:44px!important;
        padding:8px!important;
    }

    .type-category .products-top-header,
    .type-category #productsTopHeading{
        font-size:23px!important;
        margin-bottom:14px!important;
    }

    .type-category #productsTop .p,
    .type-category .products-top-wrapper .p{
        grid-template-columns:38% minmax(0,1fr)!important;
        min-height:210px!important;
        padding:14px!important;
        border-radius:16px!important;
    }

    .type-category #productsTop .image,
    .type-category #productsTop .p-image,
    .type-category .products-top-wrapper .image,
    .type-category .products-top-wrapper .p-image{
        min-height:170px!important;
    }

    .type-category #productsTop img,
    .type-category .products-top-wrapper img{
        height:170px!important;
    }

    .type-category #productsTop .name,
    .type-category #productsTop .p-name,
    .type-category .products-top-wrapper .name,
    .type-category .products-top-wrapper .p-name{
        font-size:14px!important;
    }

    .type-category #productsTop .price,
    .type-category .products-top-wrapper .price{
        font-size:19px!important;
    }
}