.brand-switcher {
display: flex;
gap: 12px;
justify-content: center;
margin: 20px 0 30px;
flex-wrap: wrap;
}
.brand-btn {
padding: 10px 24px;
border: 2px solid #FFFCDE;
font-size: 14px;
font-weight: 600;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
white-space: nowrap;
}
.brand-btn:hover {
background: rgba(134, 192, 65, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(134, 192, 65, 0.2);
}
.brand-btn.active {
background: #F4D03F;
color: #000;
box-shadow: 0 4px 12px rgba(134, 192, 65, 0.3);
}
.brand-btn.active:hover {
background: #6fa535;
} .olis-social-icons {
position: relative;
}
.olis-social-icon {
opacity: 1;
transition: opacity 0.3s ease, transform 0.3s ease;
} .olis-social-icon[data-brand="gusto"],
.olis-social-icon[data-brand="traditions"] {
display: none;
}
.olis-social-icon[data-brand="olis"] {
display: inline-flex;
} .social-title-text {
display: inline-block;
transition: opacity 0.3s ease;
}
.olis-social-title {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.olis-social-title .olis-bullet {
flex-shrink: 0;
} @media (max-width: 768px) {
.brand-switcher {
gap: 8px;
margin: 15px 0 25px;
}
.brand-btn {
padding: 8px 16px;
font-size: 12px;
}
}
@media (max-width: 480px) {
.brand-switcher {
align-items: center;
}
.brand-btn {
width: 100%;
max-width: 280px;
}
}
@media (max-width: 992px) {
.brand-btn[data-brand="traditions"] {
font-size: 12px;
padding: 10px 16px;
}
}