/* ============================================================
   Rodi Express - main stylesheet

   Cleaned up. Removed from this file:

   - The empty "Dietary badges on product cards" comment block.
     Badge styling now lives in woocommerce.css, where the
     two-state solid/outlined rules are.

   - .rodi-empty-category and .wf-template-product.rodi-hidden.
     Both are now defined in woocommerce.css alongside the rest
     of the filter behaviour. woocommerce.css loads after this
     file, so keeping duplicates here achieved nothing except
     making them harder to find.

   - The whole "UNIVERSAL Filter Bar" section: .rodi-filter-wrap,
     .rodi-mobile-bar, .rodi-mobile-pill, .rodi-pill-count,
     .rodi-mobile-active-*, .rodi-sheet-* and the bottom sheet
     keyframes. That styled a pill-bar-plus-bottom-sheet design
     which no markup ever rendered, and it also carried
     .rodi-filter-wrap { display:none !important; }, which was
     actively hiding the filter bar. The current filter bar uses
     the .rodi-fb-* namespace in woocommerce.css.

   Kept: allergen tag and title styling, modal spacing fixes,
   and the general layout rules.
   ============================================================ */

/* Header */
.site-header {
    position: relative;
    z-index: 100;
}

/* Navigation */
.main-navigation a {
    transition: all .25s ease;
}

.main-navigation a:hover {
    color: var(--fm-primary);
}

/* FoodMaster Category Accordions */
.foodmaster-category,
.menu-category {
    border-radius: 12px;
    overflow: hidden;
}

/* Product Cards */
.woocommerce ul.products li.product {
    border-radius: 12px;
    overflow: hidden;
    transition: all .3s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
}

/* Sidebar Widgets */
.widget {
    border-radius: 12px;
}

/* Store Hours */
.store-hours {
    border-radius: 12px;
}

/* -------------------------------------------------------
   Allergen tags - base styling and plugin override

   This is the fallback. Per-tag colour comes from the
   --rodi-badge-color custom property via the more specific
   .product-allergens .allergen-tag.rodi-allergen-tag rule in
   woocommerce.css, so the red below only shows if a tag ever
   renders without that class.
------------------------------------------------------- */
.allergen-tag {
    display: inline-block !important;
    color: #fff !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin: 2px !important;
    background: #c62828 !important;
    background-color: #c62828 !important;
    border: none !important;
    border-color: transparent !important;
}

/* -------------------------------------------------------
   Allergen & Suitable for titles
------------------------------------------------------- */
.allergens-title {
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: #212121 !important;
    margin: 0 0 6px !important;
}

/* -------------------------------------------------------
   Reduce gap between Suitable for and Allergens sections
   in the product modal
------------------------------------------------------- */
.foodmaster-modern-content-section .product-allergens {
    margin: 0 0 4px 0 !important;
    padding: 4px 0 !important;
}

.foodmaster-modern-content-section .product-allergens:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}