/* =========================================================
   v20 FLOATING PILL NAV – "Modern iOS Style"
   Includes: Category, Product Card, and NEW Floating Nav
========================================================= */

/* 1. GLOBAL BACKGROUND & TYPOGRAPHY
   ----------------------------------------------------- */
body {
    background: #f8f9fa !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* 2. SEARCH BAR TWEAKS
   ----------------------------------------------------- */
.sh-search-box input[type="text"],
.sh-search-box input {
    padding-left: 40px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

/* 3. CATEGORY ICONS – "Squircle & Pop"
   ----------------------------------------------------- */
.category-item,
.sh-category-item {
    text-align: center !important;
}

.category-item img,
.sh-category-item img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    border: 2px solid #ffffff !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.category-item:hover img,
.sh-category-item:hover img {
    transform: scale(1.08);
}

.category-item .cat-name,
.sh-category-item .cat-name {
    margin-top: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #444 !important;
    text-align: center !important;
}

/* 4. PRODUCT CARDS – "Tactile & Floating"
   ----------------------------------------------------- */
.h-product,
.product-card,
.product-tile,
.sh-product-card,
.sh-product-card-wrapper {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.04) !important;
    border: 1px solid rgba(0,0,0,0.02) !important;
    padding: 10px !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.h-product:hover,
.product-tile:hover,
.sh-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12) !important;
}

.h-product:active,
.product-tile:active,
.sh-product-card:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
}

.h-product img,
.product-tile img,
.sh-product-card img {
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

.product-name, .prod-name {
    text-align: center !important;
    font-weight: 500 !important;
    color: #2c3e50 !important;
    font-size: 13px !important;
}

.price, .prod-price {
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin-top: 4px !important;
}

/* =========================================================
   5. NEW BOTTOM NAV – FLOATING PILL BAR (Matching Image)
   ----------------------------------------------------- */
.MuiBottomNavigation-root,
.sh-bottom-nav {
    /* 1. Reset background and add floating look */
    background-color: #ffffff !important; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important; /* Soft lift shadow */
    border-radius: 20px !important; /* Rounded container corners */
    
    /* 2. Position the floating bar (Adjust margins as needed for your viewport) */
    position: fixed !important; 
    bottom: 10px !important; /* Lift 10px from the bottom edge */
    left: 10px !important;
    right: 10px !important;
    margin: 0 auto !important; /* Center the bar */
    width: auto !important; /* Allows it to take the full space minus margin */
    
    /* 3. Height & Alignment */
    height: 65px !important; 
    border-top: none !important; /* Remove old blue bar border */
    z-index: 1000; /* Ensure it stays on top */
}

/* Individual Buttons (Common Styles) */
.sh-bottom-nav .bottom-nav__buttons,
.MuiBottomNavigationAction-root {
    background: transparent !important;
    color: #999999 !important; /* Inactive text is light grey */
    font-weight: 500 !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
    padding: 0 4px !important;
}

/* Icons */
.sh-bottom-nav .bottom-nav__buttons svg,
.MuiBottomNavigationAction-root svg {
    fill: currentColor !important;
    transition: fill 0.3s ease;
}

/* ACTIVE STATE (The Pink/Red Highlight) */
.sh-bottom-nav .bottom-nav__buttons.sh-bottom-nav-selected,
.sh-bottom-nav .bottom-nav__buttons[aria-current="page"],
.MuiBottomNavigationAction-root.Mui-selected,
.MuiBottomNavigationAction-root[aria-current="page"] {
    /* Change text/icon color to the highlight color (Pink/Red from image) */
    color: #e54c7d !important; 
    background-color: transparent !important;
}

/* Active Icon Color */
.sh-bottom-nav .bottom-nav__buttons.sh-bottom-nav-selected svg,
.MuiBottomNavigationAction-root.Mui-selected svg,
.MuiBottomNavigationAction-root[aria-current="page"] svg {
    fill: #e54c7d !important;
}