/* Floating Cart Styles */
.floating-cart {
    position: fixed;
    bottom: 80px; /* Increase the bottom position to move it above the bottom navigation */
    right: 20px;
    background: linear-gradient(45deg, #5a189a, #9d4edd);
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 10px rgba(93, 33, 208, 0.5);
    cursor: pointer;
    display: none; /* Initially hidden */
    z-index: 1000;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulseGlow 2s infinite; /* Subtle pulsing effect */
}

/* Hover effect */
.floating-cart:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(93, 33, 208, 0.8);
}
@media (max-width: 768px) {
    .floating-cart {
        bottom: 100px; /* Adjust for smaller screens */
    }
}











.category-section h2 a {
    color: #5a189a !important; /* Purple */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px; /* Button-like padding */
    border-radius: 8px;
    background-color: #f0e5ff; /* Light background for button effect */
    transition: background-color 0.2s ease;
    width: fit-content;
    margin: 0 auto; /* Center align the button */
}

.category-section h2 a::after {
    content: ' ➔'; /* Small arrow icon */
    font-size: 0.5em;
    color: #5a189a;
    margin-left: 6px;
}

.category-section h2 a:active {
    background-color: #d4bff9; /* Slightly darker purple on tap for feedback */
}

/* Smaller Font Size for Mobile */
@media (max-width: 768px) {
    .category-section h2 {
        font-size: 0.1em; /* Smaller font for mobile */
    }
    .category-section h2 a {
        padding: 6px 8px; /* Smaller padding on mobile */
    }
}
/* Special Promotions Title Styled as Category Headers */
.promotion-section h2 {
    color: #5a189a; /* Purple color consistent with category headers */
    font-weight: 800;
    font-size: 1.3em;
    text-transform: uppercase;
    text-align: center;
    margin: 20px 0;
    cursor: pointer;
    position: relative; /* Allows additional styling if needed */
}

/* Promotion title link */
.promotion-section h2 a {
    color: #5a189a;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.promotion-section h2 a:hover {
    background-color: #f3e5ff;
    border-radius: 5px;
}

/* Optional underline effect similar to category headers */
.promotion-section h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: #5a189a;
    margin: 8px auto 0;
    border-radius: 4px;
}

/* Discount Badge */
.discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ff4d4d;
    color: #fff;
    padding: 6px 12px;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 12px;
    z-index: 10;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .promotion-section h2 {
        font-size: 1em; /* Smaller font size for mobile */
        margin: 15px 0;
    }
    
    .promotion-section h2 a {
        padding: 4px 6px; /* Smaller padding for compact look on mobile */
        font-size: 0.85em; /* Smaller text for promotion links on mobile */
    }
    
    .promotion-section h2::after {
        width: 60px; /* Reduce underline width */
        height: 2px;
        margin: 5px auto 0;
    }

    /* Compact Discount Badge for Mobile */
    .discount-badge {
        top: 8px;
        left: 8px;
        padding: 4px 8px;
        font-size: 0.75em; /* Smaller font */
        border-radius: 8px; /* Smaller badge for compact display */
    }
}


/* Countdown Timer */
.countdown {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    background: #5a189a; /* Purple background */
    color: #ff9900; /* Orange color for countdown text */
    font-size: 0.75em;
    font-weight: bold;
    border-radius: 8px;
    padding: 4px;
    font-family: 'Courier New', Courier, monospace;
    /* Removed box-shadow for a cleaner look */
}

.countdown .time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 0 3px;
    border-radius: 6px;
    background-color: #333; /* Black background for time blocks */
    color: #ff9900; /* Orange color for countdown numbers */
}

.countdown .time-block span {
    font-size: 1em;
}

.countdown .time-label {
    font-size: 0.5em;
    text-transform: uppercase;
    color: #fff; /* White for time labels */
}

/* Price Container */
.price-container {
    padding: 8px;
    font-size: 0.9em;
    text-align: center;
}

.original-price {
    text-decoration: line-through;
    color: #a0a0a0;
    margin-right: 4px;
    font-size: 0.85em;
}

.discounted-price {
    font-weight: bold;
    color: #5a189a;
    font-size: 1.1em;
}

/* Share Button */
.share-button {
    padding: 4px;
    margin-top: 8px;
    text-align: center;
}

