.tss-widget {
--tss-mobile-card-width: 140px;
--tss-mobile-peek: 40px;
} .tss-wrapper {
display: flex;
flex-direction: row;
gap: 30px;
align-items: flex-start;
width: 100%;
box-sizing: border-box;
} .tss-sidebar {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 200px;
} .tss-title {
margin: 0 0 24px 0;
padding: 0;
line-height: 1.25;
} .tss-tabs-nav {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start; } .tss-tab-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
border: 1px solid transparent;
border-radius: 50px;
background: transparent;
color: #141436;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
line-height: 1;
}
.tss-tab-btn.tss-active {
background: #141436;
color: #fff;
}
.tss-tab-btn:hover:not(.tss-active) {
background: rgba(20, 20, 54, 0.06);
} .tss-content {
flex: 1;
min-width: 0;
} .tss-panel {
display: none;
}
.tss-panel.tss-active {
display: block;
} .tss-cards-track {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
} .tss-card {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #E8E8E8;
border-radius: 16px;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
width: 160px;
height: 120px;
flex-shrink: 0;
}
.tss-card a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
}
.tss-card img {
max-width: 80%;
max-height: 80%;
width: auto;
height: auto;
object-fit: contain;
display: block;
transition: transform 0.25s ease;
} .tss-card.tss-hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.tss-card.tss-hover-zoom:hover img {
transform: scale(1.08);
}
.tss-card.tss-hover-shadow:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.tss-card.tss-hover-fade:hover {
opacity: 0.7;
} .tss-carousel-outer {
display: flex;
align-items: center;
} .tss-cards-track.tss-overflow-carousel {
flex: 1;
min-width: 0;
flex-wrap: nowrap !important;
overflow-x: scroll;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
cursor: grab;
user-select: none;
-webkit-user-select: none;
} .tss-cards-track.tss-overflow-carousel.tss-dragging {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
}
.tss-cards-track.tss-overflow-carousel::-webkit-scrollbar {
display: none;
}
.tss-cards-track.tss-overflow-carousel .tss-card {
scroll-snap-align: start;
flex-shrink: 0;
} .tss-cards-track.tss-overflow-carousel img,
.tss-cards-track.tss-overflow-carousel a {
-webkit-user-drag: none;
user-drag: none;
} .tss-progress {
display: none;
} @media (max-width: 1024px) {
.tss-wrapper {
flex-direction: column;
} .tss-sidebar {
width: 100% !important;
} .tss-tabs-nav {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
.tss-tabs-nav::-webkit-scrollbar { display: none; }
.tss-tab-btn {
flex-shrink: 0;
text-align: center;
}
} @media (max-width: 767px) { .tss-widget {
overflow: hidden;
max-width: 100%;
} .tss-content {
overflow: hidden;
max-width: 100%;
} .tss-cards-track {
flex-wrap: nowrap !important;
overflow-x: scroll;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none !important;
align-items: stretch;
} .tss-panel .tss-cards-track::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
} .tss-card {
scroll-snap-align: start;
flex-shrink: 0 !important;
width: var(--tss-mobile-card-width, 140px) !important;
min-width: var(--tss-mobile-card-width, 140px) !important;
} .tss-progress {
display: block;
margin-top: 12px;
height: 3px;
background: #E0E0E0;
border-radius: 3px;
position: relative;
overflow: hidden;
display: none!important;
}
.tss-progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #141436;
border-radius: 3px;
width: 30%;
transition: left 0.15s ease, width 0.15s ease;
}
}