/* section */
.service-catalog{
    padding:40px 0 40px;
    background-color: var(--bg);
    border-top: 1px solid var(--grey-1);
    border-bottom: 1px solid var(--grey-1);
}
@media(min-width:768px){.service-catalog{padding:52px 0 68px}}
@media(min-width:1024px){.service-catalog{padding:60px 0 72px}}

.sc-label{
    margin-top: 0;
    margin-bottom:8px;
}
.sc-title{
    margin-bottom:12px;
    margin-top: 0;
}
@media(min-width:768px){.sc-title{margin-bottom:32px}}
@media(min-width:1024px){.sc-title{margin-bottom:36px}}

/* ══ TABS STRIP ══ */
.tabs-outer{
    position:relative;
    margin-bottom:20px;
    z-index: 5;
}

/* tabs arrow buttons (mobile/tablet only) */
.tabs-arr{
    position:absolute;
    top:50%;transform:translateY(-50%);
    z-index:10;
    width:24px;height:24px;
    border-radius:50%;
    border:1.5px solid var(--bg);
    background:var(--white);
    box-shadow:0 2px 8px rgba(0,0,0,.10);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:opacity .25s,background .15s;
}
.tabs-arr:hover{background:#f4f4f2}
.tabs-arr svg{width:11px;height:11px}
.tabs-arr.t-prev{left:0}
.tabs-arr.t-next{right:0}
.tabs-arr.hidden{opacity:0;pointer-events:none}
/* hide on desktop */
@media(min-width:1024px){.tabs-arr{display:none}}

/* swiper strip */
.tabs-swiper{overflow:hidden}
.tabs-swiper .swiper-slide{width:auto!important}

.tabs-swiper .swiper-slide{
    width: fit-content;
}



/* ══ STATIC GRID (≤12 items) ══ */
.cards-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
@media(min-width:768px){.cards-grid{grid-template-columns:repeat(3,1fr);gap:10px}}
@media(min-width:1024px){.cards-grid{grid-template-columns:repeat(4,1fr);gap:12px}}

/* ══ CARDS SWIPER WRAP (>12 items) ══ */
.cards-wrap{
    position:relative;
}

/* side arrow buttons – vertically centred over the grid */
.carr{
    position:absolute;
    top:50%;transform:translateY(-50%);
    z-index:20;
    width:44px;height:44px;
    border-radius:50%;
    border:1.5px solid var(--bg);
    background:var(--white);
    box-shadow:0 4px 16px rgba(0,0,0,.12);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:opacity .25s,background .15s,box-shadow .2s;
    display: none;
}
.carr.show{display: flex}
.carr:hover{background:#f4f4f2;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.carr svg{width:15px;height:15px}
.carr-prev{left:-22px}
.carr-next{right:-22px}

/* on mobile: keep inside, smaller */
@media(max-width:767px){
    .carr{width:36px;height:36px}
    .carr svg{width:12px;height:12px}
    .carr-prev{left:4px}
    .carr-next{right:4px}
}

/* swiper itself */
.cards-swiper{
    overflow:hidden;
    padding: 50px;
    margin: -50px;
}

.cards-swiper:after{
    position: absolute;
    left: 0;
    width: 100px;
    content: '';
    top: 30px;
    bottom: 30px;
    /* 90 градусов — слева направо */
    background: linear-gradient(270deg, transparent 0, var(--bg) 60%);
    z-index: 2;
}

.cards-swiper:before{
    position: absolute;
    right: 0;
    width: 100px;
    content: '';
    top: 30px;
    bottom: 30px;
    /* 90 градусов — слева направо */
    background: linear-gradient(90deg, transparent 0, var(--bg) 60%);
    z-index: 2;
}

.sproduct-catalog .cards-swiper:after{
    background: linear-gradient(270deg, transparent 0, var(--white) 60%);
}

.sproduct-catalog .cards-swiper:before{
    background: linear-gradient(90deg, transparent 0, var(--white) 60%);
}


.cards-wrap:has(.carr-next.show) .cards-swiper:after,
.cards-wrap:has(.carr-prev.show) .cards-swiper:before{
    display: none;
}

.cards-swiper .swiper-slide{height:auto}

/* ══ PRODUCT CARD ══ */
.product-card{
    background:var(--white);
    border:2px solid var(--bg);
    border-radius:2px;
    display:flex;
    align-items:center;
    gap:8px;
    padding: 0 4px 0 0;
    cursor:pointer;
    transition:box-shadow .2s,transform .2s;
    min-height:76px;
    height:100%;
    box-shadow: 0px 4px 20px rgba(18, 17, 39, 0.1);
    text-decoration: none;
}
.product-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.09);transform:translateY(-2px)}

.pc-img{
    width:54px;height:54px;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}
.pc-img img{width:100%;height:100%;object-fit:contain;display:block}
.pc-name{
    font-size:10px;font-weight:400;color:var(--black);line-height:1.5;
    text-decoration: none;
    white-space: pre-line;
}

@media(min-width:768px){
    .pc-img {
        width: 80px;
        height: 80px;
    }
    .product-card{min-height:84px;gap:16px}
    .pc-img{width:72px;height:50px}
    .pc-name{font-size:16px}
}
@media(min-width:1024px){
    .pc-img {
        width: 100px;
        height: 100px;
    }
    .product-card{min-height:100px;}
}