.share-button button {
    padding: 5px 12px;
    font-size: 0.3em;
    background-color: #5a189a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.share-button button:hover {
    background-color: #9d4edd;
}

/* Product Card for Compact Design */
.promotion-item {
    flex: 0 0 180px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    padding: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* Search Bar */
.search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    background-color: #f5f5f5;
    border: 1px solid #333; /* Slim border for a defined edge */
    border-radius: 12px; /* Smaller radius for a compact look */
    max-width: 600px;
    width: 90%; /* Full width on mobile */
    position: relative;
}

.search-bar form {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
}

.search-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px; /* Minimal padding for a small icon area */
}

.search-icon img {
    width: 16px;
    height: 16px;
}

/* Search Input */
.search-input {
    width: 100%;
    border: none;
    padding: 4px; /* Minimal padding for a shallow depth */
    font-size: 0.9em; /* Smaller font for compact look */
    outline: none;
    color: #333;
    background-color: transparent;
}

.search-input::placeholder {
    color: #888;
    font-style: italic;
    opacity: 0.7;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .search-bar {
        max-width: 100%;
        padding: 2px; /* Reduce padding even more for mobile */
    }
    .search-input {
        padding: 3px; /* Very minimal padding */
        font-size: 0.85em; /* Smaller font for mobile */
    }
}
/* Ensure search results appear on top */
.search-results-container {
    position: absolute; /* Ensures the container overlays other content */
    top: 100%; /* Position it below the search bar */
    width: 100%; /* Full width under the search bar */
    z-index: 1000; /* High z-index to bring it in the foreground */
    background-color: #fff; /* Set background color to cover anything underneath */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: shadow for better visibility */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Clip any excess content */
}

/* Lower z-index for promo badges in the main content */
.discount-badge {
    z-index: 10; /* Lower than the search results container */
}

/* Search Result Item */
.search-result-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    margin: 5px 0;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.search-result-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.product-info h4 {
    font-size: 1em;
    color: #333;
    margin: 5px 0;
}

.product-price .original-price {
    text-decoration: line-through;
    color: #a0a0a0;
    margin-right: 5px;
}

.product-price .discounted-price {
    color: #5a189a;
    font-weight: bold;
}

.discount-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #ff4d4d;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
}

.share-button button {
    background-color: #5a189a;
    color: #fff;
    border: none;
    padding: 6px 12px;
    font-size: 0.8em;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px;
}

.share-button button:hover {
    background-color: #9d4edd;
}
 /* General Body Styles */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

/* Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #5a189a;
    padding: 15px;
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 3px solid #9d4edd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.site-logo {
    max-height: 50px;
    border-radius: 50%;
}

.welcome-message {
    font-size: 1em;
    font-weight: 600;
    text-align: center;
}

/* Announcement Carousel */
.announcement-carousel {
    background-color: #9d4edd;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    color: white;
    margin: 15px 0;
    font-size: 0.9em;
    font-weight: 500;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* Search Bar */
.search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px auto;
    padding: 8px;
    background-color: #fff;
    border: 2px solid #5a189a;
    border-radius: 20px;
    box-shadow: 0 3px 5px rgba(90, 24, 154, 0.15);
    max-width: 500px;
    position: relative;
}

.search-bar input[type="text"] {
    width: 100%;
    border: none;
    padding: 8px;
    font-size: 0.9em;
    outline: none;
    color: #5a189a;
    border-radius: 20px;
}

.search-bar input[type="text"]::placeholder {
    color: #9d4edd;
}

.search-results-container {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    width: 100%;
    max-width: 500px;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 10px 10px;
    z-index: 10;
    padding: 5px;
}

/* Category Section Title */
.category-section h2 {
    text-align: center;
    color: #5a189a;
    font-weight: 700;
    font-size: 1.3em;
    text-transform: uppercase;
    margin: 15px 0;
}

.category-section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #5a189a;
    margin: 6px auto 0;
    border-radius: 4px;
}

/* Horizontal Scroll for Products */
.horizontal-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: #5a189a #f4f4f9;
    -webkit-overflow-scrolling: touch;
}
/* Product Card with Compact Design */
.product-item, .promotion-item, .search-result-item {
    flex: 0 0 150px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    padding: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* Ensuring Product Images are Not Cropped */
.product-item img, .promotion-item img, .search-result-item img {
    width: 100%;
    height: auto; /* Maintain original aspect ratio */
    max-height: 140px;
    object-fit: contain; /* Prevent cropping */
    border-radius: 8px 8px 0 0;
}

/* Discount Badge */
.discount-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #ff4d4d;
    color: #fff;
    padding: 4px 8px;
    font-size: 0.75em;
    font-weight: bold;
    border-radius: 10px;
    z-index: 10;
}

