Pairz concept CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/user/documents/upload/2022/code2_main.css"/>
<style>
.admin-bar {display: none;}
:root {
--spacing: 20px;
--radius: 10px;
--shadow: 0 0 30px #0000003d;
}
@media (min-width:992px) {
.sidebar {z-index: 99;transition: all 0.5s ease;position: absolute;overflow: hidden;}
.box.box-categories {overflow: hidden;}
.sidebar:hover {
transition: all 0.5s ease;
width: 340px;
box-shadow: var(--shadow);
}
.sidebar + #content {margin-left:100px;}
.box.box-categories:hover {box-shadow: none;}
.box.box-categories:hover:after {display: none;}
.sidebar-inner {width: 340px;}
.categories .topic>a {
padding: 20px 20px 20px 60px;
background-image: url(/user/documents/upload/2022/Benefity_bota.png);
background-size: 40px;
background-position: 0 10px;
background-repeat: no-repeat;
}
.categories ul a {
padding-left: 80px;
}
}
.p-detail-inner .p-data-wrapper {align-self: center;}
.p-to-cart-block, .p-basic-info-block { border-width: 0;}
@media (min-width: 992px) {
.p-thumbnails > div > div {
display: flex;
flex-direction: column;
width: 100px;
}
.p-thumbnails,
.p-thumbnails > div {
width: 100px;
height: 100%;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
z-index: 1;
}
.p-thumbnails > div {
position: unset;
}
.p-image > .row {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.p-image-wrapper {position: relative;
align-self: flex-start;}
.p-image-wrapper > .row {position: absolute;
margin: 0;
top: 50%;
transform: translateY(-50%);}
}
</style>