.fsn-location-dropdown {
transform: translateY(10px);
transition: all 0.3s ease;
}
.fsn-location-dropdown.is-open {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0);
}
.fsn-location-trigger {
background: rgba(255,255,255,0.1);
padding: 8px 16px;
border-radius: 99px;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
cursor: pointer;
}
.fsn-location-trigger:hover {
background: rgba(255,255,255,0.2);
}
/* Styling for the active city in the dropdown */
.fsn-city-option.is-active {
background-color: var(--primary);
color: white !important;
}
/* Ensure the injected checkmark looks sharp */
.fsn-check-icon {
display: flex;
align-items: center;
opacity: 0.8;
}
/* --- Optimized Dropdown UI --- */
.fsn-location-dropdown {
will-change: transform, opacity; /* Hardware acceleration */
transition: all 0.25s cubic-bezier(0.2, 1, 0.2, 1);
}
.fsn-city-option {
position: relative;
padding-right: 40px !important; /* Reserve space for checkmark */
}
/* Pre-insert checkmark icon via CSS to avoid JS DOM manipulation */
.fsn-city-option::after {
content: '✓';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-weight: 900;
opacity: 0;
transition: opacity 0.2s ease;
}
.fsn-city-option.is-active::after {
opacity: 1;
}
/* Page Transition Effect */
body {
transition: opacity 0.3s ease;
}
body.is-switching {
opacity: 0.6;
pointer-events: none;
}
@media screen and (max-width: 768px) {
.brxe-woocommerce-mini-cart .cart-detail{
width: 300px !important;
max-width: 300px !important;
}
}
function updateHeaderHeight() {
// Get the height of #brx-header
const headerHeight = document.querySelector('#brx-header').offsetHeight;
// Store the height in the CSS custom property --header-height
document.documentElement.style.setProperty('--brxw-header-height', headerHeight + 'px');
}
// Execute the function as soon as the document is ready
document.addEventListener('DOMContentLoaded', function() {
updateHeaderHeight(); // Initial update of header height when the document is ready
// Update the header height on window resize and orientation change
window.addEventListener('resize', updateHeaderHeight);
window.addEventListener('orientationchange', updateHeaderHeight);
});