/* Enhanced Compact Countdown Timer */
.countdown {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    background: #5a189a;
    color: #ffd700;
    font-size: 0.65em;
    font-weight: bold;
    border-radius: 6px;
    padding: 4px;
    font-family: 'Courier New', Courier, monospace;
}

.countdown .time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px;
    margin: 0 2px;
    background-color: #333;
    color: #ffd700;
    border-radius: 5px;
}

.countdown .time-block span {
    font-size: 0.9em;
}

.countdown .time-label {
    font-size: 0.5em;
    text-transform: uppercase;
}

/* Price Container */
.price-container {
    padding: 5px;
    font-size: 0.85em;
    text-align: center;
}

.original-price {
    text-decoration: line-through;
    color: #a0a0a0;
    margin-right: 3px;
    font-size: 0.8em;
}

.discounted-price {
    font-weight: bold;
    color: #5a189a;
    font-size: 0.9em;
}

/* Share Button */
.share-button {
    padding: 3px;
    margin-top: 4px;
    text-align: center;
}

.share-button button {
    padding: 3px 8px;
    font-size: 0.75em;
    background-color: #5a189a;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.share-button button:hover {
    background-color: #9d4edd;
}

/* Bottom Navigation */
.bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    background-color: #5a189a;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-top: 2px solid #9d4edd;
}

.bottom-nav a {
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    padding: 10px;
}

.bottom-nav a:hover {
    color: #ffd700;
}

/* Responsive Adjustments for Mobile */
@media (max-width: 768px) {
    /* Compact Header for Mobile */
    .main-header {
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }

    /* Smaller Product Card for Mobile */
    .product-item, .promotion-item, .search-result-item {
        flex: 0 0 120px;
        padding: 6px;
    }

    .product-item img, .search-result-item img {
        max-height: 200px;
        border-radius: 6px 6px 0 0;
    }
    
    
    
    
    
 .promotion-item img{
        max-height: 100px;
        border-radius: 6px 6px 0 0;
    }
     b

    /* Compact Countdown Timer */
    .countdown {
        padding: 2px;
        font-size: 0.6em;
    }

    .countdown .time-block {
        padding: 2px;
        margin: 0 1px;
    }

    /* Price Container Adjustments */
    .price-container {
        padding: 3px;
        font-size: 0.75em;
    }

    .original-price {
        font-size: 0.7em;
    }

    .discounted-price {
        font-size: 0.8em;
    }

    /* Compact Share Button */
    .share-button {
        padding: 2px;
        margin-top: 3px;
    }

    .share-button button {
        padding: 2px 6px;
        font-size: 0.7em;
    }

    /* Bottom Navigation Adjustments */
    .bottom-nav a {
        font-size: 0.8em;
        padding: 8px;
    }

    /* Smaller Category Title for Mobile */
    .category-section h2 {
        font-size: 1em;
    }

    /* Adjustments for Search Results on Mobile */
    .search-bar {
        padding: 6px;
        max-width: 100%;
    }

    .search-bar input[type="text"] {
        padding: 6px;
        font-size: 0.85em;
    }

    .search-results-container {
        max-width: 100%;
    }
}




<style>

/* Floating Cart Styles */
.floating-cart {
    position: fixed;
    bottom: 80px; /* Increase the bottom position to move it above the bottom navigation */
    right: 20px;
    background: linear-gradient(45deg, #5a189a, #9d4edd);
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 10px rgba(93, 33, 208, 0.5);
    cursor: pointer;
    display: none; /* Initially hidden */
    z-index: 1000;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulseGlow 2s infinite; /* Subtle pulsing effect */
}

/* Hover effect */
.floating-cart:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(93, 33, 208, 0.8);
}
@media (max-width: 768px) {
    .floating-cart {
        bottom: 100px; /* Adjust for smaller screens */
    }
}

/* Cart Icon */
.cart-icon {
    font-size: 2rem; /* Larger icon for visibility */
    vertical-align: middle;
}

/* Optional Animation for Glowing Effect */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 10px rgba(93, 33, 208, 0.5);
    }
    50% {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(93, 33, 208, 0.8);
    }
}









/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    z-index: 1010;
    transition: color 0.3s ease;
}

.lightbox-close:hover {
    color: #f00;
}












/* Variant Section Styling */
.variant-section {
    margin-top: 10px;
    padding: 15px;
    background-color: #fafafa;
    border: 2px dashed #5a189a;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
}

/* Variant Title */
.variant-section h3 {
    font-size: 1rem;
    font-weight: bold;
    color: #5a189a;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Variant Buttons */
.variant-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}

.variant-btn {
    background-color: #fff;
    border: 1px solid #5a189a;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: #5a189a;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.variant-btn:hover,
.variant-btn:focus {
    background-color: #5a189a;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Add to Cart and Buy Now Button Group */
.variant-buttons-group {
    margin-top: 10px; /* Space between variants and buttons */
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between buttons */
}

.variant-buttons-group .btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s ease-in-out;
}

/* Add to Cart Button */
#addToCartButton {
    background-color: #ccc;
    color: #333;
    border: 1px solid #ddd;
}

#addToCartButton:hover {
    background-color: #bbb;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Buy Now Button */
#buyNowButton {
    background-color: #5a189a;
    color: white;
    border: none;
}

#buyNowButton:hover {
    background-color: #4e0e7a;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .variant-section {
        padding: 10px;
    }

    .variant-buttons {
        gap: 8px;
    }

    .variant-buttons-group .btn {
        padding: 8px 15px;
        font-size: 0.85rem;
    }
}


/* Section header/link polish */
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 12px 8px;font:800 clamp(18px,2.6vw,22px)/1.2 system-ui;color:#111827}
.section-title a{ text-decoration:none; color:inherit; }
.section-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#f5f3ff;color:#6d28d9;text-transform:uppercase;letter-spacing:.5px}
.section-underline{height:4px;width:56px;background:#6d28d9;border-radius:999px;margin:6px 12px 0}
.view-all{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:#6d28d9;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;box-shadow:0 2px 6px rgba(17,24,39,.04)}
.view-all svg{width:14px;height:14px;stroke:currentColor}

/* Carousels */
.horizontal-scroll{display:flex;gap:12px;overflow:auto;padding:6px 8px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.promotion-item,.product-item{scroll-snap-align:start}

/* Card base + image */
.promotion-item,.product-item{flex:0 0 auto;width:48vw;max-width:240px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 18px 40px rgba(17,24,39,.08);overflow:hidden;position:relative;transition:transform .08s ease, box-shadow .15s ease}
@media (min-width:768px){.promotion-item,.product-item{width:210px}}
.promotion-item:hover,.product-item:hover{transform:translateY(-1px);box-shadow:0 22px 46px rgba(17,24,39,.12)}
.promotion-item img,.product-item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#f3f4f6}

/* Badges & countdown */
.discount-badge{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,#5b21b6,#6d28d9);color:#fff;font-weight:800;font-size:.85rem;padding:6px 10px;border-radius:999px;box-shadow:0 10px 20px rgba(109,40,217,.28)}
.countdown{position:absolute;bottom:8px;right:8px;display:flex;gap:6px;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:6px 8px;font-size:.75rem;color:#111827}
.countdown .time-block span{font-weight:800}

/* Prices */
.price-container{display:flex;align-items:baseline;gap:8px;padding:10px 12px 12px}
.original-price{color:#9ca3af;text-decoration:line-through;font-size:.95rem}
.discounted-price,.price{color:#111827;font-weight:800;font-size:1.05rem}

/* Tiny floating share (icon-only) */
.share-button{display:none!important}
.share-fab{position:absolute;top:8px;right:8px;z-index:2;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:#111827;box-shadow:0 8px 20px rgba(0,0,0,.08);cursor:pointer;transition:transform .06s ease,filter .15s ease}
.share-fab:hover{filter:brightness(1.03)}
.share-fab:active{transform:translateY(1px)}
.share-fab svg{width:16px;height:16px}

/* Smooth hide/show bars */
.main-header,.bottom-nav{transition:transform .2s ease;will-change:transform}
.bottom-nav{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.main-header{padding-top:calc(14px + env(safe-area-inset-top))}
:focus-visible{outline:3px solid #6d28d9;outline-offset:2px;border-radius:12px}