/*
Theme Name: Avada Child Theme
Description: Child theme for Avada
Author: Your Name
Template: Avada
Version: 1.0
Updated: 2025-01-12 - Separator fixes reverted to working state
*/

/* Import parent theme styles */
@import url("../Avada/style.css");

/* Remove brown dominant-color lazy-load placeholders */
html body [data-dominant-color],
html body [style*="#8f7560" i],
html body [style*="143, 117, 96"],
html body [style*="143,117,96"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Simple working hamburger menu - based on reference site */
.glyphicon.music-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: white;
    border-radius: 0 0 0 100%;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* White border */
.glyphicon.music-menu:after {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 0 0 0 100%;
    border: 8px solid #78b500;
    border-top: none;
    border-right: none;
    pointer-events: none;
    z-index: -1;
}

/* Remove pseudo-element content */
.glyphicon.music-menu:before {
    content: none;
}

/* Simple hover effect - keep white background */
.glyphicon.music-menu:hover {
    background: white !important;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* Sunshine rays container */
.glyphicon.music-menu .sunshine-rays {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 0 0 0 100%;
    pointer-events: none;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show rays on hover */
.glyphicon.music-menu:hover .sunshine-rays {
    opacity: 1;
}

/* Individual sunshine rays */
.glyphicon.music-menu .sunshine-rays .ray {
    position: absolute;
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, #78b500, transparent);
    transform-origin: bottom center;
    animation: rayPulse 2s infinite;
}

/* Position rays around the curved border */
.glyphicon.music-menu .sunshine-rays .ray:nth-child(1) { transform: rotate(45deg) translateY(-30px); animation-delay: 0s; }
.glyphicon.music-menu .sunshine-rays .ray:nth-child(2) { transform: rotate(67.5deg) translateY(-30px); animation-delay: 0.2s; }
.glyphicon.music-menu .sunshine-rays .ray:nth-child(3) { transform: rotate(90deg) translateY(-30px); animation-delay: 0.4s; }
.glyphicon.music-menu .sunshine-rays .ray:nth-child(4) { transform: rotate(112.5deg) translateY(-30px); animation-delay: 0.6s; }
.glyphicon.music-menu .sunshine-rays .ray:nth-child(5) { transform: rotate(135deg) translateY(-30px); animation-delay: 0.8s; }
.glyphicon.music-menu .sunshine-rays .ray:nth-child(6) { transform: rotate(157.5deg) translateY(-30px); animation-delay: 1s; }
.glyphicon.music-menu .sunshine-rays .ray:nth-child(7) { transform: rotate(180deg) translateY(-30px); animation-delay: 1.2s; }
.glyphicon.music-menu .sunshine-rays .ray:nth-child(8) { transform: rotate(202.5deg) translateY(-30px); animation-delay: 1.4s; }

/* Ray pulse animation */
@keyframes rayPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.2); }
}

/* Clean hamburger menu styling inspired by Irish Yogurts */
.awb-menu__i.awb-menu__i_main.fusion-megamenu-icon {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000 !important;
    background: transparent !important; /* Remove background */
    border: none !important; /* Remove border */
}

/* Create clean hamburger bars like Irish Yogurts */
.awb-menu__i.awb-menu__i_main.fusion-megamenu-icon:before {
    content: "";
    position: absolute;
    width: 24px;
    height: 3px;
    background-color: #008c4a !important; /* Green bars */
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
    z-index: 10001 !important;
}

.awb-menu__i.awb-menu__i_main.fusion-megamenu-icon:after {
    content: "";
    position: absolute;
    width: 24px;
    height: 3px;
    background-color: #008c4a !important; /* Green bars */
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
    z-index: 10001 !important;
}

/* Style the middle bar like Irish Yogurts */
.awb-menu__i.awb-menu__i_main.fusion-megamenu-icon .middle-bar {
    width: 24px;
    height: 3px;
    background-color: #008c4a !important; /* Green bars */
    margin: 2px 0;
    transition: all 0.3s ease;
    z-index: 10001 !important;
    position: relative;
}

/* Target Avada's default hamburger menu bars - make them green */
.awb-menu__i.awb-menu__i_main.fusion-megamenu-icon {
    color: #008c4a !important;
}

/* Target the hamburger icon directly */
.awb-menu__i-icon {
    color: #008c4a !important;
}

/* Target the main menu icon */
.awb-menu__i_main {
    color: #008c4a !important;
}

/* Target any icon inside the menu */
.glyphicon.music-menu i {
    color: #008c4a !important;
}

/* Target FontAwesome bars icon */
.glyphicon.music-menu .fa-bars {
    color: #008c4a !important;
}

/* Target any bars icon */
.glyphicon.music-menu .bars {
    color: #008c4a !important;
}

/* Target the menu icon container */
.glyphicon.music-menu .fusion-megamenu-icon {
    color: #008c4a !important;
}

/* Target Avada's specific hamburger icon classes */
.awb-icon-bars {
    color: #008c4a !important;
}

.fusion-icon.awb-icon-bars {
    color: #008c4a !important;
}

/* Target any element with bars in the class name */
[class*="bars"] {
    color: #008c4a !important;
}

/* Target the menu toggle icon */
.fusion-flyout-menu-toggle {
    color: #008c4a !important;
}

/* Target any element inside the menu that might be the bars */
.glyphicon.music-menu * {
    color: #008c4a !important;
}

/* Target the specific Avada hamburger menu structure */
.fusion-mobile-menu-icons .fusion-icon {
    color: #008c4a !important;
}

.fusion-flyout-menu-icons .fusion-icon {
    color: #008c4a !important;
}

/* Target the actual Avada menu elements you found */
.menu-music-flyout-menu {
    color: #008c4a !important;
    position: relative;
    top: 0 !important; /* Keep menu items in proper position */
    padding: 20px !important; /* Add padding inside the menu container */
    margin-top: 0 !important;
}

.fusion-menu.awb-menu__main-ul.awb-menu__main-ul_row {
    color: #008c4a !important;
    position: relative;
    top: 0 !important; /* Keep menu items in proper position */
    padding: 20px !important;
}

/* Target any elements inside these menus */
.menu-music-flyout-menu * {
    color: #008c4a !important;
}

.fusion-menu.awb-menu__main-ul.awb-menu__main-ul_row * {
    color: #008c4a !important;
}

/* Main Navigation Menu Item Styling with White Background and Green Border */
.fusion-main-menu > ul > li > a,
.awb-menu__main-ul > li > a,
.fusion-menu.awb-menu__main-ul.awb-menu__main-ul_row > li > a {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #008c4a !important;
    border: 2px solid #78b500 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    margin: 0 5px !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

/* Hover effect for menu items */
.fusion-main-menu > ul > li > a:hover,
.awb-menu__main-ul > li > a:hover,
.fusion-menu.awb-menu__main-ul.awb-menu__main-ul_row > li > a:hover {
    background: #78b500 !important;
    background-color: #78b500 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(120, 181, 0, 0.3) !important;
}

/* Active/current menu item */
.fusion-main-menu > ul > li.current-menu-item > a,
.fusion-main-menu > ul > li.current_page_item > a,
.awb-menu__main-ul > li.current-menu-item > a,
.awb-menu__main-ul > li.current_page_item > a {
    background: #78b500 !important;
    background-color: #78b500 !important;
    color: #ffffff !important;
}

/* Flyout Menu Items Styling - for the hamburger menu dropdown */
ul.menu-music-flyout-menu li[class*="menu-item-"] > a,
ul.menu-music-flyout-menu > li.menu-item > a,
.fusion-flyout-menu .fusion-menu > li > a,
.awb-menu__flyout .awb-menu__main-ul > li > a,
.menu-music-flyout-menu li > a,
.menu-music-flyout-menu li[class*="menu-item"] > a,
.menu-music-flyout-menu .menu-item > a,
.fusion-flyout-menu-bg .fusion-menu li a {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #008c4a !important;
    border: 2px solid #78b500 !important;
    border-radius: 8px !important;
    padding: 15px 25px !important;
    margin: 8px 0 !important;
    display: block !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* Hover effect for flyout menu items */
ul.menu-music-flyout-menu li[class*="menu-item-"] > a:hover,
ul.menu-music-flyout-menu > li.menu-item > a:hover,
.fusion-flyout-menu .fusion-menu > li > a:hover,
.awb-menu__flyout .awb-menu__main-ul > li > a:hover,
.menu-music-flyout-menu li > a:hover,
.menu-music-flyout-menu li[class*="menu-item"] > a:hover,
.menu-music-flyout-menu .menu-item > a:hover,
.fusion-flyout-menu-bg .fusion-menu li a:hover {
    background: #78b500 !important;
    background-color: #78b500 !important;
    color: #ffffff !important;
    transform: translateX(5px) !important;
    box-shadow: 0 4px 8px rgba(120, 181, 0, 0.3) !important;
}

/* Active/current flyout menu item */
ul.menu-music-flyout-menu > li[class*="menu-item-"].current-menu-item > a,
ul.menu-music-flyout-menu > li[class*="menu-item-"].current_page_item > a,
.fusion-flyout-menu .fusion-menu > li.current-menu-item > a,
.fusion-flyout-menu .fusion-menu > li.current_page_item > a,
.awb-menu__flyout .awb-menu__main-ul > li.current-menu-item > a,
.awb-menu__flyout .awb-menu__main-ul > li.current_page_item > a,
.menu-music-flyout-menu li.current-menu-item > a,
.menu-music-flyout-menu li.current_page_item > a {
    background: #78b500 !important;
    background-color: #78b500 !important;
    color: #ffffff !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .glyphicon.music-menu {
        width: 120px;
        height: 120px;
        top: 0;
        right: 0;
    }
}

/* Flyout Menu Container Positioning */
.awb-menu__flyout,
.fusion-flyout-menu,
.fusion-flyout-menu-bg {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 300px !important;
    max-width: 400px !important;
    height: 100vh !important;
    padding: 80px 30px 30px 30px !important; /* Extra top padding to avoid covering hamburger button */
    overflow-y: auto !important;
}

/* Clean X button styling like Irish Yogurts */
.awb-menu__flyout-close {
    background: transparent !important;
    border: none !important;
    color: white !important; /* White X like Irish Yogurts */
    font-size: 24px !important;
    font-weight: normal !important;
    padding: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Style the X content */
.awb-menu__flyout-close:before {
    content: "×" !important;
    font-size: 28px !important;
    color: white !important; /* White X like Irish Yogurts */
    line-height: 1 !important;
}

/* Hover effect for the close button */
.awb-menu__flyout-close:hover {
    opacity: 0.8 !important;
    transform: scale(1.1) !important;
}

/* Yogurt Pot Scroller - Similar to Onken's "OUR RANGES" */
.our-products-scroller {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
    padding: 60px 0;
    margin: 40px 0;
}

.our-products-scroller__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.our-products-scroller__title {
    flex: 0 0 200px;
    text-align: center;
}

.our-products-scroller__title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
}

.our-products-scroller__title h2 span {
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    color: #7f8c8d;
    margin-top: 5px;
    letter-spacing: 1px;
}

.our-products-scroller__pots {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    margin: 0 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0; /* Prevents flex item from overflowing */
}

/* Fallback: If scrolling fails, center the products */
.our-products-scroller__pots.no-scroll {
    justify-content: center;
    flex-wrap: wrap;
}

.yogurt-pot {
    width: 140px;
    height: 180px;
    background: linear-gradient(145deg, #ffffff, #f0f0f0) !important;
    border-radius: 60px 60px 20px 20px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    transform: translateY(0);
    border: 3px solid blue !important;
    padding: 0 !important;
    flex-shrink: 0;
    /* DEBUG: Very obvious shadow to test if CSS is working */
    box-shadow: 0 10px 20px rgba(255, 0, 0, 0.8) !important;
}

.yogurt-pot:hover {
    transform: translateY(-10px) scale(1.05);
    /* Smaller shadow on hover - like Onken */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Enhanced hover effects for yogurt pots with images */
.yogurt-pot.has-image:hover {
    transform: translateY(-15px) scale(1.05) !important;
    /* Smaller shadow on hover for image pots - like Onken */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.yogurt-pot__lid {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 20px;
    background: linear-gradient(145deg, #e74c3c, #c0392b);
    border-radius: 40px 40px 0 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.yogurt-pot__content {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 100px;
    background: linear-gradient(145deg, #f39c12, #e67e22);
    border-radius: 45px 45px 15px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    /* Add background image support */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Wrapper for yogurt pot and label */
.yogurt-pot-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 140px;
}

.yogurt-pot__label {
    position: relative;
    margin-top: 10px;
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Label is now outside transformable container - no need for counter-transforms */
    transition: none !important;
}

/* No counter-transforms needed - label is outside transformable container */

/* Image-based yogurt pots */
.yogurt-pot__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Ensure images appear above default backgrounds */
}

.yogurt-pot__image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
    transition: transform 0.3s ease;
}

.yogurt-pot:hover .yogurt-pot__image img {
    transform: scale(1.05);
}

/* Hide default content when image is present */
.yogurt-pot:has(.yogurt-pot__image) .yogurt-pot__lid,
.yogurt-pot:has(.yogurt-pot__image) .yogurt-pot__content {
    display: none !important;
}

/* Alternative for browsers that don't support :has() */
.yogurt-pot.has-image .yogurt-pot__lid,
.yogurt-pot.has-image .yogurt-pot__content {
    display: none !important;
}

/* Force hide default backgrounds when images are present */
.yogurt-pot.has-image .yogurt-pot__content {
    background: none !important;
    background-image: none !important;
}

/* Ensure complete transparency for image-based pots */
.yogurt-pot.has-image {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    background: none !important;
}

/* Override any inherited backgrounds */
.yogurt-pot.has-image * {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Force remove all backgrounds from image pots */
.yogurt-pot.has-image,
.yogurt-pot.has-image .yogurt-pot__content,
.yogurt-pot.has-image .yogurt-pot__lid {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    background: none !important;
}

/* Override the specific white gradient background */
.yogurt-pot.has-image {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    background: none !important;
    background: transparent !important;
}

/* Maximum specificity override for backgrounds */
body .our-products-scroller .our-products-scroller__pots .yogurt-pot.has-image,
body .our-products-scroller .our-products-scroller__pots .yogurt-pot.has-image * {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    background: none !important;
}

/* Maximum specificity for removing all visual effects */
body .our-products-scroller .our-products-scroller__pots .yogurt-pot.has-image,
body .our-products-scroller .our-products-scroller__pots .yogurt-pot.has-image *,
body .our-products-scroller .our-products-scroller__pots .yogurt-pot.has-image img {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Remove the light grey/white glow with working specificity */
.yogurt-pot.has-image {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Maximum specificity glow removal using the working approach */
html body .fusion-text .our-products-scroller .our-products-scroller__pots .yogurt-pot.has-image {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Target image elements specifically */
html body .fusion-text .our-products-scroller .our-products-scroller__pots .yogurt-pot.has-image .yogurt-pot__image,
html body .fusion-text .our-products-scroller .our-products-scroller__pots .yogurt-pot.has-image .yogurt-pot__image img {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Maximum specificity for hover effects */
body .our-products-scroller .our-products-scroller__pots .yogurt-pot.has-image:hover {
    transform: translateY(-15px) scale(1.05) !important;
    box-shadow: 
        0 25px 50px rgba(0,0,0,0.3),
        0 10px 20px rgba(0,0,0,0.2) !important;
    outline: none !important;
}

/* Ensure images are visible */
.yogurt-pot__image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.yogurt-pot__image img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Special styling for yogurt pots with product images */
.yogurt-pot.has-image {
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Remove any filter effects that might create the glow */
.yogurt-pot.has-image,
.yogurt-pot.has-image *,
.yogurt-pot.has-image img {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.yogurt-pot.has-image .yogurt-pot__image {
    border-radius: 0;
    overflow: visible;
}

.yogurt-pot.has-image .yogurt-pot__image img {
    border-radius: 0;
    box-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    /* Force remove any inherited effects */
    all: unset !important;
    display: block !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.yogurt-pot.has-image:hover .yogurt-pot__image img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

/* Different yogurt flavors */
.yogurt-pot--strawberry .yogurt-pot__content {
    background: linear-gradient(145deg, #e74c3c, #c0392b);
    /* Uncomment and add your image path */
    /* background-image: url('/wp-content/uploads/2025/01/strawberry-yogurt.jpg'); */
}

.yogurt-pot--vanilla .yogurt-pot__content {
    background: linear-gradient(145deg, #f1c40f, #f39c12);
}

.yogurt-pot--blueberry .yogurt-pot__content {
    background: linear-gradient(145deg, #9b59b6, #8e44ad);
}

.yogurt-pot--mango .yogurt-pot__content {
    background: linear-gradient(145deg, #e67e22, #d35400);
}

.yogurt-pot--coconut .yogurt-pot__content {
    background: linear-gradient(145deg, #95a5a6, #7f8c8d);
}

.yogurt-pot--mixed-berry .yogurt-pot__content {
    background: linear-gradient(145deg, #e91e63, #c2185b);
}

.yogurt-pot--natural .yogurt-pot__content {
    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
    color: #2c3e50;
}

.yogurt-pot--greek .yogurt-pot__content {
    background: linear-gradient(145deg, #34495e, #2c3e50);
}

.yogurt-pot--honey .yogurt-pot__content {
    background: linear-gradient(145deg, #f39c12, #e67e22);
}

.yogurt-pot--raspberry .yogurt-pot__content {
    background: linear-gradient(145deg, #e74c3c, #c0392b);
}

/* Scroller navigation */
.our-products-scroller__nav {
    flex: 0 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.scroller-nav-btn {
    width: 50px !important;
    height: 50px !important;
    border: none !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #27ae60, #2ecc71) !important;
    color: white !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.scroller-nav-btn:hover {
    background: linear-gradient(145deg, #229954, #27ae60) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important;
}

.scroller-nav-btn:active {
    transform: scale(0.95);
}

.scroller-nav-btn:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Responsive design */
@media (max-width: 768px) {
    .our-products-scroller__container {
        flex-direction: column;
        gap: 30px;
    }
    
    .our-products-scroller__title {
        flex: none;
    }
    
    .our-products-scroller__title h2 {
        font-size: 2rem;
    }
    
    .our-products-scroller__pots {
        margin: 0 20px;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .yogurt-pot {
        flex: 0 0 100px;
        height: 140px;
    }
    
    .yogurt-pot__content {
        width: 75px;
        height: 85px;
        font-size: 0.8rem;
    }
    
    .our-products-scroller__nav {
        flex-direction: row;
        flex: none;
        gap: 15px;
        margin-top: 20px;
    }
    
    .scroller-nav-btn {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .our-products-scroller__pots {
        gap: 15px;
        margin: 0 10px;
    }
    
    .yogurt-pot {
        flex: 0 0 80px;
        height: 120px;
    }
    
    .yogurt-pot__content {
        width: 60px;
        height: 70px;
        font-size: 0.7rem;
    }
    
    .yogurt-pot__label {
        font-size: 0.7rem;
    }
    
    .scroller-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}

/* CSS Variables for colors - wrapped in :root */
:root {
    --primary-color: #007bff;
    --secondary-color: #2c3e50;
    --accent-color: #28a745;
    --bg-light: #f8f9fa;
    --bg-medium: #e9ecef;
    --bg-dark: #dee2e6;
}

/* Hide duplicate WooCommerce tabs - keep only the FIRST occurrence */
/* On custom pages, hide all tabs first, then show only the first one */
.page:not(.single-product) .woocommerce-tabs.wc-tabs-wrapper {
    display: none !important;
}

/* Then show ONLY the first occurrence */
.page:not(.single-product) .woocommerce-tabs.wc-tabs-wrapper:first-of-type {
    display: block !important;
}

/* Keep all tabs visible on actual single product pages */
.single-product .woocommerce-tabs.wc-tabs-wrapper {
    display: block !important;
}

/* Force icon fonts for social sharing - override any Lato rules */
.fusion-sharing-box *,
.fusion-sharing-box i,
.product-share *,
.product-share i,
[class*="share"] i,
[class*="social"] i {
    font-family: inherit !important;
}

/* Specifically for Avada/Fusion sharing icons */
.fusion-sharing-box .fusion-icon:before,
.fusion-social-links .fusion-icon:before {
    font-family: 'icomoon' !important;
}

/* FORCE CORRECT ICON FONTS - WooCommerce Social Share Icons */
ul.social-share li i,
ul.social-share li i.fontawesome-icon,
ul.social-share li i[class*="awb-icon"],
.social-share .fontawesome-icon,
.social-share [class*="awb-icon"] {
    font-family: 'awb-icons' !important;
    font-style: normal !important;
}

/* Ensure icon pseudoelements also use correct font */
ul.social-share li i:before,
ul.social-share li i.fontawesome-icon:before,
.social-share .fontawesome-icon:before,
.social-share [class*="awb-icon"]:before {
    font-family: 'awb-icons' !important;
}

/* Social sharing icons now work properly - Lato font excluded from icon elements */

.single-product .product_title {
    font-family: 'Your Font', sans-serif;
    font-size: 2.5rem;
}

.single-product .product {
    padding: 40px 20px; /* Adjust as needed */
}

/* Product image container - Enhanced version */
.product-image-container {
    position: relative;
    z-index: 2;
    max-width: 350px;
    width: 100%;
}

.product-image-container img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    cursor: pointer;
}

.product-image-container img:hover,
html body .product-image-container img:hover {
    transform: scale(1.02) !important;
    animation: gentleBounceProductImage 0.6s ease-in-out !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.3);
}

@keyframes gentleBounceProductImage {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1.02); }
}

/* Completely disable WooCommerce zoom */
.woocommerce-product-gallery__image img {
    cursor: default !important;
    transform: none !important;
    transition: none !important;
}

.woocommerce-product-gallery__image img:hover {
    transform: none !important;
    cursor: default !important;
}

.woocommerce-product-gallery__image::after {
    display: none !important;
}

.woocommerce-product-gallery__image .zoom {
    display: none !important;
}

/* Match Onken ingredients heading style exactly */
.single-product .product_title {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 15px 25px;
    border-radius: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 25px 0;
    display: block !important; /* Changed from inline-block to block to allow proper wrapping */
    width: 100% !important;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    line-height: 1.4;
    /* Allow text to wrap to multiple lines */
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure title wrapper allows wrapping */
.single-product .onken-style-title-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ========================================
   FIX TEXT WRAPPING IN AVADA LAYOUT COLUMNS
   ======================================== */

/* Fix fusion-title-heading - THIS IS THE ACTUAL CLASS BEING USED - MAXIMUM SPECIFICITY */
html body .fusion-column-wrapper .fusion-title-heading,
html body .fusion-builder-column .fusion-title-heading,
html body .fusion-layout-column .fusion-title-heading,
html body .fusion-column-wrapper .fusion-title-heading.title-heading-left,
html body .fusion-builder-column .fusion-title-heading.title-heading-left,
html body .fusion-layout-column .fusion-title-heading.title-heading-left,
html body .fusion-column-wrapper .fusion-title-heading h1,
html body .fusion-column-wrapper .fusion-title-heading h2,
html body .fusion-column-wrapper .fusion-title-heading h3,
html body .fusion-builder-column .fusion-title-heading h1,
html body .fusion-builder-column .fusion-title-heading h2,
html body .fusion-builder-column .fusion-title-heading h3,
html body .fusion-layout-column .fusion-title-heading h1,
html body .fusion-layout-column .fusion-title-heading h2,
html body .fusion-layout-column .fusion-title-heading h3,
html body .fusion-title-heading,
html body .fusion-title-heading h1,
html body .fusion-title-heading h2,
html body .fusion-title-heading h3,
html body .fusion-title-heading h4,
html body .fusion-title-heading h5,
html body .fusion-title-heading h6,
html body .fusion-title-heading *,
html body .fusion-title-heading.title-heading-left,
html body .fusion-title-heading.title-heading-left h1,
html body .fusion-title-heading.title-heading-left h2,
html body .fusion-title-heading.title-heading-left h3,
html body .fusion-title-heading.title-heading-left *,
.fusion-title-heading,
.fusion-title-heading h1,
.fusion-title-heading h2,
.fusion-title-heading h3,
.fusion-title-heading h4,
.fusion-title-heading h5,
.fusion-title-heading h6,
.fusion-title-heading *,
.title-heading-left,
.title-heading-center,
.title-heading-right {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: visible !important;
}

/* Fix text wrapping in Avada fusion columns - for custom post types and ACF */
.fusion-column-wrapper h1,
.fusion-column-wrapper h2,
.fusion-column-wrapper h3,
.fusion-builder-column h1,
.fusion-builder-column h2,
.fusion-builder-column h3,
.fusion-layout-column h1,
.fusion-layout-column h2,
.fusion-layout-column h3,
.fusion-column-wrapper .fusion-text h1,
.fusion-column-wrapper .fusion-text h2,
.fusion-column-wrapper .fusion-text h3,
.fusion-builder-column .fusion-text h1,
.fusion-builder-column .fusion-text h2,
.fusion-builder-column .fusion-text h3,
.fusion-layout-column .fusion-text h1,
.fusion-layout-column .fusion-text h2,
.fusion-layout-column .fusion-text h3 {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Ensure column wrappers don't constrain text */
.fusion-column-wrapper,
.fusion-builder-column,
.fusion-layout-column {
    overflow: visible !important;
    word-wrap: break-word !important;
}

/* Fix for fusion-text elements specifically */
.fusion-text h1,
.fusion-text h2,
.fusion-text h3,
.fusion-text h4,
.fusion-text h5,
.fusion-text h6 {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 2025-new page tree (see iy_body_class_2025_new_tree): wrap between words, not inside them */
body.iy-site-2025-new .fusion-title-heading,
body.iy-site-2025-new .fusion-title-heading h1,
body.iy-site-2025-new .fusion-title-heading h2,
body.iy-site-2025-new .fusion-title-heading h3,
body.iy-site-2025-new .fusion-title-heading h4,
body.iy-site-2025-new .fusion-title-heading h5,
body.iy-site-2025-new .fusion-title-heading h6,
body.iy-site-2025-new .fusion-column-wrapper h1,
body.iy-site-2025-new .fusion-column-wrapper h2,
body.iy-site-2025-new .fusion-column-wrapper h3,
body.iy-site-2025-new .fusion-builder-column h1,
body.iy-site-2025-new .fusion-builder-column h2,
body.iy-site-2025-new .fusion-builder-column h3,
body.iy-site-2025-new .fusion-layout-column h1,
body.iy-site-2025-new .fusion-layout-column h2,
body.iy-site-2025-new .fusion-layout-column h3 {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
    white-space: normal !important;
}

/* Override all Avada responsive typography */
.single-product .product_title.fusion-responsive-typography-calculated,
.single-product .product_title[data-fontsize],
.single-product .product_title[style*="fontSize"] {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    /* Ensure text wrapping is enabled */
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* ========================================
   WOOCOMMERCE PRODUCT TABS STYLING
   ======================================== */

/* Style the tabs that replace product meta */
.woocommerce-tabs-replacement {
    margin: 20px 0;
    clear: both;
}

.woocommerce-tabs-replacement .woocommerce-tabs {
    margin: 0;
}

.woocommerce-tabs-replacement .woocommerce-tabs ul.tabs {
    margin: 0 0 1em 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
}

.woocommerce-tabs-replacement .woocommerce-tabs ul.tabs li {
    display: inline-block;
    margin: 0;
    position: relative;
    list-style: none;
    cursor: pointer;
    z-index: 5;
}

.woocommerce-tabs-replacement .woocommerce-tabs ul.tabs li:hover {
    background-color: transparent;
}

.woocommerce-tabs-replacement .woocommerce-tabs ul.tabs li a {
    padding: 10px 15px;
    display: block;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.woocommerce-tabs-replacement .woocommerce-tabs ul.tabs li a:hover {
    color: #333;
    background-color: #f5f5f5;
    text-decoration: none;
}

.woocommerce-tabs-replacement .woocommerce-tabs ul.tabs li a:focus {
    outline: none;
    text-decoration: none;
}

.woocommerce-tabs-replacement .woocommerce-tabs ul.tabs li a:active {
    text-decoration: none;
}

.woocommerce-tabs-replacement .woocommerce-tabs ul.tabs li.active a {
    color: #333;
    border-bottom-color: #333;
    background-color: #f9f9f9;
}

.woocommerce-tabs-replacement .woocommerce-tabs .panel {
    margin: 0 0 2em 0;
    padding: 15px 0;
    display: none; /* Hidden by default */
}

.woocommerce-tabs-replacement .woocommerce-tabs .panel:first-child {
    display: block; /* Show first panel by default */
}

.woocommerce-tabs-replacement .woocommerce-tabs .panel h2 {
    margin: 0 0 1em 0;
    font-size: 1.2em;
}

/* Ensure tab content is visible when active */
.woocommerce-tabs-replacement .woocommerce-tabs .panel.active {
    display: block !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .woocommerce-tabs-replacement {
        margin: 30px 0;
    }
}

/* ========================================
   PRODUCT BORDER SEPARATOR STYLING
   ======================================== */

/* DISABLED: Green wavy lines removed per user request */
/* These were CSS-generated wavy lines using SVG backgrounds */
/* Wave section separators (fusion-section-separator) are separate and should remain visible */
/*
.product-border,
.fusion-separator,
.sep-,
.product-border.fusion-separator,
.fusion-separator.sep-,
.product-border.sep-,
.product-border.fusion-separator.sep-,
[class*="product-border"],
[class*="fusion-separator"],
[class*="sep-"] {
    background: none !important;
    border: none !important;
    height: 20px !important;
    position: relative !important;
    overflow: hidden !important;
}

.product-border::before,
.fusion-separator::before,
.sep-::before,
.product-border.fusion-separator::before,
.fusion-separator.sep-::before,
.product-border.sep-::before,
.product-border.fusion-separator.sep-::before,
[class*="product-border"]::before,
[class*="fusion-separator"]::before,
[class*="sep-"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,10 Q25,0 50,10 T100,10' stroke='%234CAF50' stroke-width='3' fill='none'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 100px 20px;
    transform: translateY(-50%);
    z-index: 1;
}

.single-product div[class*="separator"],
.single-product div[class*="border"],
.single-product hr,
.single-product .fusion-separator {
    background: none !important;
    border: none !important;
    height: 20px !important;
    position: relative !important;
    overflow: hidden !important;
}

.single-product div[class*="separator"]::before,
.single-product div[class*="border"]::before,
.single-product hr::before,
.single-product .fusion-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,10 Q25,0 50,10 T100,10' stroke='%234CAF50' stroke-width='3' fill='none'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 100px 20px;
    transform: translateY(-50%);
    z-index: 1;
}
*/

/* ========================================
   COMPLETELY REMOVE GREEN WAVY LINES
   ======================================== */

/* Remove wavy lines from all product-border elements */
.product-border,
.product-border::before,
.product-border::after,
[class*="product-border"],
[class*="product-border"]::before,
[class*="product-border"]::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Remove wavy lines from fusion-separator (but NOT fusion-section-separator) */
.single-product .fusion-separator:not(.fusion-section-separator),
.single-product .fusion-separator:not(.fusion-section-separator)::before,
.single-product .fusion-separator:not(.fusion-section-separator)::after,
.single-product .sep-:not(.fusion-section-separator),
.single-product .sep-:not(.fusion-section-separator)::before,
.single-product .sep-:not(.fusion-section-separator)::after,
.single-product div[class*="separator"]:not(.fusion-section-separator)::before,
.single-product div[class*="border"]:not(.fusion-section-separator)::before {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
}

/* Explicitly remove green wavy lines from ALL separators (except section separators which are the decorative waves) */
.single-product div[class*="separator"]:not(.fusion-section-separator):not([class*="section-separator"])::before,
.single-product div[class*="border"]:not(.fusion-section-separator):not([class*="section-separator"])::before,
.single-product hr::before,
.single-product .fusion-separator:not(.fusion-section-separator):not([class*="section-separator"])::before {
    content: none !important;
    background-image: none !important;
    background: none !important;
    display: none !important;
}

/* Remove wavy lines globally for these selectors on product pages */
.single-product .product-border,
.single-product .product-border::before,
.single-product .product-border::after,
.single-product [class*="product-border"],
.single-product [class*="product-border"]::before,
.single-product [class*="product-border"]::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    max-width: 0 !important;
}


/* ========================================
   RELATED PRODUCTS BACKGROUND FIX
   ======================================== */

/* Fix related products section background */
.woocommerce .related,
.woocommerce .upsells,
.woocommerce .cross-sells,
.woocommerce-related-products,
.related-products,
.upsells-products,
.cross-sells-products,
[class*="related"],
[class*="upsells"],
[class*="cross-sells"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Target specific Avada related products containers */
.fusion-woo-related-products,
.fusion-woo-upsells,
.fusion-woo-cross-sells,
.fusion-woo-related,
.fusion-woo-upsell,
.fusion-woo-cross-sell {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Target any container that might have a black background */
.single-product .fusion-woo-related-products,
.single-product .fusion-woo-upsells,
.single-product .fusion-woo-cross-sells,
.single-product .woocommerce .related,
.single-product .woocommerce .upsells,
.single-product .woocommerce .cross-sells {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Target the section wrapper that might have the black background */
.single-product .fusion-woo-related-products .fusion-builder-row,
.single-product .fusion-woo-upsells .fusion-builder-row,
.single-product .fusion-woo-cross-sells .fusion-builder-row,
.single-product .fusion-woo-related-products .fusion-builder-column,
.single-product .fusion-woo-upsells .fusion-builder-column,
.single-product .fusion-woo-cross-sells .fusion-builder-column {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Maximum specificity for related products background */
html body .single-product .fusion-woo-related-products,
html body .single-product .fusion-woo-upsells,
html body .single-product .fusion-woo-cross-sells,
html body .single-product .woocommerce .related,
html body .single-product .woocommerce .upsells,
html body .single-product .woocommerce .cross-sells,
html body .single-product [class*="related"],
html body .single-product [class*="upsells"],
html body .single-product [class*="cross-sells"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Target any dark/black backgrounds specifically */
.single-product .fusion-woo-related-products[style*="background"],
.single-product .fusion-woo-upsells[style*="background"],
.single-product .fusion-woo-cross-sells[style*="background"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Ensure related products text remains visible */
.single-product .fusion-woo-related-products h2,
.single-product .fusion-woo-upsells h2,
.single-product .fusion-woo-cross-sells h2,
.single-product .woocommerce .related h2,
.single-product .woocommerce .upsells h2,
.single-product .woocommerce .cross-sells h2 {
    color: #333 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ========================================
   RELATED PRODUCTS BACKGROUND FIX
   ======================================== */

/* Fix related products section background */
.woocommerce .related,
.woocommerce .upsells,
.woocommerce .cross-sells,
.woocommerce-related-products,
.related-products,
.upsells-products,
.cross-sells-products,
[class*="related"],
[class*="upsells"],
[class*="cross-sells"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Target specific Avada related products containers */
.fusion-woo-related-products,
.fusion-woo-upsells,
.fusion-woo-cross-sells,
.fusion-woo-related,
.fusion-woo-upsell,
.fusion-woo-cross-sell {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Target any container that might have a black background */
.single-product .fusion-woo-related-products,
.single-product .fusion-woo-upsells,
.single-product .fusion-woo-cross-sells,
.single-product .woocommerce .related,
.single-product .woocommerce .upsells,
.single-product .woocommerce .cross-sells {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Target the section wrapper that might have the black background */
.single-product .fusion-woo-related-products .fusion-builder-row,
.single-product .fusion-woo-upsells .fusion-builder-row,
.single-product .fusion-woo-cross-sells .fusion-builder-row,
.single-product .fusion-woo-related-products .fusion-builder-column,
.single-product .fusion-woo-upsells .fusion-builder-column,
.single-product .fusion-woo-cross-sells .fusion-builder-column {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Maximum specificity for related products background */
html body .single-product .fusion-woo-related-products,
html body .single-product .fusion-woo-upsells,
html body .single-product .fusion-woo-cross-sells,
html body .single-product .woocommerce .related,
html body .single-product .woocommerce .upsells,
html body .single-product .woocommerce .cross-sells,
html body .single-product [class*="related"],
html body .single-product [class*="upsells"],
html body .single-product [class*="cross-sells"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Target any dark/black backgrounds specifically */
.single-product .fusion-woo-related-products[style*="background"],
.single-product .fusion-woo-upsells[style*="background"],
.single-product .fusion-woo-cross-sells[style*="background"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Ensure related products text remains visible */
.single-product .fusion-woo-related-products h2,
.single-product .fusion-woo-upsells h2,
.single-product .fusion-woo-cross-sells h2,
.single-product .woocommerce .related h2,
.single-product .woocommerce .upsells h2,
.single-product .woocommerce .cross-sells h2 {
    color: #333 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ========================================
   FUSION PRODUCT WRAPPER WHITE BACKGROUND & BORDER REMOVAL
   ======================================== */

/* Set fusion product wrapper background to white and remove borders */
.products li.product .fusion-product-wrapper,
.products .fusion-product-wrapper {
    background-color: white !important;
    background: white !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Maximum specificity for fusion product wrapper */
.single-product .products li.product .fusion-product-wrapper,
.woocommerce .products li.product .fusion-product-wrapper,
.woocommerce-page .products li.product .fusion-product-wrapper,
.single-product .products .fusion-product-wrapper,
.woocommerce .products .fusion-product-wrapper,
.woocommerce-page .products .fusion-product-wrapper {
    background-color: white !important;
    background: white !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Target any product wrapper variations */
.products .product .fusion-product-wrapper,
.related .products .product .fusion-product-wrapper,
.upsells .products .product .fusion-product-wrapper,
.cross-sells .products .product .fusion-product-wrapper,
.related .products .fusion-product-wrapper,
.upsells .products .fusion-product-wrapper,
.cross-sells .products .fusion-product-wrapper {
    background-color: white !important;
    background: white !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ========================================
   CUSTOM DETAILS BUTTON STYLING
   ======================================== */

/* Custom details button with product title styling */
.custom-details-button.product-title-style-button {
    background: #e62905 !important;
    color: #ffffff !important;
    padding: 15px 20px !important;
    border-radius: 15px !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 10px auto !important;
    display: block !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    width: 250px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    min-width: 250px !important;
}

/* Hover effect for custom details button */
.custom-details-button.product-title-style-button:hover {
    background: #c41e04 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Container for custom details button */
.custom-details-button-container {
    margin: 15px 0 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* Ensure custom button appears below the original details button */
.product-buttons.custom-details-button-container {
    margin-top: 10px !important;
    clear: both !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* ========================================
   RELATED PRODUCT IMAGE BOUNCE EFFECT
   ======================================== */

/* Related product image hover bounce effect */
.related .products .product img,
.upsells .products .product img,
.cross-sells .products .product img,
.products .product img {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    cursor: pointer !important;
}

/* Bounce effect on hover - REDUCED ZOOM */
.related .products .product:hover img,
.upsells .products .product:hover img,
.cross-sells .products .product:hover img,
.products .product:hover img,
html body .related .products .product:hover img,
html body .upsells .products .product:hover img,
html body .cross-sells .products .product:hover img,
html body .products .product:hover img {
    transform: scale(1.02) translateY(-3px) !important;
    animation: gentleBounce 0.6s ease-in-out !important;
}

/* Bounce animation keyframes - REDUCED ZOOM */
@keyframes gentleBounce {
    0% { transform: scale(1) translateY(0); }
    25% { transform: scale(1.03) translateY(-5px); }
    50% { transform: scale(1.02) translateY(-3px); }
    75% { transform: scale(1.01) translateY(-1px); }
    100% { transform: scale(1.02) translateY(-3px); }
}

/* Ensure smooth transition back to normal state */
.related .products .product img,
.upsells .products .product img,
.cross-sells .products .product img,
.products .product img {
    will-change: transform !important;
}

/* Remove red borders from product links */
.related .products .product a,
.upsells .products .product a,
.cross-sells .products .product a,
.products .product a,
.related .products .product h3 a,
.upsells .products .product h3 a,
.cross-sells .products .product h3 a,
.products .product h3 a,
.related .products .product .product-title a,
.upsells .products .product .product-title a,
.cross-sells .products .product .product-title a,
.products .product .product-title a {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Remove any focus borders */
.related .products .product a:focus,
.upsells .products .product a:focus,
.cross-sells .products .product a:focus,
.products .product a:focus,
.related .products .product h3 a:focus,
.upsells .products .product h3 a:focus,
.cross-sells .products .product h3 a:focus,
.products .product h3 a:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove any hover borders */
.related .products .product a:hover,
.upsells .products .product a:hover,
.cross-sells .products .product a:hover,
.products .product a:hover,
.related .products .product h3 a:hover,
.upsells .products .product h3 a:hover,
.cross-sells .products .product h3 a:hover,
.products .product h3 a:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   SOCIAL SHARE BUTTONS STYLING
   ======================================== */

/* Remove red borders from social share buttons */
.social-share a,
.social-share button,
.share-buttons a,
.share-buttons button,
.woocommerce-share a,
.woocommerce-share button,
[class*="share"] a,
[class*="share"] button,
a[href*="facebook"],
a[href*="twitter"],
a[href*="pinterest"],
a[href*="email"],
a[href*="mailto"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove focus borders from social share buttons */
.social-share a:focus,
.social-share button:focus,
.share-buttons a:focus,
.share-buttons button:focus,
.woocommerce-share a:focus,
.woocommerce-share button:focus,
[class*="share"] a:focus,
[class*="share"] button:focus,
a[href*="facebook"]:focus,
a[href*="twitter"]:focus,
a[href*="pinterest"]:focus,
a[href*="email"]:focus,
a[href*="mailto"]:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove hover borders from social share buttons */
.social-share a:hover,
.social-share button:hover,
.share-buttons a:hover,
.share-buttons button:hover,
.woocommerce-share a:hover,
.woocommerce-share button:hover,
[class*="share"] a:hover,
[class*="share"] button:hover,
a[href*="facebook"]:hover,
a[href*="twitter"]:hover,
a[href*="pinterest"]:hover,
a[href*="email"]:hover,
a[href*="mailto"]:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   RELATED PRODUCT TITLE STYLING
   ======================================== */

/* Related product title font size and color */
.related .products .product h3,
.related .products .product .product-title,
.related .products .product .woocommerce-loop-product__title,
.related .products .product h3 a,
.related .products .product .product-title a,
.related .products .product .woocommerce-loop-product__title a {
    font-size: 0.9rem !important;
    color: #323844 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    text-align: center !important;
}

/* Ensure title links inherit the color */
.related .products .product h3 a,
.related .products .product .product-title a,
.related .products .product .woocommerce-loop-product__title a {
    color: #323844 !important;
    text-decoration: none !important;
}

/* Hover state for title links */
.related .products .product h3 a:hover,
.related .products .product .product-title a:hover,
.related .products .product .woocommerce-loop-product__title a:hover {
    color: #323844 !important;
    text-decoration: none !important;
}

/* Add class "enjoy-flavours-white-titles" to the Avada Title element (or section). Makes that title text white. */
.enjoy-flavours-white-titles,
.enjoy-flavours-white-titles .fusion-title-text,
.enjoy-flavours-white-titles h1,
.enjoy-flavours-white-titles h2,
.enjoy-flavours-white-titles h3,
.enjoy-flavours-white-titles a,
.enjoy-flavours-white-titles span {
    color: #ffffff !important;
}
.enjoy-flavours-white-titles a:hover {
    color: #ffffff !important;
}
/* Override Avada custom text color when class is on the Title element */
.enjoy-flavours-white-titles.awb-custom-text-color,
.enjoy-flavours-white-titles.awb-custom-text-hover-color,
.enjoy-flavours-white-titles .awb-custom-text-color,
.enjoy-flavours-white-titles .awb-custom-text-hover-color {
    color: #ffffff !important;
}
.enjoy-flavours-white-titles .awb-custom-text-color a,
.enjoy-flavours-white-titles .awb-custom-text-hover-color a {
    color: #ffffff !important;
}

/* When class is on a container: product titles inside (or following) also become white */
.enjoy-flavours-white-titles .products .product h3,
.enjoy-flavours-white-titles .products .product .product-title,
.enjoy-flavours-white-titles .products .product .woocommerce-loop-product__title,
.enjoy-flavours-white-titles .products .product h3 a,
.enjoy-flavours-white-titles .products .product .product-title a,
.enjoy-flavours-white-titles .products .product .woocommerce-loop-product__title a {
    color: #ffffff !important;
}
.enjoy-flavours-white-titles .products .product h3 a:hover,
.enjoy-flavours-white-titles .products .product .product-title a:hover,
.enjoy-flavours-white-titles .products .product .woocommerce-loop-product__title a:hover {
    color: #ffffff !important;
}

/* When class is on the library item (heading only), target related products that follow as sibling */
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product h3,
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product .product-title,
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product .woocommerce-loop-product__title,
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product h3 a,
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product .product-title a,
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product .woocommerce-loop-product__title a {
    color: #ffffff !important;
}
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product h3 a:hover,
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product .product-title a:hover,
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product .woocommerce-loop-product__title a:hover {
    color: #ffffff !important;
}
.single-product .enjoy-flavours-white-titles ~ * .related .products .product h3,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product .product-title,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product .woocommerce-loop-product__title,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product h3 a,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product .product-title a,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product .woocommerce-loop-product__title a {
    color: #ffffff !important;
}
.single-product .enjoy-flavours-white-titles ~ * .related .products .product h3 a:hover,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product .product-title a:hover,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product .woocommerce-loop-product__title a:hover {
    color: #ffffff !important;
}

/* Override Avada custom text color only on product titles inside this section (not elsewhere) */
.enjoy-flavours-white-titles .products .product h3.awb-custom-text-color,
.enjoy-flavours-white-titles .products .product h3.awb-custom-text-color a,
.enjoy-flavours-white-titles .products .product h3 a.awb-custom-text-color,
.enjoy-flavours-white-titles .products .product .product-title.awb-custom-text-color,
.enjoy-flavours-white-titles .products .product .product-title.awb-custom-text-color a,
.enjoy-flavours-white-titles .products .product .product-title a.awb-custom-text-color,
.enjoy-flavours-white-titles .products .product .woocommerce-loop-product__title.awb-custom-text-color,
.enjoy-flavours-white-titles .products .product .woocommerce-loop-product__title.awb-custom-text-color a,
.enjoy-flavours-white-titles .products .product .woocommerce-loop-product__title a.awb-custom-text-color,
.enjoy-flavours-white-titles .products .product h3.awb-custom-text-hover-color,
.enjoy-flavours-white-titles .products .product h3 a.awb-custom-text-hover-color,
.enjoy-flavours-white-titles .products .product .product-title.awb-custom-text-hover-color,
.enjoy-flavours-white-titles .products .product .product-title a.awb-custom-text-hover-color,
.enjoy-flavours-white-titles .products .product .woocommerce-loop-product__title.awb-custom-text-hover-color,
.enjoy-flavours-white-titles .products .product .woocommerce-loop-product__title a.awb-custom-text-hover-color {
    color: #ffffff !important;
}
.enjoy-flavours-white-titles .products .product h3 a.awb-custom-text-color:hover,
.enjoy-flavours-white-titles .products .product h3 a.awb-custom-text-hover-color:hover,
.enjoy-flavours-white-titles .products .product .product-title a.awb-custom-text-color:hover,
.enjoy-flavours-white-titles .products .product .product-title a.awb-custom-text-hover-color:hover,
.enjoy-flavours-white-titles .products .product .woocommerce-loop-product__title a.awb-custom-text-color:hover,
.enjoy-flavours-white-titles .products .product .woocommerce-loop-product__title a.awb-custom-text-hover-color:hover {
    color: #ffffff !important;
}
/* Awb overrides when products follow the library item (sibling) */
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product h3.awb-custom-text-color,
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product h3 a.awb-custom-text-color,
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product .product-title a.awb-custom-text-color,
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product .woocommerce-loop-product__title a.awb-custom-text-color,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product h3.awb-custom-text-color,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product h3 a.awb-custom-text-color,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product .product-title a.awb-custom-text-color,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product .woocommerce-loop-product__title a.awb-custom-text-color {
    color: #ffffff !important;
}
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product h3 a.awb-custom-text-color:hover,
.single-product .enjoy-flavours-white-titles ~ .fusion-woo-related-products .products .product .product-title a.awb-custom-text-color:hover,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product h3 a.awb-custom-text-color:hover,
.single-product .enjoy-flavours-white-titles ~ * .related .products .product .product-title a.awb-custom-text-color:hover {
    color: #ffffff !important;
}

/* Hide the old show_details_button completely */
.show_details_button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Hide any buttons with show_details_button class */
a.show_details_button,
button.show_details_button,
.show_details_button a,
.show_details_button button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ========================================
   META SLIDER CONTAINER WIDTH
   ======================================== */

/* Make the slider wider */
.metaslider, 
.metaslider .flexslider {
  max-width: 1200px; /* or 100%, or whatever width you want */
  width: 100%; /* full width responsive */
  margin: 0 auto; /* keep it centered */
  overflow: hidden; /* clearfix for floated elements */
}

/* ========================================
   META SLIDER CAPTION FONT STYLING
   ======================================== */

/* FoodTruck font removed - using Lato from Google Fonts instead */

/* Apply the font to all Smart Slider layers */
.n2-ss-layer-content,
.n2-ss-layer-content p,
.n2-ss-layer-content h1,
.n2-ss-layer-content h2,
.n2-ss-layer-content h3,
.n2-ss-layer-content h4,
.n2-ss-layer-content h5,
.n2-ss-layer-content h6,
.n2-ss-layer-content span,
.n2-ss-layer-content div,
.n2-ss-layer-content strong,
.n2-ss-layer-content b,
.n2-ss-layer-content em,
.n2-ss-layer-content i:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]) {
    font-family: "Lato", Arial, sans-serif !important;
    font-weight: normal !important;
}

/* Also target Smart Slider text elements more broadly */
.n2-ss-layer-text,
.n2-ss-layer-text p,
.n2-ss-layer-text h1,
.n2-ss-layer-text h2,
.n2-ss-layer-text h3,
.n2-ss-layer-text span,
.n2-ss-layer-text div {
    font-family: "Lato", Arial, sans-serif !important;
}

/* Target any element with Smart Slider classes */
[class*="n2-ss-layer"],
[class*="n2-ss-layer"] *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]),
.n2-ss-layer,
.n2-ss-layer *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]),
.n2-ss-layer-content,
.n2-ss-layer-content *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]),
.n2-ss-layer-text,
.n2-ss-layer-text *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]) {
    font-family: "Lato", Arial, sans-serif !important;
}

/* Force font on all text elements in Smart Slider */
.n2-ss-layer p,
.n2-ss-layer h1,
.n2-ss-layer h2,
.n2-ss-layer h3,
.n2-ss-layer h4,
.n2-ss-layer h5,
.n2-ss-layer h6,
.n2-ss-layer span,
.n2-ss-layer div,
.n2-ss-layer strong,
.n2-ss-layer b,
.n2-ss-layer em,
.n2-ss-layer i:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]),
.n2-ss-layer a {
    font-family: "Lato", Arial, sans-serif !important;
}

/* Apply Lato font to yogurt pot labels */
.yogurt-pot__label,
.yogurt-pot__label p,
.yogurt-pot__label h1,
.yogurt-pot__label h2,
.yogurt-pot__label h3,
.yogurt-pot__label h4,
.yogurt-pot__label h5,
.yogurt-pot__label h6,
.yogurt-pot__label span,
.yogurt-pot__label div,
.yogurt-pot__label strong,
.yogurt-pot__label b,
.yogurt-pot__label em,
.yogurt-pot__label i:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]),
.yogurt-pot__label a {
    font-family: "Lato", Arial, sans-serif !important;
    font-size: 1.1rem !important;
    line-height: 1.1rem !important;
}

/* More specific targeting for yogurt pot labels */
div.yogurt-pot__label,
div.yogurt-pot__label *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]) {
    font-family: "Lato", Arial, sans-serif !important;
    font-size: 1.1rem !important;
    line-height: 1.1rem !important;
}

/* Ultra-specific targeting with higher specificity */
body .yogurt-pot__label,
body .yogurt-pot__label *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]),
html body .yogurt-pot__label,
html body .yogurt-pot__label *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]) {
    font-family: "Lato", Arial, sans-serif !important;
    font-size: 1.1rem !important;
    line-height: 1.1rem !important;
}

/* Remove green curved lines - clean fusion title styling */
.fusion-title .title-sep,
.fusion-title .title-sep-container,
.fusion-title.sep-underline,
.fusion-title .title-sep.sep-solid,
.fusion-title .title-sep.sep-single,
.fusion-title .title-sep.sep-double {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    border: none !important;
    background: none !important;
}

/* Clean fusion title styling without brush effects */
.fusion-title {
    text-align: center !important;
    width: 100% !important;
}

.fusion-title h1,
.fusion-title h2,
.fusion-title h3,
.fusion-title h4,
.fusion-title h5,
.fusion-title h6 {
    position: relative !important;
    display: inline-block !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 10px 20px !important;
    color: #333333 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-family: "Lato", Arial, sans-serif !important;
}

/* Remove all pseudo-element brush effects */
.fusion-title h1::before,
.fusion-title h2::before,
.fusion-title h3::before,
.fusion-title h4::before,
.fusion-title h5::before,
.fusion-title h6::before,
.fusion-title h1::after,
.fusion-title h2::after,
.fusion-title h3::after,
.fusion-title h4::after,
.fusion-title h5::after,
.fusion-title h6::after {
    display: none !important;
    content: none !important;
}

/* ========================================
   BRUSH STROKE EFFECT - EXACT STACK OVERFLOW SOLUTION
   ======================================== */

/* Create wrapper */
.brush-wrap {
    position: relative;
    display: inline-block;
    padding: 1.5rem 2rem; /* Padding for text spacing - brush stroke width controlled by ::before */
}

/* static brush stroke (no animation) - animation removed */

/* authentic brush stroke background using SVG clipPath */
.brush-wrap:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 50%; /* Reduced width to 50% to make brush stroke much narrower */
    top: 0;
    left: 25%; /* Center the narrower brush stroke (100% - 50% = 50%, divided by 2 = 25%) */
    background: #9dca47; /* Green brush stroke background to match Irish Yogurts branding */
    z-index: -1;
    clip-path: url(#brush-stroke); /* using the new SVG brush stroke shape from functions.php */
}

.brush-wrap p,
.brush-wrap h1,
.brush-wrap h2,
.brush-wrap h3 {
    font-size: 2.5rem;
    text-transform: uppercase;
    margin: 0;
    color: white !important;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.05em;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.3));
    transition: none !important; /* Prevent color transitions */
}

/* Prevent hover color changes */
.brush-wrap p:hover,
.brush-wrap h1:hover,
.brush-wrap h2:hover,
.brush-wrap h3:hover,
.brush-wrap:hover p,
.brush-wrap:hover h1,
.brush-wrap:hover h2,
.brush-wrap:hover h3 {
    color: white !important;
    transition: none !important;
}

/* Alternative color variants */
.brush-wrap--red:before {
    background: #e62905 !important;
}

.brush-wrap--green:before {
    background: #9dca47 !important;
}

.brush-wrap--black:before {
    background: black !important;
}

.brush-wrap--white:before {
    background: white !important;
}

/* Responsive sizing */
@media (max-width: 768px) {
    .brush-wrap {
        padding: 1rem 0;
    }
    
    .brush-wrap:before {
        width: 60%; /* Slightly wider on tablet for better fit */
        left: 20%; /* Re-center */
    }
    
    .brush-wrap p,
    .brush-wrap h1,
    .brush-wrap h2,
    .brush-wrap h3 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .brush-wrap {
        padding: 0.8rem 0;
    }
    
    .brush-wrap:before {
        width: 85%; /* Much wider on mobile for better visibility */
        left: 7.5%; /* Re-center (100% - 85% = 15%, divided by 2 = 7.5%) */
    }
    
    .brush-wrap p,
    .brush-wrap h1,
    .brush-wrap h2,
    .brush-wrap h3 {
        font-size: 1.5rem;
    }
}

/* Special green color for "Our Products" section - more specific targeting */
.fusion-title h1::before,
.fusion-title h2::before {
    background: #9dca47 !important;
}

.fusion-title h1::after,
.fusion-title h2::after {
    background: rgba(157, 202, 71, 0.7) !important;
}

/* Target the first section specifically - "Our Products" */
.fusion-title:first-of-type h1::before,
.fusion-title:first-of-type h2::before,
.fusion-title:first-of-type h3::before,
.fusion-title:first-of-type h4::before,
.fusion-title:first-of-type h5::before,
.fusion-title:first-of-type h6::before {
    background: #9dca47 !important;
}

.fusion-title:first-of-type h1::after,
.fusion-title:first-of-type h2::after,
.fusion-title:first-of-type h3::after,
.fusion-title:first-of-type h4::after,
.fusion-title:first-of-type h5::after,
.fusion-title:first-of-type h6::after {
    background: rgba(157, 202, 71, 0.7) !important;
}

/* Force green for all h1 and h2 elements (most likely to be "Our Products") */
.fusion-title h1::before,
.fusion-title h2::before {
    background: #9dca47 !important;
}

.fusion-title h1::after,
.fusion-title h2::after {
    background: rgba(157, 202, 71, 0.7) !important;
}

/* Ensure text is visible over the background */
.fusion-title h1,
.fusion-title h2,
.fusion-title h3,
.fusion-title h4,
.fusion-title h5,
.fusion-title h6 {
    color: #333333 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-family: "Lato", Arial, sans-serif !important;
}

/* White text for green "Our Products" background */
.fusion-title h1,
.fusion-title h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Import Google Fonts for food truck/fun styling */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Bungee:wght@400&family=Luckiest+Guy:wght@400&family=Inter:wght@400;600;700;800&family=Roboto:wght@300;400;500;700&family=Open+Sans:wght@300;400;600;700&family=Creepster:wght@400&family=Nosifer:wght@400&family=Ribeye:wght@400&family=Righteous:wght@400&display=swap');

/* Meta Slider Caption Styling - Larger text for better visibility */
.metaslider .caption,
.metaslider .caption-wrap .caption,
.metaslider .flexslider .caption-wrap .caption,
.metaslider .nivoSlider .caption,
.metaslider .coin-slider .caption,
.metaslider .rslides .caption,
.metaslider .caption div,
.metaslider .caption-wrap .caption div,
.metaslider .flexslider .caption-wrap .caption div,
.metaslider .nivoSlider .caption div,
.metaslider .coin-slider .caption div,
.metaslider .rslides .caption div {
    font-family: 'Lato', 'Righteous', 'Creepster', 'Ribeye', 'Bungee', 'Arial Black', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 900 !important; /* Maximum boldness like Onken */
    font-size: 4.5rem !important; /* Much larger text */
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3), 4px 4px 0px rgba(0, 0, 0, 0.1) !important;
    color: #ffffff !important; /* White text as requested */
    line-height: 1.1 !important;
    text-align: left !important;
    /* Ensure visibility */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
    position: relative !important;
    /* Clean styling like Onken headlines - no borders or backgrounds */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    animation: none !important;
}

/* Animation for food truck effect */
@keyframes gentle-bounce {
    0%, 100% { transform: rotate(-1deg) translateY(0px); }
    50% { transform: rotate(-1deg) translateY(-3px); }
}

/* Reset Meta Slider container to normal */
.metaslider,
.metaslider .flexslider,
.metaslider .nivoSlider,
.metaslider .coin-slider,
.metaslider .rslides,
div[id*="metaslider_container"] {
    position: relative !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Keep images at normal size */
.metaslider img,
.metaslider .flexslider img,
.metaslider .nivoSlider img,
.metaslider .coin-slider img,
.metaslider .rslides img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* Target the slider captions */
.metaslider .caption-wrap,
.metaslider .flexslider .caption-wrap,
.metaslider .nivoSlider .caption-wrap,
.metaslider .coin-slider .caption-wrap,
.metaslider .rslides .caption-wrap {
    position: relative !important; /* change to relative for proper layout */
    float: left !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 35% !important; /* left column for text */
    padding: 30px !important;
    box-sizing: border-box !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important; /* remove dark grey background */
    color: #ffffff !important; /* white text */
    text-align: left !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    border-radius: 0 !important; /* remove border radius */
    z-index: 10 !important;
    
    /* Onken-style font styling directly on caption-wrap */
    font-family: 'Lato', 'Righteous', 'Creepster', 'Ribeye', 'Bungee', 'Arial Black', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.1 !important;
}

/* Ensure caption text wraps properly */
.metaslider .caption-wrap .caption,
.metaslider .flexslider .caption-wrap .caption,
.metaslider .nivoSlider .caption-wrap .caption,
.metaslider .coin-slider .caption-wrap .caption,
.metaslider .rslides .caption-wrap .caption,
.metaslider .caption-wrap div,
.metaslider .flexslider .caption-wrap div,
.metaslider .nivoSlider .caption-wrap div,
.metaslider .coin-slider .caption-wrap div,
.metaslider .rslides .caption-wrap div {
    width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* Onken-style font styling */
    font-family: 'Lato', 'Righteous', 'Creepster', 'Ribeye', 'Bungee', 'Arial Black', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3), 4px 4px 0px rgba(0, 0, 0, 0.1) !important;
    line-height: 0.9 !important;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.1) !important;
}

/* Force Onken-style font on all caption content */
.metaslider * {
    font-family: 'Lato', 'Righteous', 'Creepster', 'Ribeye', 'Bungee', 'Arial Black', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #ffffff !important;
}

/* Adjust the image to float right beside the text */
.metaslider .slides img,
.metaslider .flexslider .slides img,
.metaslider .nivoSlider .slides img,
.metaslider .coin-slider .slides img,
.metaslider .rslides .slides img {
    width: 65% !important; /* right column for image */
    height: auto !important;
    display: block !important;
    float: right !important; /* float right to sit beside text */
}

/* Responsive font sizing for Meta Slider captions */
@media (max-width: 768px) {
    
    .metaslider .caption,
    .metaslider .caption-wrap .caption,
    .metaslider .flexslider .caption-wrap .caption,
    .metaslider .nivoSlider .caption,
    .metaslider .coin-slider .caption,
    .metaslider .rslides .caption,
    .metaslider .caption div,
    .metaslider .caption-wrap .caption div,
    .metaslider .flexslider .caption-wrap .caption div,
    .metaslider .nivoSlider .caption div,
    .metaslider .coin-slider .caption div,
    .metaslider .rslides .caption div {
        font-size: 2rem !important; /* Onken-style tablet text */
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        line-height: 1.1 !important;
        padding: 15px !important;
        background: transparent !important;
        border: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

@media (max-width: 480px) {
    /* Stack vertically on mobile */
        .metaslider .caption-wrap,
        .metaslider .flexslider .caption-wrap,
        .metaslider .nivoSlider .caption-wrap,
        .metaslider .coin-slider .caption-wrap,
        .metaslider .rslides .caption-wrap {
            position: absolute !important;
            top: auto !important;
            bottom: 20px !important;
            left: 20px !important;
            right: 20px !important;
            transform: none !important;
            width: auto !important;
            padding: 20px !important;
        }
    
        .metaslider .slides img,
        .metaslider .flexslider .slides img,
        .metaslider .nivoSlider .slides img,
        .metaslider .coin-slider .slides img,
        .metaslider .rslides .slides img {
            float: none !important;
            width: auto !important;
            max-width: 100% !important;
            height: auto !important;
        }
    
    .metaslider .caption,
    .metaslider .caption-wrap .caption,
    .metaslider .flexslider .caption-wrap .caption,
    .metaslider .nivoSlider .caption,
    .metaslider .coin-slider .caption,
    .metaslider .rslides .caption,
    .metaslider .caption div,
    .metaslider .caption-wrap .caption div,
    .metaslider .flexslider .caption-wrap .caption div,
    .metaslider .nivoSlider .caption div,
    .metaslider .coin-slider .caption div,
    .metaslider .rslides .caption div {
        font-size: 2.8rem !important; /* Larger mobile text */
        letter-spacing: -0.01em !important;
        padding: 12px !important;
        background: transparent !important;
        border: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Additional styling for specific Meta Slider themes */
.metaslider.ms-theme-bitono .caption,
.metaslider.ms-theme-clarity .caption,
.metaslider.ms-theme-architekt .caption,
.metaslider.ms-theme-blend .caption,
.metaslider.ms-theme-cubic .caption,
.metaslider.ms-theme-draxler .caption,
.metaslider.ms-theme-disjoint .caption,
.metaslider.ms-theme-outline .caption,
.metaslider.ms-theme-precognition .caption,
.metaslider.ms-theme-bitono .caption div,
.metaslider.ms-theme-clarity .caption div,
.metaslider.ms-theme-architekt .caption div,
.metaslider.ms-theme-blend .caption div,
.metaslider.ms-theme-cubic .caption div,
.metaslider.ms-theme-draxler .caption div,
.metaslider.ms-theme-disjoint .caption div,
.metaslider.ms-theme-outline .caption div,
.metaslider.ms-theme-precognition .caption div {
    font-family: 'Lato', 'Righteous', 'Creepster', 'Ribeye', 'Bungee', 'Arial Black', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 3.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    text-shadow: none !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    text-align: left !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    animation: none !important;
}

/* ========================================
   CUSTOM RECIPE INDEX STYLING
   ======================================== */

/* Recipe Index Container */
.custom-recipe-index {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

/* Recipe Filters */
.recipe-filters {
    margin-bottom: 30px;
    text-align: center;
}

.recipe-filters h3 {
    color: #323844;
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 600;
}

/* Recipe Search */
.recipe-search {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    gap: 10px;
    flex-wrap: wrap;
}

.recipe-search-input {
    padding: 12px 16px;
    border: 2px solid #e9ecef !important;
    border-radius: 25px !important;
    font-size: 1rem;
    width: 300px;
    max-width: 100%;
    outline: none;
    transition: all 0.3s ease;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
}

.recipe-search-input:focus {
    border-color: #008c4a;
    box-shadow: 0 0 0 3px rgba(0, 140, 74, 0.1);
}

.recipe-search-input::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

.recipe-search-input::-webkit-input-placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

.recipe-search-input::-moz-placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

.recipe-search-input:-ms-input-placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

.recipe-search-button,
.recipe-search-clear {
    padding: 12px 16px;
    border: 2px solid #008c4a !important;
    background: #008c4a !important;
    color: #ffffff !important;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recipe-search-button:hover,
.recipe-search-clear:hover {
    background: #006b3a;
    border-color: #006b3a;
    transform: translateY(-1px);
}

.recipe-search-clear {
    background: #6c757d;
    border-color: #6c757d;
}

.recipe-search-clear:hover {
    background: #5a6268;
    border-color: #5a6268;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.filter-btn {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    color: #323844;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-btn:hover,
.filter-btn.active {
    background: #008c4a !important;
    color: #ffffff !important;
    border-color: #008c4a !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 140, 74, 0.3) !important;
}

/* Recipe Grid */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.recipe-grid.list {
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Recipe Card */
.recipe-card {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 1;
    transform: scale(1);
}

.recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.recipe-card.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

/* Recipe Image */
.recipe-image {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.recipe-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.recipe-card:hover .recipe-image img {
    transform: scale(1.05);
}

.recipe-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.placeholder-icon {
    font-size: 3rem;
    opacity: 0.5;
}

/* Recipe Content */
.recipe-content {
    padding: 20px;
}

.recipe-title {
    margin: 0 0 15px 0;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
}

.recipe-title a {
    color: #323844;
    text-decoration: none;
    transition: color 0.3s ease;
}

.recipe-title a:hover {
    color: #008c4a !important;
}

/* Force override for filter buttons */
.custom-recipe-index .filter-btn.active,
.custom-recipe-index .filter-btn:hover {
    background: #008c4a !important;
    color: #ffffff !important;
    border-color: #008c4a !important;
    box-shadow: 0 4px 8px rgba(0, 140, 74, 0.3) !important;
}

/* Force override for recipe title links */
.custom-recipe-index .recipe-title a:hover {
    color: #008c4a !important;
}

/* Force override for search button */
.custom-recipe-index .recipe-search-button {
    background: #008c4a !important;
    border-color: #008c4a !important;
    color: #ffffff !important;
}

/* WPRM Recipe Meta Container Pill Background Color */
.wprm-recipe-meta-container-pill {
    background-color: #008c4a !important;
}

/* WPRM Meadow Main Background Color */
.wprm-recipe-container,
.wprm-recipe,
.wprm-recipe-card {
    --meadow-main-background-color: #78b500 !important;
    border-radius: 20px !important;
}

/* Remove borders from nested elements first */
.wprm-recipe-container .wprm-recipe,
.wprm-recipe-container .wprm-recipe-card,
.wprm-recipe .wprm-recipe-card,
.wprm-recipe-card .wprm-recipe-card {
    border: none !important;
}

/* Apply border only to outermost recipe container */
.wprm-recipe-container {
    border: 1px solid #000000 !important;
}

/* Remove bottom padding/margin to eliminate white space */
.wprm-recipe-container,
.wprm-recipe,
.wprm-recipe-card {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.wprm-recipe-single-container {
    padding-bottom: 0 !important;
}

/* Ensure background extends to bottom */
.wprm-recipe-container {
    overflow: hidden !important;
}

/* Apply Lato font to fusion title headings */
/* Fix text wrapping for ALL fusion-title-heading variants */
.fusion-title-heading,
.fusion-title-heading *,
.fusion-title-heading h1,
.fusion-title-heading h2,
.fusion-title-heading h3,
.fusion-title-heading h4,
.fusion-title-heading h5,
.fusion-title-heading h6,
.fusion-title-heading.title-heading-left,
.fusion-title-heading.title-heading-left *,
.fusion-title-heading.title-heading-left h1,
.fusion-title-heading.title-heading-left h2,
.fusion-title-heading.title-heading-left h3,
.fusion-title-heading.title-heading-center,
.fusion-title-heading.title-heading-center *,
.fusion-title-heading.title-heading-center h1,
.fusion-title-heading.title-heading-center h2,
.fusion-title-heading.title-heading-center h3,
.fusion-title-heading.title-heading-center h4,
.fusion-title-heading.title-heading-center h5,
.fusion-title-heading.title-heading-center h6,
.fusion-title-heading.title-heading-center span,
.fusion-title-heading.title-heading-center div,
.fusion-title-heading.title-heading-center p,
body .fusion-title-heading,
body .fusion-title-heading *,
body .fusion-title-heading.title-heading-center,
body .fusion-title-heading.title-heading-center *,
html body .fusion-title-heading,
html body .fusion-title-heading *,
html body .fusion-title-heading.title-heading-center,
html body .fusion-title-heading.title-heading-center * {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.fusion-title-heading.title-heading-center,
.fusion-title-heading.title-heading-center *,
.fusion-title-heading.title-heading-center h1,
.fusion-title-heading.title-heading-center h2,
.fusion-title-heading.title-heading-center h3,
.fusion-title-heading.title-heading-center h4,
.fusion-title-heading.title-heading-center h5,
.fusion-title-heading.title-heading-center h6,
.fusion-title-heading.title-heading-center span,
.fusion-title-heading.title-heading-center div,
.fusion-title-heading.title-heading-center p,
body .fusion-title-heading.title-heading-center,
body .fusion-title-heading.title-heading-center *,
html body .fusion-title-heading.title-heading-center,
html body .fusion-title-heading.title-heading-center * {
    font-family: "Lato", Arial, sans-serif !important;
}

/* Recipe Meta */
.recipe-meta {
    display: inline-block;
    background: #f8f9fa;
    color: #6c757d;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    margin: 0 8px 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recipe-course {
    background: #008c4a;
    color: #ffffff;
}

.recipe-cuisine {
    background: #28a745;
    color: #ffffff;
}

.recipe-servings {
    background: #17a2b8;
    color: #ffffff;
}

.recipe-time {
    background: #ffc107;
    color: #212529;
}

/* Recipe Excerpt */
.recipe-excerpt {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 15px 0;
}

/* Recipe Categories */
.recipe-categories {
    margin-top: 15px;
}

.recipe-category {
    display: inline-block;
    background: #e9ecef;
    color: #495057;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin: 0 5px 5px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Recipe Pagination */
.recipe-pagination {
    text-align: center;
    margin-top: 40px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.recipe-pagination .page-numbers {
    display: inline-block !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    background: #f8f9fa !important;
    color: #323844 !important;
    text-decoration: none !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
    white-space: nowrap !important;
}

.recipe-pagination .page-numbers:hover,
.recipe-pagination .page-numbers.current {
    background: #008c4a;
    color: #ffffff;
    border-color: #008c4a;
}

.recipe-pagination .page-numbers.prev,
.recipe-pagination .page-numbers.next {
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .custom-recipe-index {
        padding: 15px;
    }
    
    .recipe-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .filter-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .filter-btn {
        width: 200px;
        margin-bottom: 10px;
    }
    
    .recipe-content {
        padding: 15px;
    }
    
    .recipe-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .recipe-image {
        height: 150px;
    }
    
    .recipe-content {
        padding: 12px;
    }
    
    .recipe-meta {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
}

/* ========================================
   MOBILE HEADER TRANSPARENCY FIXES
   ======================================== */

/* Override mobile header background color for theme builder header */
:root {
    --mobile_header_bg_color: transparent !important;
}



/* ========================================
   COMPLETE FUSION SEPARATOR REMOVAL
   ======================================== */

/* DISABLED: Allow separators to show on product pages */
/* Remove fusion separator borders (but NOT section separators which are the waves) */
/* Override: Allow separators on product pages */
.single-product .fusion-separator:not(.fusion-section-separator),
.single-product .fusion-separator-border:not(.fusion-section-separator),
.single-product .fusion-separator-borders:not(.fusion-section-separator) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin: inherit !important;
    padding: inherit !important;
    border: inherit !important;
    background: inherit !important;
    background-image: inherit !important;
    background-color: inherit !important;
    box-shadow: inherit !important;
    outline: inherit !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
}

/* Global separator hiding - still applies to non-product pages */
body:not(.single-product) .fusion-separator:not(.fusion-section-separator),
body:not(.single-product) .fusion-separator-border:not(.fusion-section-separator),
body:not(.single-product) .fusion-separator-borders:not(.fusion-section-separator) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Allow pseudo-elements on product pages, hide on others */
body:not(.single-product) .fusion-separator:not(.fusion-section-separator)::before,
body:not(.single-product) .fusion-separator:not(.fusion-section-separator)::after,
body:not(.single-product) .fusion-separator-border:not(.fusion-section-separator)::before,
body:not(.single-product) .fusion-separator-border:not(.fusion-section-separator)::after,
body:not(.single-product) .fusion-separator-borders:not(.fusion-section-separator)::before,
body:not(.single-product) .fusion-separator-borders:not(.fusion-section-separator)::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Target specific Avada fusion separator classes - allow on product pages */
.single-product .fusion-separator.fusion-separator-border:not(.fusion-section-separator),
.single-product .fusion-separator-border.fusion-separator:not(.fusion-section-separator),
.single-product .fusion-separator-borders.fusion-separator:not(.fusion-section-separator),
.single-product .fusion-separator.fusion-separator-borders:not(.fusion-section-separator) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin: inherit !important;
    padding: inherit !important;
    border: inherit !important;
    background: inherit !important;
    background-image: inherit !important;
    background-color: inherit !important;
    box-shadow: inherit !important;
    outline: inherit !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
}

/* Hide on non-product pages */
body:not(.single-product) .fusion-separator.fusion-separator-border:not(.fusion-section-separator),
body:not(.single-product) .fusion-separator-border.fusion-separator:not(.fusion-section-separator),
body:not(.single-product) .fusion-separator-borders.fusion-separator:not(.fusion-section-separator),
body:not(.single-product) .fusion-separator.fusion-separator-borders:not(.fusion-section-separator) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* DISABLED: Allow separators to show on product pages to match reference page format */
/* Maximum specificity for complete removal on product pages (but not section separators) */
/*
html body .single-product .fusion-separator:not(.fusion-section-separator),
html body .single-product .fusion-separator-border:not(.fusion-section-separator),
html body .single-product .fusion-separator-borders:not(.fusion-section-separator) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}
*/

/* ========================================
   FORCE CONTENT VISIBILITY ON PRODUCT PAGES
   ======================================== */

/* Prevent content section from collapsing on product pages */
.single-product #content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative !important;
}

.single-product .post-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative !important;
}

.single-product .woocommerce {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
}

/* Ensure product content is always visible */
.single-product .product {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.single-product .summary.entry-summary {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========================================
   ENSURE WAVE SECTION SEPARATORS DISPLAY ON PRODUCT PAGES
   ======================================== */

/* Force wave section separators to display on product pages */
.single-product .fusion-section-separator,
.single-product .section-separator,
.single-product .fusion-section-separator.waves-opacity,
.single-product .section-separator.waves-opacity,
.single-product .fusion-section-separator-1,
.single-product .fusion-section-separator-2,
.single-product .fusion-section-separator-3,
.single-product .fusion-section-separator-4,
.single-product .fusion-section-separator-5 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
}

/* Ensure wave separator SVG displays */
.single-product .fusion-section-separator .fusion-section-separator-svg,
.single-product .fusion-section-separator .fusion-section-separator-svg svg,
.single-product .fusion-section-separator .fusion-section-separator-spacer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
}

/* Ensure fullwidth containers for wave separators display */
.single-product .fusion-fullwidth:has(.fusion-section-separator),
.single-product .fusion-fullwidth .fusion-section-separator {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* Ensure Avada's global footer separator displays on product pages */
/* The global footer separator is part of Avada's footer layout and should render automatically */
/* This CSS ensures it's not hidden on product pages */
body.single-product #footer .fusion-section-separator,
body.single-product #footer .fusion-fullwidth .fusion-section-separator,
body.single-product footer .fusion-section-separator,
body.single-product footer .fusion-fullwidth .fusion-section-separator,
body.single-product .fusion-footer .fusion-section-separator,
body.single-product .fusion-footer-separator,
body.single-product .fusion-footer-separator .fusion-section-separator,
body.single-product .fusion-footer-separator .fusion-fullwidth .fusion-section-separator {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    overflow: visible !important;
}

/* Ensure footer separator SVG and spacer display */
body.single-product #footer .fusion-section-separator .fusion-section-separator-svg,
body.single-product #footer .fusion-section-separator .fusion-section-separator-svg svg,
body.single-product #footer .fusion-section-separator .fusion-section-separator-spacer,
body.single-product footer .fusion-section-separator .fusion-section-separator-svg,
body.single-product footer .fusion-section-separator .fusion-section-separator-svg svg,
body.single-product footer .fusion-section-separator .fusion-section-separator-spacer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
}

/* Ensure any fullwidth container with separator in footer displays */
/* Only target separators that are actually in the footer area */
body.single-product #footer .fusion-fullwidth:has(.fusion-section-separator),
body.single-product footer .fusion-fullwidth:has(.fusion-section-separator),
body.single-product .fusion-footer .fusion-fullwidth:has(.fusion-section-separator) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    overflow: visible !important;
}

/* Ensure footer separator displays if it's rendered before footer (but not inside #content) */
/* Only target separators that are outside the main content area - be very specific */
body.single-product #content ~ .fusion-fullwidth:has(.fusion-section-separator),
body.single-product section#content ~ .fusion-fullwidth:has(.fusion-section-separator) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    overflow: visible !important;
}


/* ========================================
   FIX HTML OVERFLOW/HEIGHT ISSUE ON PRODUCT PAGES
   ======================================== */

/* Note: Can't style html element via CSS selector with body class, so using JavaScript fix */
/* This CSS is a backup - JavaScript handles the main fix */

/* Ensure body can scroll on product pages */
body.single-product {
    overflow-y: scroll !important;
    overflow-x: visible !important;
    height: auto !important;
}

/* Force wrapper and main containers to show full height */
body.single-product #wrapper,
body.single-product #main,
body.single-product #content {
    min-height: 100vh !important;
    height: auto !important;
}


/* ========================================
   FIX REV SLIDER AND AVADA SEPARATOR CONFLICTS
   ======================================== */

/* Apply Lato font to fusion-text elements */
.fusion-text,
.fusion-text-3,
.fusion-text-no-margin,
.fusion-text *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]),
.fusion-text-3 *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]),
.fusion-text-no-margin *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]) {
    font-family: "Lato", Arial, sans-serif !important;
}

/* Fix brush-wrap coverage for Rev Slider only - NUCLEAR OPTION */
.rev_slider .brush-wrap--green:before,
.tp-revslider-mainul .brush-wrap--green:before,
.rs-layer .brush-wrap--green:before,
.tp-revslider-mainul .tp-revslider-mainul .brush-wrap--green:before,
.rs-layer .rs-layer .brush-wrap--green:before,
html body .rev_slider .brush-wrap--green:before,
html body .tp-revslider-mainul .brush-wrap--green:before,
html body .rs-layer .brush-wrap--green:before {
    width: 100% !important; /* Full width for better coverage in sliders */
    left: 0 !important; /* Start from left edge */
    height: 100% !important; /* Full height coverage */
    background: #9dca47 !important; /* Ensure green background */
    position: absolute !important;
    top: 0 !important;
    z-index: -1 !important;
    content: '' !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Specific targeting for Rev Slider brush-wrap - NUCLEAR OPTION */
.rev_slider .brush-wrap--green,
.tp-revslider-mainul .brush-wrap--green,
.rs-layer .brush-wrap--green,
.tp-revslider-mainul .tp-revslider-mainul .brush-wrap--green,
.rs-layer .rs-layer .brush-wrap--green,
html body .rev_slider .brush-wrap--green,
html body .tp-revslider-mainul .brush-wrap--green,
html body .rs-layer .brush-wrap--green {
    padding: 1.5rem 3rem !important; /* More padding for longer text in sliders */
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 200px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Ensure text is properly centered within the brush stroke in sliders */
.rev_slider .brush-wrap--green p,
.rev_slider .brush-wrap--green h1,
.rev_slider .brush-wrap--green h2,
.rev_slider .brush-wrap--green h3,
.tp-revslider-mainul .brush-wrap--green p,
.tp-revslider-mainul .brush-wrap--green h1,
.tp-revslider-mainul .brush-wrap--green h2,
.tp-revslider-mainul .brush-wrap--green h3,
.rs-layer .brush-wrap--green p,
.rs-layer .brush-wrap--green h1,
.rs-layer .brush-wrap--green h2,
.rs-layer .brush-wrap--green h3 {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    color: white !important;
}

/* Smart Slider responsive fixes for mobile */
@media (max-width: 768px) {
    /* Fix Smart Slider text sizing on mobile */
    .n2-ss-layer .n2-ss-layer-content {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    /* Ensure Smart Slider images display on mobile */
    .n2-ss-layer .n2-ss-layer-content img,
    .n2-ss-layer-content img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    /* Fix Smart Slider container responsive behavior */
    .n2-ss-slider {
        overflow: visible !important;
    }
    
    .n2-ss-slide {
        overflow: visible !important;
    }
    
    /* Ensure layer content is visible on mobile */
    .n2-ss-layer-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Fix text layer sizing specifically */
    .n2-ss-layer[data-type="text"] .n2-ss-layer-content {
        font-size: 14px !important;
        line-height: 1.4 !important;
        transform: none !important;
    }
    
    /* Fix image layer visibility */
    .n2-ss-layer[data-type="image"] .n2-ss-layer-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* ========================================
   APPLY LATO FONT TO SP-WCSP-CAT-NAME
   ======================================== */

/* Apply Lato font to sp-wcsp-cat-name elements */
.sp-wcsp-cat-name,
.sp-wcsp-cat-name p,
.sp-wcsp-cat-name h1,
.sp-wcsp-cat-name h2,
.sp-wcsp-cat-name h3,
.sp-wcsp-cat-name h4,
.sp-wcsp-cat-name h5,
.sp-wcsp-cat-name h6,
.sp-wcsp-cat-name span,
.sp-wcsp-cat-name div,
.sp-wcsp-cat-name strong,
.sp-wcsp-cat-name b,
.sp-wcsp-cat-name em,
.sp-wcsp-cat-name i:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]),
.sp-wcsp-cat-name a {
    font-family: "Lato", Arial, sans-serif !important;
    font-size: 20px !important;
}

/* More specific targeting for sp-wcsp-cat-name */
div.sp-wcsp-cat-name,
div.sp-wcsp-cat-name *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]) {
    font-family: "Lato", Arial, sans-serif !important;
    font-size: 20px !important;
}

/* Ultra-specific targeting with higher specificity */
body .sp-wcsp-cat-name,
body .sp-wcsp-cat-name *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]),
html body .sp-wcsp-cat-name,
html body .sp-wcsp-cat-name *:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]) {
    font-family: "Lato", Arial, sans-serif !important;
    font-size: 20px !important;
}

/* ========================================
   METASLIDER CONTAINER 3053 CAPTION STYLING (SP-WCSP-CAT-NAME STYLE)
   ======================================== */

/* Apply sp-wcsp-cat-name styling to metaslider_container_3053 captions */
/* Reset all metaslider styles and apply simple Lato 20px like sp-wcsp-cat-name */
/* First, ensure all parent containers allow horizontal layout */
#metaslider_container_3053,
#metaslider_container_3053 .metaslider,
#metaslider_container_3053 .flexslider,
div[id*="metaslider_container_3053"],
div[id*="metaslider_container_3053"] .metaslider,
div[id*="metaslider_container_3053"] .flexslider {
    display: block !important;
    width: 100% !important;
}

#metaslider_container_3053 .caption,
#metaslider_container_3053 .caption-wrap .caption,
#metaslider_container_3053 .flexslider .caption-wrap .caption,
#metaslider_container_3053 .nivoSlider .caption,
#metaslider_container_3053 .coin-slider .caption,
#metaslider_container_3053 .rslides .caption,
#metaslider_container_3053 .caption p,
#metaslider_container_3053 .caption h1,
#metaslider_container_3053 .caption h2,
#metaslider_container_3053 .caption h3,
#metaslider_container_3053 .caption h4,
#metaslider_container_3053 .caption h5,
#metaslider_container_3053 .caption h6,
#metaslider_container_3053 .caption span,
#metaslider_container_3053 .caption div,
#metaslider_container_3053 .caption-wrap .caption p,
#metaslider_container_3053 .caption-wrap .caption h1,
#metaslider_container_3053 .caption-wrap .caption h2,
#metaslider_container_3053 .caption-wrap .caption h3,
#metaslider_container_3053 .caption-wrap .caption h4,
#metaslider_container_3053 .caption-wrap .caption h5,
#metaslider_container_3053 .caption-wrap .caption h6,
#metaslider_container_3053 .caption-wrap .caption span,
#metaslider_container_3053 .caption-wrap .caption div,
#metaslider_container_3053 .flexslider .caption-wrap .caption p,
#metaslider_container_3053 .flexslider .caption-wrap .caption h1,
#metaslider_container_3053 .flexslider .caption-wrap .caption h2,
#metaslider_container_3053 .flexslider .caption-wrap .caption h3,
#metaslider_container_3053 .flexslider .caption-wrap .caption h4,
#metaslider_container_3053 .flexslider .caption-wrap .caption h5,
#metaslider_container_3053 .flexslider .caption-wrap .caption h6,
#metaslider_container_3053 .flexslider .caption-wrap .caption span,
#metaslider_container_3053 .flexslider .caption-wrap .caption div,
div[id*="metaslider_container_3053"] .caption,
div[id*="metaslider_container_3053"] .caption-wrap .caption,
div[id*="metaslider_container_3053"] .flexslider .caption-wrap .caption,
div[id*="metaslider_container_3053"] .caption p,
div[id*="metaslider_container_3053"] .caption h1,
div[id*="metaslider_container_3053"] .caption h2,
div[id*="metaslider_container_3053"] .caption h3,
div[id*="metaslider_container_3053"] .caption h4,
div[id*="metaslider_container_3053"] .caption h5,
div[id*="metaslider_container_3053"] .caption h6,
div[id*="metaslider_container_3053"] .caption span,
div[id*="metaslider_container_3053"] .caption div,
div[id*="metaslider_container_3053"] .caption-wrap .caption p,
div[id*="metaslider_container_3053"] .caption-wrap .caption h1,
div[id*="metaslider_container_3053"] .caption-wrap .caption h2,
div[id*="metaslider_container_3053"] .caption-wrap .caption h3,
div[id*="metaslider_container_3053"] .caption-wrap .caption h4,
div[id*="metaslider_container_3053"] .caption-wrap .caption h5,
div[id*="metaslider_container_3053"] .caption-wrap .caption h6,
div[id*="metaslider_container_3053"] .caption-wrap .caption span,
div[id*="metaslider_container_3053"] .caption-wrap .caption div,
div[id*="metaslider_container_3053"] .flexslider .caption-wrap .caption p,
div[id*="metaslider_container_3053"] .flexslider .caption-wrap .caption h1,
div[id*="metaslider_container_3053"] .flexslider .caption-wrap .caption h2,
div[id*="metaslider_container_3053"] .flexslider .caption-wrap .caption h3,
div[id*="metaslider_container_3053"] .flexslider .caption-wrap .caption h4,
div[id*="metaslider_container_3053"] .flexslider .caption-wrap .caption h5,
div[id*="metaslider_container_3053"] .flexslider .caption-wrap .caption h6,
div[id*="metaslider_container_3053"] .flexslider .caption-wrap .caption span,
div[id*="metaslider_container_3053"] .flexslider .caption-wrap .caption div {
    font-family: "Lato", Arial, sans-serif !important;
    font-size: 20px !important;
    /* Reset other metaslider styles to match sp-wcsp-cat-name simplicity */
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    -webkit-text-stroke: none !important;
    line-height: normal !important;
    /* Override white color from general metaslider styles - use dark text color like sp-wcsp-cat-name */
    color: #333333 !important;
    /* Force horizontal text display */
    display: inline-block !important;
    width: auto !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    word-wrap: normal !important;
}

/* More specific targeting for metaslider_container_3053 */
body #metaslider_container_3053 .caption,
body #metaslider_container_3053 .caption-wrap .caption,
body #metaslider_container_3053 .flexslider .caption-wrap .caption,
body div[id*="metaslider_container_3053"] .caption,
body div[id*="metaslider_container_3053"] .caption-wrap .caption,
body div[id*="metaslider_container_3053"] .flexslider .caption-wrap .caption,
html body #metaslider_container_3053 .caption,
html body #metaslider_container_3053 .caption-wrap .caption,
html body #metaslider_container_3053 .flexslider .caption-wrap .caption,
html body div[id*="metaslider_container_3053"] .caption,
html body div[id*="metaslider_container_3053"] .caption-wrap .caption,
html body div[id*="metaslider_container_3053"] .flexslider .caption-wrap .caption {
    font-family: "Lato", Arial, sans-serif !important;
    font-size: 20px !important;
    /* Reset other metaslider styles to match sp-wcsp-cat-name simplicity */
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    -webkit-text-stroke: none !important;
    line-height: normal !important;
    /* Override white color from general metaslider styles - use dark text color like sp-wcsp-cat-name */
    color: #333333 !important;
    /* Ensure horizontal text display */
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    display: inline-block !important;
    width: auto !important;
    word-break: normal !important;
}

/* Fix caption-wrap layout for metaslider_container_3053 to prevent vertical text */
/* Also ensure it matches sp-wcsp-cat-name styling */
#metaslider_container_3053 .caption-wrap,
#metaslider_container_3053 .flexslider .caption-wrap,
#metaslider_container_3053 .nivoSlider .caption-wrap,
div[id*="metaslider_container_3053"] .caption-wrap,
div[id*="metaslider_container_3053"] .flexslider .caption-wrap,
div[id*="metaslider_container_3053"] .nivoSlider .caption-wrap {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    position: relative !important;
    float: none !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    flex-direction: row !important;
    /* Match sp-wcsp-cat-name font styling on wrapper */
    font-family: "Lato", Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    text-shadow: none !important;
    -webkit-text-stroke: none !important;
    /* Override white color from general metaslider styles - use dark text color like sp-wcsp-cat-name */
    color: #333333 !important;
    /* Reduce spacing between caption and image */
    padding-right: 10px !important; /* Reduce right padding to bring text closer to image */
    margin-right: 0 !important;
}

/* Override the .metaslider * rule that forces white color - but only for text elements, not images */
#metaslider_container_3053 .caption-wrap *:not(img),
#metaslider_container_3053 .caption *:not(img),
#metaslider_container_3053 .flexslider .caption-wrap *:not(img),
div[id*="metaslider_container_3053"] .caption-wrap *:not(img),
div[id*="metaslider_container_3053"] .caption *:not(img),
div[id*="metaslider_container_3053"] .flexslider .caption-wrap *:not(img) {
    color: #333333 !important;
}

/* Reduce spacing between caption text and pot image for metaslider_container_3053 */
#metaslider_container_3053 .caption-wrap,
#metaslider_container_3053 .flexslider .caption-wrap,
div[id*="metaslider_container_3053"] .caption-wrap,
div[id*="metaslider_container_3053"] .flexslider .caption-wrap {
    padding-right: 5px !important; /* Reduced from default to bring text closer to image */
    margin-right: 0 !important;
}

/* Reduce left margin on images to bring them closer to caption text */
#metaslider_container_3053 .slides img,
#metaslider_container_3053 .metaslider .slides img,
#metaslider_container_3053 .flexslider .slides img,
#metaslider_container_3053 .slides .slide img,
#metaslider_container_3053 .slide img,
div[id*="metaslider_container_3053"] .slides img,
div[id*="metaslider_container_3053"] .metaslider .slides img,
div[id*="metaslider_container_3053"] .flexslider .slides img,
div[id*="metaslider_container_3053"] .slides .slide img,
div[id*="metaslider_container_3053"] .slide img {
    margin-left: 5px !important; /* Reduced to bring image closer to text */
}

/* Ensure slide container displays properly - let metaslider handle carousel layout */
#metaslider_container_3053 .slide,
#metaslider_container_3053 .flexslider .slide,
#metaslider_container_3053 .slides li,
div[id*="metaslider_container_3053"] .slide,
div[id*="metaslider_container_3053"] .flexslider .slide,
div[id*="metaslider_container_3053"] .slides li {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Set image size to 180px for metaslider_container_3053 - target only slide images */
/* Override general metaslider image styles with higher specificity */
#metaslider_container_3053.metaslider .slides img,
#metaslider_container_3053 .metaslider .slides img,
#metaslider_container_3053 .flexslider .slides img,
#metaslider_container_3053 .slides .slide img,
#metaslider_container_3053 .slide img,
body #metaslider_container_3053 .slides img,
body #metaslider_container_3053 .flexslider .slides img,
body #metaslider_container_3053 .slide img,
div[id*="metaslider_container_3053"].metaslider .slides img,
div[id*="metaslider_container_3053"] .metaslider .slides img,
div[id*="metaslider_container_3053"] .flexslider .slides img,
div[id*="metaslider_container_3053"] .slides .slide img,
div[id*="metaslider_container_3053"] .slide img,
body div[id*="metaslider_container_3053"] .slides img,
body div[id*="metaslider_container_3053"] .flexslider .slides img,
body div[id*="metaslider_container_3053"] .slide img {
    width: 180px !important;
    height: 180px !important;
    max-width: 180px !important;
    max-height: 180px !important;
    min-width: 180px !important;
    min-height: 180px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    float: none !important;
    /* Add smooth transition for hover effect like sp-wcsp-cat-thumbnail */
    transition: transform 0.3s ease !important;
    position: relative !important;
}

/* Ensure images have space above them for bounce - add margin/padding to normal state */
#metaslider_container_3053 .slides img,
#metaslider_container_3053 .metaslider .slides img,
#metaslider_container_3053 .flexslider .slides img,
#metaslider_container_3053 .slides .slide img,
#metaslider_container_3053 .slide img,
body #metaslider_container_3053 .slides img,
body #metaslider_container_3053 .flexslider .slides img,
body #metaslider_container_3053 .slide img,
div[id*="metaslider_container_3053"] .slides img,
div[id*="metaslider_container_3053"] .metaslider .slides img,
div[id*="metaslider_container_3053"] .flexslider .slides img,
div[id*="metaslider_container_3053"] .slides .slide img,
div[id*="metaslider_container_3053"] .slide img,
body div[id*="metaslider_container_3053"] .slides img,
body div[id*="metaslider_container_3053"] .flexslider .slides img,
body div[id*="metaslider_container_3053"] .slide img {
    margin-top: 15px !important; /* Add space above image for bounce */
    margin-left: 10px !important; /* Reduce left margin to bring image closer to text */
    display: block !important;
}

/* Bounce up hover effect for metaslider_container_3053 images - matching sp-wcsp-cat-thumbnail */
/* Use exact same selectors as base styles but with :hover for maximum specificity */
#metaslider_container_3053.metaslider .slides .slide:hover img,
#metaslider_container_3053.metaslider .slides li:hover img,
#metaslider_container_3053 .metaslider .slides .slide:hover img,
#metaslider_container_3053 .metaslider .slides li:hover img,
#metaslider_container_3053 .flexslider .slides .slide:hover img,
#metaslider_container_3053 .flexslider .slides li:hover img,
#metaslider_container_3053 .slides .slide:hover img,
#metaslider_container_3053 .slides li:hover img,
#metaslider_container_3053 .slide:hover img,
body #metaslider_container_3053 .slides .slide:hover img,
body #metaslider_container_3053 .slides li:hover img,
body #metaslider_container_3053 .flexslider .slides .slide:hover img,
body #metaslider_container_3053 .flexslider .slides li:hover img,
body #metaslider_container_3053 .slide:hover img,
div[id*="metaslider_container_3053"].metaslider .slides .slide:hover img,
div[id*="metaslider_container_3053"].metaslider .slides li:hover img,
div[id*="metaslider_container_3053"] .metaslider .slides .slide:hover img,
div[id*="metaslider_container_3053"] .metaslider .slides li:hover img,
div[id*="metaslider_container_3053"] .flexslider .slides .slide:hover img,
div[id*="metaslider_container_3053"] .flexslider .slides li:hover img,
div[id*="metaslider_container_3053"] .slides .slide:hover img,
div[id*="metaslider_container_3053"] .slides li:hover img,
div[id*="metaslider_container_3053"] .slide:hover img,
body div[id*="metaslider_container_3053"] .slides .slide:hover img,
body div[id*="metaslider_container_3053"] .slides li:hover img,
body div[id*="metaslider_container_3053"] .flexslider .slides .slide:hover img,
body div[id*="metaslider_container_3053"] .flexslider .slides li:hover img,
body div[id*="metaslider_container_3053"] .slide:hover img,
/* Also support direct image hover */
#metaslider_container_3053.metaslider .slides img:hover,
#metaslider_container_3053 .metaslider .slides img:hover,
#metaslider_container_3053 .flexslider .slides img:hover,
#metaslider_container_3053 .slides .slide img:hover,
#metaslider_container_3053 .slide img:hover,
body #metaslider_container_3053 .slides img:hover,
body #metaslider_container_3053 .flexslider .slides img:hover,
body #metaslider_container_3053 .slide img:hover,
div[id*="metaslider_container_3053"].metaslider .slides img:hover,
div[id*="metaslider_container_3053"] .metaslider .slides img:hover,
div[id*="metaslider_container_3053"] .flexslider .slides img:hover,
div[id*="metaslider_container_3053"] .slides .slide img:hover,
div[id*="metaslider_container_3053"] .slide img:hover,
body div[id*="metaslider_container_3053"] .slides img:hover,
body div[id*="metaslider_container_3053"] .flexslider .slides img:hover,
body div[id*="metaslider_container_3053"] .slide img:hover {
    transform: translateY(-10px) translateZ(0) !important;
    z-index: 999 !important;
    position: relative !important;
    transition: transform 0.3s ease !important;
    margin-top: 5px !important; /* Adjust margin when hovering (15px - 10px = 5px remaining) */
}

/* FIX CLIPPING - ONLY add padding, allow vertical overflow ONLY on slides and their parents */
/* Add padding to main container to prevent top clipping - increased significantly to accommodate -10px translateY */
#metaslider_container_3053,
div[id*="metaslider_container_3053"] {
    padding-top: 30px !important; /* Increased significantly to ensure no clipping */
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
    overflow: visible !important; /* Ensure container itself allows overflow */
    margin-top: 0 !important; /* Remove any margin restrictions */
    margin-bottom: 0 !important;
}

/* Allow vertical overflow ONLY on slides and immediate containers for bounce effect */
/* Don't touch horizontal overflow - let metaslider handle carousel */
#metaslider_container_3053 .slides,
#metaslider_container_3053 .flexslider .slides,
#metaslider_container_3053 .flexslider,
#metaslider_container_3053 .metaslider,
div[id*="metaslider_container_3053"] .slides,
div[id*="metaslider_container_3053"] .flexslider .slides,
div[id*="metaslider_container_3053"] .flexslider,
div[id*="metaslider_container_3053"] .metaslider {
    overflow-y: visible !important; /* Allow vertical overflow for bounce */
    overflow-x: hidden !important; /* Keep horizontal overflow hidden for carousel */
    max-height: none !important; /* Remove any max-height restrictions */
    height: auto !important; /* Ensure height is not fixed */
    min-height: auto !important;
}

#metaslider_container_3053 .slide,
#metaslider_container_3053 .slides li,
#metaslider_container_3053 .flexslider .slide,
#metaslider_container_3053 .flexslider .slides li,
div[id*="metaslider_container_3053"] .slide,
div[id*="metaslider_container_3053"] .slides li,
div[id*="metaslider_container_3053"] .flexslider .slide,
div[id*="metaslider_container_3053"] .flexslider .slides li {
    overflow-y: visible !important; /* Allow vertical overflow for bounce */
    overflow-x: visible !important; /* Allow horizontal overflow as well */
    overflow: visible !important; /* Ensure all overflow is visible */
    position: relative !important; /* Ensure positioning context */
    max-height: none !important; /* Remove height restrictions */
    height: auto !important;
    min-height: auto !important;
    padding-top: 15px !important; /* Add padding to top of slide to accommodate bounce */
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* Target common Avada parent wrappers that might be clipping - be very aggressive */
.fusion-fullwidth:has(#metaslider_container_3053),
.fusion-fullwidth:has(div[id*="metaslider_container_3053"]),
.fusion-section:has(#metaslider_container_3053),
.fusion-section:has(div[id*="metaslider_container_3053"]),
.fusion-column:has(#metaslider_container_3053),
.fusion-column:has(div[id*="metaslider_container_3053"]),
.fusion-builder-row:has(#metaslider_container_3053),
.fusion-builder-row:has(div[id*="metaslider_container_3053"]),
.fusion-row:has(#metaslider_container_3053),
.fusion-row:has(div[id*="metaslider_container_3053"]),
.fusion-container:has(#metaslider_container_3053),
.fusion-container:has(div[id*="metaslider_container_3053"]),
.fusion-wrapper:has(#metaslider_container_3053),
.fusion-wrapper:has(div[id*="metaslider_container_3053"]),
.fusion-content-boxes:has(#metaslider_container_3053),
.fusion-content-boxes:has(div[id*="metaslider_container_3053"]) {
    overflow-y: visible !important; /* Allow vertical overflow for bounce */
    overflow: visible !important; /* Allow overflow in all directions */
    padding-top: 30px !important; /* Increased padding to accommodate bounce */
    box-sizing: border-box !important;
    max-height: none !important; /* Remove any max-height restrictions */
    height: auto !important; /* Ensure height is auto, not fixed */
    margin-top: 0 !important; /* Remove margin restrictions */
}

/* Target ANY parent that contains the metaslider - very broad approach */
div:has(#metaslider_container_3053),
div:has(div[id*="metaslider_container_3053"]) {
    overflow-y: visible !important;
    max-height: none !important;
}

/* Ensure slide images have proper spacing to allow bounce */
#metaslider_container_3053 .slide img,
#metaslider_container_3053 .slides li img,
#metaslider_container_3053 .flexslider .slide img,
#metaslider_container_3053 .flexslider .slides li img,
div[id*="metaslider_container_3053"] .slide img,
div[id*="metaslider_container_3053"] .slides li img,
div[id*="metaslider_container_3053"] .flexslider .slide img,
div[id*="metaslider_container_3053"] .flexslider .slides li img {
    margin-top: 0 !important; /* Ensure no margin-top that could cause issues */
    padding-top: 0 !important;
}

/* ========================================
   SP-WCSP-CAT-THUMBNAIL HOVER EFFECT
   ======================================== */

/* Ensure all parent containers and wrappers allow overflow */
[class*="sp-wcsp"],
[class*="sp-wcsp"] > *,
[class*="sp-wcsp"] > * > *,
[class*="wcsp"],
[class*="wcsp"] > *,
[class*="wcsp"] > * > * {
    overflow: visible !important;
}

/* Specific targeting for known containers */
.sp-wcsp-cat-thumbnail,
.sp-wcsp-cat-thumbnail a,
.sp-wcsp-cat-thumbnail div,
.sp-wcsp-cat-item,
.sp-wcsp-cat-list,
.sp-wcsp-categories,
.sp-wcsp-wrapper,
.sp-wcsp-container,
div[class*="sp-wcsp"],
div[class*="wcsp"] {
    overflow: visible !important;
}

/* Add smooth transition to thumbnail images */
.sp-wcsp-cat-thumbnail,
.sp-wcsp-cat-thumbnail img {
    transition: all 0.3s ease !important;
    transform: translateZ(0) !important; /* Enable hardware acceleration */
    position: relative !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Remove any white backgrounds or containers */
.sp-wcsp-cat-thumbnail,
.sp-wcsp-cat-thumbnail a,
.sp-wcsp-cat-thumbnail div,
.sp-wcsp-cat-thumbnail figure,
.sp-wcsp-cat-thumbnail .wp-post-image {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Bounce up effect on hover */
.sp-wcsp-cat-thumbnail:hover,
.sp-wcsp-cat-thumbnail:hover img {
    transform: translateY(-10px) translateZ(0) !important;
    box-shadow: none !important;
    z-index: 999 !important;
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove white backgrounds from all image containers */
.sp-wcsp-cat-thumbnail img,
.sp-wcsp-cat-thumbnail .wp-post-image,
.sp-wcsp-cat-thumbnail figure,
.sp-wcsp-cat-thumbnail a {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Target any parent containers that might have white backgrounds */
[class*="sp-wcsp"] img,
[class*="wcsp"] img,
[class*="sp-wcsp"] .wp-post-image,
[class*="wcsp"] .wp-post-image {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* More aggressive targeting - remove ALL backgrounds and containers */
*[class*="sp-wcsp"] *,
*[class*="wcsp"] *,
*[class*="sp-wcsp"],
*[class*="wcsp"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Try to clip the white background from product images */
.sp-wcsp-cat-thumbnail img,
.sp-wcsp-cat-thumbnail .wp-post-image {
    object-fit: cover !important;
    object-position: center !important;
    clip-path: inset(0) !important;
    mask: none !important;
    -webkit-mask: none !important;
}

/* Alternative approach - try to hide white backgrounds with CSS filters */
.sp-wcsp-cat-thumbnail:hover img {
    filter: drop-shadow(0 0 0 transparent) !important;
    -webkit-filter: drop-shadow(0 0 0 transparent) !important;
}

/* Ensure hovered item's parent allows overflow */
.sp-wcsp-cat-thumbnail:hover {
    overflow: visible !important;
}

/* Apply to parent of thumbnail on hover */
.sp-wcsp-cat-item:has(.sp-wcsp-cat-thumbnail:hover) {
    overflow: visible !important;
    z-index: 998 !important;
}

/* ========================================
   META SLIDER 18051 - MATCH WOOCOMMERCE CATEGORY SLIDER STYLING
   ======================================== */

/* Ensure all parent containers and wrappers allow overflow - matching sp-wcsp */
#metaslider_18051,
#metaslider_18051 > *,
#metaslider_18051 > * > *,
div[id*="metaslider_18051"],
div[id*="metaslider_18051"] > *,
div[id*="metaslider_18051"] > * > * {
    overflow: visible !important;
}

/* Specific targeting for meta slider containers - matching sp-wcsp */
#metaslider_18051,
#metaslider_18051 .metaslider,
#metaslider_18051 .flexslider,
#metaslider_18051 .slides,
#metaslider_18051 .slide,
div[id*="metaslider_18051"],
div[id*="metaslider_18051"] .metaslider,
div[id*="metaslider_18051"] .flexslider {
    overflow: visible !important;
}

/* Add smooth transition to images - matching sp-wcsp */
#metaslider_18051 img,
#metaslider_18051 .metaslider img,
#metaslider_18051 .flexslider img,
#metaslider_18051 .slides img,
div[id*="metaslider_18051"] img,
div[id*="metaslider_18051"] .metaslider img {
    transition: all 0.3s ease !important;
    transform: translateZ(0) !important; /* Enable hardware acceleration */
    position: relative !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Remove any white backgrounds or containers - matching sp-wcsp */
#metaslider_18051,
#metaslider_18051 .metaslider,
#metaslider_18051 .flexslider,
#metaslider_18051 .slides,
#metaslider_18051 .slide,
#metaslider_18051 img,
#metaslider_18051 .metaslider img,
#metaslider_18051 .flexslider img,
#metaslider_18051 .slides img,
div[id*="metaslider_18051"],
div[id*="metaslider_18051"] .metaslider,
div[id*="metaslider_18051"] .flexslider,
div[id*="metaslider_18051"] img {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Bounce up effect on hover - matching sp-wcsp */
#metaslider_18051 .slide:hover,
#metaslider_18051 .slide:hover img,
#metaslider_18051 img:hover,
div[id*="metaslider_18051"] .slide:hover,
div[id*="metaslider_18051"] .slide:hover img,
div[id*="metaslider_18051"] img:hover {
    transform: translateY(-10px) translateZ(0) !important;
    box-shadow: none !important;
    z-index: 999 !important;
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove white backgrounds from all image containers - matching sp-wcsp */
#metaslider_18051 img,
#metaslider_18051 .metaslider img,
#metaslider_18051 .flexslider img,
#metaslider_18051 .slides img,
#metaslider_18051 .wp-post-image,
div[id*="metaslider_18051"] img,
div[id*="metaslider_18051"] .metaslider img {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Target any parent containers that might have white backgrounds - matching sp-wcsp */
#metaslider_18051 img,
#metaslider_18051 .wp-post-image,
div[id*="metaslider_18051"] img,
div[id*="metaslider_18051"] .wp-post-image {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* More aggressive targeting - remove ALL backgrounds and containers - matching sp-wcsp */
#metaslider_18051 *,
#metaslider_18051,
div[id*="metaslider_18051"] *,
div[id*="metaslider_18051"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Try to clip the white background from images - matching sp-wcsp */
#metaslider_18051 img,
#metaslider_18051 .wp-post-image,
div[id*="metaslider_18051"] img,
div[id*="metaslider_18051"] .wp-post-image {
    object-fit: cover !important;
    object-position: center !important;
    clip-path: inset(0) !important;
    mask: none !important;
    -webkit-mask: none !important;
}

/* Alternative approach - try to hide white backgrounds with CSS filters - matching sp-wcsp */
#metaslider_18051 .slide:hover img,
#metaslider_18051 img:hover,
div[id*="metaslider_18051"] .slide:hover img,
div[id*="metaslider_18051"] img:hover {
    filter: drop-shadow(0 0 0 transparent) !important;
    -webkit-filter: drop-shadow(0 0 0 transparent) !important;
}

/* Ensure hovered item's parent allows overflow - matching sp-wcsp */
#metaslider_18051 .slide:hover,
div[id*="metaslider_18051"] .slide:hover {
    overflow: visible !important;
}

/* Apply to parent of slide on hover - matching sp-wcsp */
#metaslider_18051 .slides:has(.slide:hover),
div[id*="metaslider_18051"] .slides:has(.slide:hover) {
    overflow: visible !important;
    z-index: 998 !important;
}

/* Set meta slider pot images to exactly 190x190px with even spacing */
/* Override general metaslider styles with higher specificity */
#metaslider_18051 .slides img,
#metaslider_18051 .metaslider .slides img,
#metaslider_18051 .flexslider .slides img,
#metaslider_18051 .slide img,
div[id*="metaslider_18051"] .slides img,
div[id*="metaslider_18051"] .metaslider .slides img,
div[id*="metaslider_18051"] .flexslider .slides img,
div[id*="metaslider_18051"] .slide img,
#metaslider_18051 .metaslider .flexslider .slides img,
div[id*="metaslider_18051"] .metaslider .flexslider .slides img {
    width: 190px !important;
    height: 190px !important;
    max-width: 190px !important;
    max-height: 190px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 auto !important;
    float: none !important;
    position: relative !important;
}

/* Add even spacing between slides and prevent overlap - carousel layout */
#metaslider_18051 .slide,
#metaslider_18051 .metaslider .slide,
#metaslider_18051 .flexslider .slide,
#metaslider_18051 .slides li,
#metaslider_18051 .metaslider .slides li,
#metaslider_18051 .flexslider .slides li,
div[id*="metaslider_18051"] .slide,
div[id*="metaslider_18051"] .metaslider .slide,
div[id*="metaslider_18051"] .flexslider .slide,
div[id*="metaslider_18051"] .slides li {
    padding: 0 10px !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 210px !important; /* 190px image + 20px padding */
    min-width: 210px !important;
    max-width: 210px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: relative !important;
    float: none !important;
    overflow: visible !important;
    vertical-align: top !important;
    white-space: nowrap !important;
}

/* Ensure slides container allows horizontal scrolling - carousel style */
#metaslider_18051 .slides,
#metaslider_18051 .metaslider .slides,
#metaslider_18051 .flexslider .slides,
div[id*="metaslider_18051"] .slides,
div[id*="metaslider_18051"] .metaslider .slides,
div[id*="metaslider_18051"] .flexslider .slides {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure all slides are visible in the carousel */
#metaslider_18051 .slides li,
#metaslider_18051 .metaslider .slides li,
#metaslider_18051 .flexslider .slides li,
div[id*="metaslider_18051"] .slides li,
div[id*="metaslider_18051"] .metaslider .slides li,
div[id*="metaslider_18051"] .flexslider .slides li {
    display: inline-block !important;
    width: 210px !important;
    vertical-align: top !important;
}

/* Ensure flexslider container allows proper carousel behavior */
#metaslider_18051 .flexslider,
#metaslider_18051 .metaslider,
div[id*="metaslider_18051"] .flexslider,
div[id*="metaslider_18051"] .metaslider {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    padding: 0 50px !important; /* Space for arrows */
    box-sizing: border-box !important;
}

/* Make carousel navigation arrows visible */
#metaslider_18051 .flex-direction-nav,
#metaslider_18051 .flex-direction-nav li,
#metaslider_18051 .flex-direction-nav a,
#metaslider_18051 .metaslider .flex-direction-nav,
#metaslider_18051 .metaslider .flex-direction-nav a,
#metaslider_18051 .flexslider .flex-direction-nav,
#metaslider_18051 .flexslider .flex-direction-nav a,
div[id*="metaslider_18051"] .flex-direction-nav,
div[id*="metaslider_18051"] .flex-direction-nav a,
div[id*="metaslider_18051"] .metaslider .flex-direction-nav,
div[id*="metaslider_18051"] .metaslider .flex-direction-nav a,
div[id*="metaslider_18051"] .flexslider .flex-direction-nav,
div[id*="metaslider_18051"] .flexslider .flex-direction-nav a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
    position: absolute !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Style the arrow buttons - LEFT arrow */
#metaslider_18051 .flex-direction-nav .flex-prev,
#metaslider_18051 .metaslider .flex-direction-nav .flex-prev,
#metaslider_18051 .flexslider .flex-direction-nav .flex-prev,
div[id*="metaslider_18051"] .flex-direction-nav .flex-prev,
div[id*="metaslider_18051"] .metaslider .flex-direction-nav .flex-prev,
div[id*="metaslider_18051"] .flexslider .flex-direction-nav .flex-prev {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    text-align: center !important;
    background: rgba(157, 202, 71, 0.9) !important;
    color: white !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 1001 !important;
    top: 50% !important;
    margin-top: -20px !important;
    text-decoration: none !important;
    left: 0 !important;
    right: auto !important;
    position: absolute !important;
}

/* Style the arrow buttons - RIGHT arrow */
#metaslider_18051 .flex-direction-nav .flex-next,
#metaslider_18051 .metaslider .flex-direction-nav .flex-next,
#metaslider_18051 .flexslider .flex-direction-nav .flex-next,
div[id*="metaslider_18051"] .flex-direction-nav .flex-next,
div[id*="metaslider_18051"] .metaslider .flex-direction-nav .flex-next,
div[id*="metaslider_18051"] .flexslider .flex-direction-nav .flex-next {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    text-align: center !important;
    background: rgba(157, 202, 71, 0.9) !important;
    color: white !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 1001 !important;
    top: 50% !important;
    margin-top: -20px !important;
    text-decoration: none !important;
    right: 0 !important;
    left: auto !important;
    position: absolute !important;
}

#metaslider_18051 .flex-direction-nav .flex-prev:hover,
#metaslider_18051 .flex-direction-nav .flex-next:hover,
div[id*="metaslider_18051"] .flex-direction-nav .flex-prev:hover,
div[id*="metaslider_18051"] .flex-direction-nav .flex-next:hover {
    background: #9dca47 !important;
    opacity: 1 !important;
}

/* Blob generation using multiple overlapping circles */
.curved-image {
    position: relative;
    display: inline-block;
    clip-path: circle(50% at 50% 50%);
    animation: blob 7s ease-in-out infinite;
}

@keyframes blob {
    0% {
        clip-path: circle(40% at 30% 20%);
    }
    25% {
        clip-path: circle(45% at 70% 30%);
    }
    50% {
        clip-path: circle(50% at 60% 80%);
    }
    75% {
        clip-path: circle(35% at 20% 70%);
    }
    100% {
        clip-path: circle(40% at 30% 20%);
    }
}

/* Static blob using multiple circle intersections */
.curved-image-static {
    position: relative;
    display: inline-block;
    clip-path: circle(45% at 25% 25%) circle(50% at 75% 25%) circle(40% at 75% 75%) circle(55% at 25% 75%);
}

/* Organic blob using ellipse transforms */
.curved-image-organic {
    position: relative;
    display: inline-block;
    clip-path: ellipse(60% 40% at 50% 50%);
    transform: rotate(-5deg) scale(1.1);
}

/* Working blob generation using border-radius - BIG by default */
.curved-image-complex {
    position: relative;
    display: inline-block;
    width: 500px;
    height: 700px;
    overflow: visible;
    border-radius: 50% 40% 60% 30% / 40% 60% 30% 50% !important;
    clip-path: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

/* Hover animation for blob */
.curved-image-complex:hover {
    transform: scale(1.05) rotate(2deg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Alternative blob shapes - BIG by default using border-radius */
.curved-image-blob1 {
    width: 500px;
    height: 700px;
    overflow: visible;
    border-radius: 70% 30% 50% 50% / 30% 70% 30% 70% !important;
    clip-path: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

.curved-image-blob1:hover {
    transform: scale(1.05) rotate(-1deg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.curved-image-blob2 {
    width: 500px;
    height: 700px;
    overflow: visible;
    border-radius: 40% 60% 70% 30% / 60% 40% 30% 70% !important;
    clip-path: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

.curved-image-blob2:hover {
    transform: scale(1.05) rotate(1deg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.curved-image-blob3 {
    width: 500px;
    height: 700px;
    overflow: visible;
    border-radius: 60% 40% 40% 60% / 50% 50% 50% 50% !important;
    clip-path: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

.curved-image-blob3:hover {
    transform: scale(1.05) rotate(-2deg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Small compact blob - like the reference image */
.curved-image-small {
    width: 150px;
    height: 150px;
    clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CclipPath id='small-blob'%3E%3Cpath d='M50,25 C60,20 75,25 80,35 C85,45 80,55 70,60 C60,65 40,60 30,50 C20,40 25,30 35,25 C45,20 50,25 50,25 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#small-blob");
}

/* Tiny blob - very small like the reference */
.curved-image-tiny {
    width: 100px;
    height: 100px;
    clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CclipPath id='tiny-blob'%3E%3Cpath d='M50,30 C65,25 80,30 85,40 C90,50 85,60 75,65 C65,70 35,65 25,55 C15,45 20,35 30,30 C40,25 50,30 50,30 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#tiny-blob");
}

/* Micro blob - smallest size */
.curved-image-micro {
    width: 80px;
    height: 80px;
    clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CclipPath id='micro-blob'%3E%3Cpath d='M50,35 C65,30 80,35 85,45 C90,55 85,65 75,70 C65,75 35,70 25,60 C15,50 20,40 30,35 C40,30 50,35 50,35 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#micro-blob");
}

/* BIG blob - fills most of the container */
.curved-image-big {
    width: 500px;
    height: 500px;
    clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CclipPath id='big-blob'%3E%3Cpath d='M50,5 C75,0 95,10 98,25 C100,40 95,55 85,65 C75,75 55,80 35,75 C15,70 5,55 8,40 C10,25 25,10 50,5 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#big-blob");
}

/* HUGE blob - fills almost the entire container */
.curved-image-huge {
    width: 500px;
    height: 500px;
    clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CclipPath id='huge-blob'%3E%3Cpath d='M50,2 C80,0 98,5 100,20 C100,35 95,50 85,60 C75,70 55,75 35,70 C15,65 2,50 5,35 C8,20 20,5 50,2 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#huge-blob");
}

/* MASSIVE blob - fills the entire container with organic shape */
.curved-image-massive {
    width: 500px;
    height: 500px;
    clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CclipPath id='massive-blob'%3E%3Cpath d='M50,1 C85,0 99,3 100,15 C100,30 98,45 90,55 C80,65 60,70 40,68 C20,66 3,55 1,40 C0,25 5,10 20,5 C35,1 50,1 50,1 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#massive-blob");
}

/* GIANT blob - fills 95% of the viewBox */
.curved-image-giant {
    width: 500px;
    height: 500px;
    clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CclipPath id='giant-blob'%3E%3Cpath d='M50,0 C80,0 100,5 100,20 C100,35 100,50 95,65 C90,80 80,90 65,95 C50,100 35,100 20,95 C5,90 0,80 0,65 C0,50 0,35 5,20 C10,5 20,0 50,0 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#giant-blob");
}

/* ENORMOUS blob - fills 98% of the viewBox */
.curved-image-enormous {
    width: 500px;
    height: 500px;
    clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CclipPath id='enormous-blob'%3E%3Cpath d='M50,0 C85,0 100,2 100,15 C100,30 100,45 98,60 C95,75 90,85 80,90 C70,95 55,98 40,95 C25,92 10,85 5,70 C0,55 2,40 5,25 C8,10 15,0 50,0 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#enormous-blob");
}

/* COLOSSAL blob - using border-radius for organic shape */
.curved-image-colossal {
    width: 500px;
    height: 700px;
    overflow: visible;
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50% !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

.curved-image-colossal:hover {
    transform: scale(1.05) rotate(1deg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* OVERRIDE conflicting rules with !important */
.curved-image-complex,
.curved-image-blob1,
.curved-image-blob2,
.curved-image-blob3,
.curved-image-big,
.curved-image-huge,
.curved-image-massive,
.curved-image-giant,
.curved-image-enormous,
.curved-image-colossal {
    mask: none !important;
    -webkit-mask: none !important;
    width: 500px !important;
    height: 700px !important;
    display: inline-block !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Fix stretched images in blob containers */
.curved-image-complex img,
.curved-image-blob1 img,
.curved-image-blob2 img,
.curved-image-blob3 img,
.curved-image-big img,
.curved-image-huge img,
.curved-image-massive img,
.curved-image-giant img,
.curved-image-enormous img,
.curved-image-colossal img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Smart Slider specific overrides for blob containers */
.n2-ss-layer.curved-image-colossal .n2-ss-item-image-content,
.n2-ss-layer.curved-image-colossal .n2-ss-item-content,
.n2-ss-layer.curved-image-colossal .n2-ss-item-content img {
    width: 500px !important;
    height: 700px !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 500px !important;
    min-height: 700px !important;
}

/* Target the specific Smart Slider classes */
.n2-ss-item-image-content.curved-image-colossal,
.n2-ss-item-content.curved-image-colossal {
    width: 500px !important;
    height: 700px !important;
    max-width: none !important;
    max-height: none !important;
}

/* Override Smart Slider image constraints */
.n2-ss-layer.curved-image-colossal .n2-ss-item-image-content img,
.n2-ss-layer.curved-image-colossal .n2-ss-item-content img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Smart Slider overrides for ALL blob classes */
.n2-ss-layer.curved-image-complex .n2-ss-item-image-content,
.n2-ss-layer.curved-image-complex .n2-ss-item-content,
.n2-ss-layer.curved-image-blob1 .n2-ss-item-image-content,
.n2-ss-layer.curved-image-blob1 .n2-ss-item-content,
.n2-ss-layer.curved-image-blob2 .n2-ss-item-image-content,
.n2-ss-layer.curved-image-blob2 .n2-ss-item-content,
.n2-ss-layer.curved-image-blob3 .n2-ss-item-image-content,
.n2-ss-layer.curved-image-blob3 .n2-ss-item-content,
.n2-ss-layer.curved-image-big .n2-ss-item-image-content,
.n2-ss-layer.curved-image-big .n2-ss-item-content,
.n2-ss-layer.curved-image-huge .n2-ss-item-image-content,
.n2-ss-layer.curved-image-huge .n2-ss-item-content,
.n2-ss-layer.curved-image-massive .n2-ss-item-image-content,
.n2-ss-layer.curved-image-massive .n2-ss-item-content,
.n2-ss-layer.curved-image-giant .n2-ss-item-image-content,
.n2-ss-layer.curved-image-giant .n2-ss-item-content,
.n2-ss-layer.curved-image-enormous .n2-ss-item-image-content,
.n2-ss-layer.curved-image-enormous .n2-ss-item-content {
    width: 500px !important;
    height: 700px !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 500px !important;
    min-height: 700px !important;
}

/* Target ALL blob classes with Smart Slider containers */
.n2-ss-item-image-content.curved-image-complex,
.n2-ss-item-content.curved-image-complex,
.n2-ss-item-image-content.curved-image-blob1,
.n2-ss-item-content.curved-image-blob1,
.n2-ss-item-image-content.curved-image-blob2,
.n2-ss-item-content.curved-image-blob2,
.n2-ss-item-image-content.curved-image-blob3,
.n2-ss-item-content.curved-image-blob3,
.n2-ss-item-image-content.curved-image-big,
.n2-ss-item-content.curved-image-big,
.n2-ss-item-image-content.curved-image-huge,
.n2-ss-item-content.curved-image-huge,
.n2-ss-item-image-content.curved-image-massive,
.n2-ss-item-content.curved-image-massive,
.n2-ss-item-image-content.curved-image-giant,
.n2-ss-item-content.curved-image-giant,
.n2-ss-item-image-content.curved-image-enormous,
.n2-ss-item-content.curved-image-enormous {
    width: 500px !important;
    height: 700px !important;
    max-width: none !important;
    max-height: none !important;
}

/* Override Smart Slider image constraints for ALL blob classes */
.n2-ss-layer.curved-image-complex .n2-ss-item-image-content img,
.n2-ss-layer.curved-image-complex .n2-ss-item-content img,
.n2-ss-layer.curved-image-blob1 .n2-ss-item-image-content img,
.n2-ss-layer.curved-image-blob1 .n2-ss-item-content img,
.n2-ss-layer.curved-image-blob2 .n2-ss-item-image-content img,
.n2-ss-layer.curved-image-blob2 .n2-ss-item-content img,
.n2-ss-layer.curved-image-blob3 .n2-ss-item-image-content img,
.n2-ss-layer.curved-image-blob3 .n2-ss-item-content img,
.n2-ss-layer.curved-image-big .n2-ss-item-image-content img,
.n2-ss-layer.curved-image-big .n2-ss-item-content img,
.n2-ss-layer.curved-image-huge .n2-ss-item-image-content img,
.n2-ss-layer.curved-image-huge .n2-ss-item-content img,
.n2-ss-layer.curved-image-massive .n2-ss-item-image-content img,
.n2-ss-layer.curved-image-massive .n2-ss-item-content img,
.n2-ss-layer.curved-image-giant .n2-ss-item-image-content img,
.n2-ss-layer.curved-image-giant .n2-ss-item-content img,
.n2-ss-layer.curved-image-enormous .n2-ss-item-image-content img,
.n2-ss-layer.curved-image-enormous .n2-ss-item-content img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Alternative approach using border-image with SVG */
.curved-image-border {
    border: 20px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3Cpattern id='torn' patternUnits='userSpaceOnUse' width='20' height='20'%3E%3Cpath d='M0,0 L20,0 L20,20 L0,20 Z M0,0 Q5,5 10,0 Q15,5 20,0 M0,20 Q5,15 10,20 Q15,15 20,20 M0,0 Q0,5 0,10 Q0,15 0,20 M20,0 Q20,5 20,10 Q20,15 20,20' fill='none' stroke='black' stroke-width='2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23torn)'/%3E%3C/svg%3E") 20 stretch;
    border-radius: 0;
}

/* Torn paper effect using pseudo-elements */
.curved-image-torn {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.curved-image-torn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: 
        radial-gradient(circle at 10% 10%, transparent 8px, white 8px),
        radial-gradient(circle at 90% 10%, transparent 8px, white 8px),
        radial-gradient(circle at 10% 90%, transparent 8px, white 8px),
        radial-gradient(circle at 90% 90%, transparent 8px, white 8px),
        linear-gradient(45deg, transparent 48%, white 48%, white 52%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, white 48%, white 52%, transparent 52%);
    background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 40px 40px, 40px 40px;
    z-index: -1;
}

/* Hand-drawn effect using CSS filters and transforms */
.curved-image-handdrawn {
    position: relative;
    display: inline-block;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
    transform: rotate(-0.5deg);
}

.curved-image-handdrawn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(255,255,255,0.1) 2px,
            rgba(255,255,255,0.1) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 2px,
            rgba(255,255,255,0.1) 2px,
            rgba(255,255,255,0.1) 4px
        );
    pointer-events: none;
}

/* ========================================
   FLOATING DOCK YOGURT SCROLLER STYLING
   ======================================== */

/* Floating Dock Styling */
.yogurt-floating-dock {
    position: fixed;
    /* Below cookie-consent overlays (e.g. Complianz ~99999+) so banners stay clickable */
    z-index: 50000 !important;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 15px 15px 60px 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    max-width: 90vw;
    width: auto;
    min-width: 600px;
    overflow: visible;
}

.yogurt-floating-dock:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.yogurt-floating-dock.position-bottom-left {
    bottom: 20px;
    right: auto;
    left: 20px;
}

.yogurt-floating-dock.position-top-right {
    bottom: auto;
    top: 20px;
    right: 20px;
}

.yogurt-floating-dock.position-top-left {
    bottom: auto;
    top: 20px;
    right: auto;
    left: 20px;
}

.yogurt-floating-dock.position-bottom-center {
    bottom: 20px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.yogurt-floating-dock.position-top-center {
    bottom: auto;
    top: 20px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.yogurt-dock-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.yogurt-dock-container {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.yogurt-dock-nav {
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(39, 174, 96, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #27ae60;
    z-index: 2;
    position: relative;
}

.yogurt-dock-nav:hover {
    background: #27ae60;
    color: white;
    transform: scale(1.1);
}

.yogurt-dock-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.yogurt-dock-nav:disabled:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.9);
    color: #27ae60;
}

.yogurt-dock-pots {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(39, 174, 96, 0.6) rgba(0, 0, 0, 0.1);
    scroll-behavior: smooth;
    flex: 1;
    padding: 5px 0;
}

.yogurt-dock-pots::-webkit-scrollbar {
    height: 6px;
}

.yogurt-dock-pots::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.yogurt-dock-pots::-webkit-scrollbar-thumb {
    background: rgba(39, 174, 96, 0.6);
    border-radius: 3px;
}

.yogurt-dock-pots::-webkit-scrollbar-thumb:hover {
    background: rgba(39, 174, 96, 0.8);
}

.yogurt-dock-pot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    margin: 0 8px;
    position: relative;
}

.yogurt-dock-pot:hover {
    transform: translateY(-5px);
}

.yogurt-dock-pot__image {
    width: 60px;
    height: 80px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 8px;
}

.yogurt-dock-pot__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.yogurt-dock-pot__content {
    font-size: 0.7rem;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
    line-height: 1.2;
    padding: 8px;
}

.yogurt-dock-pot__label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}

.yogurt-dock-pot:hover .yogurt-dock-pot__label {
    color: #27ae60 !important;
    font-weight: 700 !important;
}

.yogurt-dock-pot:hover .yogurt-dock-pot__image {
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
    transform: scale(1.05);
}

/* Toast notification styling */
.yogurt-dock-toast {
    position: fixed;
    bottom: 100px;
    right: 20px;
    background: linear-gradient(145deg, #27ae60, #2ecc71);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 55000;
    max-width: 250px;
}

.yogurt-dock-toast--visible {
    transform: translateX(0);
}

.yogurt-dock-toast__content h4 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 600;
}

.yogurt-dock-toast__content p {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Tablet responsiveness */
@media (max-width: 1024px) and (min-width: 769px) {
    .yogurt-floating-dock {
        max-width: 80vw;
        padding: 12px 12px 50px 12px;
    }
    
    .yogurt-dock-pot__image {
        width: 55px;
        height: 75px;
    }
    
    .yogurt-dock-pot__label {
        font-size: 0.7rem;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .yogurt-floating-dock {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        padding: 10px 10px 50px 10px;
        border-radius: 15px;
    }
    
    .yogurt-floating-dock.position-bottom-left,
    .yogurt-floating-dock.position-top-left {
        left: 10px;
        right: 10px;
    }
    
    .yogurt-floating-dock.position-top-right {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    
    .yogurt-floating-dock.position-bottom-center {
        bottom: 10px;
        left: 10px;
        right: 10px;
        transform: none;
    }
    
    .yogurt-floating-dock.position-top-center {
        top: 10px;
        left: 10px;
        right: 10px;
        transform: none;
    }
    
    .yogurt-dock-container {
        gap: 8px;
    }
    
    .yogurt-dock-pot {
        margin: 0 4px;
    }
    
    .yogurt-dock-pot__image {
        width: 45px;
        height: 60px;
        margin-bottom: 6px;
    }
    
    .yogurt-dock-pot__content {
        font-size: 0.55rem;
        padding: 4px;
    }
    
    .yogurt-dock-nav {
        flex: 0 0 22px;
        height: 22px;
    }
    
    .yogurt-dock-pot__label {
        font-size: 0.6rem;
    }
    
    .yogurt-dock-title {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }
}

/* Small mobile responsiveness */
@media (max-width: 480px) {
    .yogurt-floating-dock {
        bottom: 5px;
        right: 5px;
        left: 5px;
        padding: 8px 8px 45px 8px;
        border-radius: 12px;
    }
    
    .yogurt-floating-dock.position-bottom-left,
    .yogurt-floating-dock.position-top-left {
        left: 5px;
        right: 5px;
    }
    
    .yogurt-floating-dock.position-top-right {
        top: 5px;
        right: 5px;
        left: 5px;
    }
    
    .yogurt-floating-dock.position-bottom-center {
        bottom: 5px;
        left: 5px;
        right: 5px;
    }
    
    .yogurt-floating-dock.position-top-center {
        top: 5px;
        left: 5px;
        right: 5px;
    }
    
    .yogurt-dock-container {
        gap: 6px;
    }
    
    .yogurt-dock-pot {
        margin: 0 2px;
    }
    
    .yogurt-dock-pot__image {
        width: 40px;
        height: 55px;
        margin-bottom: 4px;
    }
    
    .yogurt-dock-pot__content {
        font-size: 0.5rem;
        padding: 2px;
    }
    
    .yogurt-dock-nav {
        flex: 0 0 20px;
        height: 20px;
    }
    
    .yogurt-dock-pot__label {
        font-size: 0.55rem;
    }
    
    .yogurt-dock-title {
        font-size: 0.75rem;
        margin-bottom: 6px;
    }
}

/* Large desktop responsiveness */
@media (min-width: 1400px) {
    .yogurt-floating-dock {
        max-width: 1000px;
        padding: 20px 20px 70px 20px;
    }
    
    .yogurt-dock-pot__image {
        width: 70px;
        height: 90px;
    }
    
    .yogurt-dock-pot__label {
        font-size: 0.8rem;
    }
    
    .yogurt-dock-title {
        font-size: 1rem;
        margin-bottom: 15px;
    }
}

/* Resize floating dock for /2025-new/products/ page to match /2025/products-irish-yogurts/ */
body.iy-site-2025-new .yogurt-floating-dock {
    width: 952.5px !important;
    min-width: 952.5px !important;
    max-width: 952.5px !important;
    min-height: 110px !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px 30px 12px 30px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 50000 !important;
    position: fixed !important;
}

body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pot__image {
    width: 70px !important;
    height: 90px !important;
    margin-bottom: 6px !important;
}

body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pot__label {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
}

body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-title {
    font-size: 0.9rem !important;
    margin-bottom: 10px !important;
}

body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-container {
    overflow: visible !important;
    height: auto !important;
    gap: 10px !important;
    justify-content: space-between !important;
}

body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pots {
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    gap: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pot {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-nav {
    flex: 0 0 24px !important;
    height: 24px !important;
    width: 24px !important;
}

/* Ensure section separators don't overlap the floating dock on 2025-new pages */
body.iy-site-2025-new .fusion-section-separator,
body.iy-site-2025-new .fusion-fullwidth .fusion-section-separator {
    z-index: 1 !important;
    position: relative !important;
}

/* Tablet: compact full-width strip (matches yogurt-floating-dock.css + wp_head inline) */
@media (max-width: 1024px) and (min-width: 600px) {
    body.iy-site-2025-new .yogurt-floating-dock {
        left: 20px !important;
        right: 20px !important;
        width: calc(100vw - 40px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        border-radius: 12px !important;
        padding: 5px 8px 6px !important;
        transform: none !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock.position-bottom-center,
    body.iy-site-2025-new .yogurt-floating-dock.position-top-center {
        left: 20px !important;
        right: 20px !important;
        transform: none !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-title {
        font-size: 0.62rem !important;
        margin-bottom: 2px !important;
        letter-spacing: 0.35px !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-container {
        display: block !important;
        gap: 0 !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-nav {
        display: none !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pots {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pot {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pot__link {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pot__image {
        width: 40px !important;
        height: 52px !important;
        margin-bottom: 2px !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pot__label {
        font-size: 0.58rem !important;
        line-height: 1.18 !important;
        white-space: normal !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        display: -webkit-box !important;
        line-clamp: 3 !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        margin-top: 0 !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }
}

/* Mobile responsiveness for 2025-new page */
@media (max-width: 599px) {
    body.iy-site-2025-new .yogurt-floating-dock {
        width: calc(100vw - 20px) !important;
        min-width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 10px 10px 50px 10px !important;
    }
}

/* iPad / touch “desktop width”: same compact dock as tablet */
@media (hover: none) and (pointer: coarse) and (max-width: 1366px) {
    body.iy-site-2025-new .yogurt-floating-dock {
        left: 20px !important;
        right: 20px !important;
        width: calc(100vw - 40px) !important;
        min-width: 0 !important;
        max-width: none !important;
        border-radius: 12px !important;
        padding: 5px 8px 6px !important;
        transform: none !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock.position-bottom-center,
    body.iy-site-2025-new .yogurt-floating-dock.position-top-center {
        left: 20px !important;
        right: 20px !important;
        transform: none !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-title {
        font-size: 0.62rem !important;
        margin-bottom: 2px !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-nav {
        display: none !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pots {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pot {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pot__link {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pot__image {
        width: 40px !important;
        height: 52px !important;
        margin-bottom: 2px !important;
    }

    body.iy-site-2025-new .yogurt-floating-dock .yogurt-dock-pot__label {
        font-size: 0.58rem !important;
        line-height: 1.18 !important;
        white-space: normal !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        display: -webkit-box !important;
        line-clamp: 3 !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        margin-top: 0 !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }
}

/*
 * 2025-new hero (Smart Slider): narrower stage + scale layers toward center (tablet / large touch).
 */
@media (max-width: 1024px) and (min-width: 600px),
       (hover: none) and (pointer: coarse) and (max-width: 1366px) and (min-width: 600px) {
    body.iy-site-2025-new .n2-ss-slider-wrapper,
    body[class*="2025-new"] .n2-ss-slider-wrapper {
        max-width: min(100%, 860px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.iy-site-2025-new .n2-ss-slide .n2-ss-layers-p,
    body[class*="2025-new"] .n2-ss-slide .n2-ss-layers-p {
        transform: scale(0.86) !important;
        transform-origin: center center !important;
    }
}

/* Fix for navigation elements showing car icons from Lato font */
.fusion-slider-button,
.fusion-button,
.flex-direction-nav,
.flex-direction-nav a,
.flex-prev,
.flex-next,
.slider-nav,
.carousel-nav,
[class*="prev"],
[class*="next"],
[class*="arrow"],
.n2-ss-button-container,
.n2-ss-button,
.nextend-arrow,
.nextend-arrow-previous,
.nextend-arrow-next,
.ls-nav-prev,
.ls-nav-next,
button,
.button,
nav,
.navigation,
.nav {
    font-family: Arial, sans-serif !important;
}



/* Page Carousel image rounding to match recipe cards */
.swiper.page-carousel .carousel-image {
    border-radius: 15px; /* matches .recipe-card */
    overflow: hidden;
    display: block;
    width: 100%;
    height: auto;
}

/* Page Carousel title color */
.swiper.page-carousel .carousel-title,
.swiper.page-carousel .carousel-title a {
    color: #ffffff !important;
    display: block;
    max-width: 100%;
}
.swiper.page-carousel .carousel-title a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* FORCE Lato font on fusion-title-heading - Maximum specificity to override Avada parent theme */
html body .fusion-title-heading.title-heading-center,
html body .fusion-title-heading.title-heading-center *,
html body .fusion-title-heading.title-heading-center h1,
html body .fusion-title-heading.title-heading-center h2,
html body .fusion-title-heading.title-heading-center h3,
html body .fusion-title-heading.title-heading-center h4,
html body .fusion-title-heading.title-heading-center h5,
html body .fusion-title-heading.title-heading-center h6,
html body .fusion-title-heading.title-heading-center span,
html body .fusion-title-heading.title-heading-center div,
html body .fusion-title-heading.title-heading-center p,
html body .fusion-title-heading.title-heading-center strong,
html body .fusion-title-heading.title-heading-center b,
html body .fusion-title-heading.title-heading-center em,
html body .fusion-title-heading.title-heading-center i:not([class*="icon"]):not([class*="fa-"]):not([class*="awb-"]),
html body .fusion-title-heading.title-heading-center a {
    font-family: "Lato", Arial, sans-serif !important;
}

/* Ensure slide contents align and text width matches image width */
.swiper.page-carousel .swiper-slide {
    text-align: left;
}
.swiper.page-carousel .carousel-title {
    margin: 10px 0 0 0;
}

/* DISABLE EXCESSIVE ZOOM ON POLAROID HOVER - COMPLETELY REMOVE ZOOM! */
html body .fusion-imageframe.polaroid:hover,
html body .fusion-imageframe[class*="polaroid"]:hover,
html body [class*="fusion-imageframe"][class*="polaroid"]:hover,
html body .fusion-imageframe.polaroid:hover img,
html body .fusion-imageframe[class*="polaroid"]:hover img,
html body [class*="fusion-imageframe"][class*="polaroid"]:hover img,
html body .fusion-imageframe.polaroid img:hover,
html body .fusion-imageframe[class*="polaroid"] img:hover,
html body [class*="polaroid"]:hover:not(.yogurt-pot):not([class*="yogurt-pot"]),
html body [class*="polaroid"]:hover img:not(.yogurt-pot__image):not([class*="yogurt-pot"]),
html body [class*="polaroid"] img:hover:not(.yogurt-pot__image):not([class*="yogurt-pot"]),
html body .fusion-imageframe.polaroid:hover .fusion-imageframe img,
html body .fusion-imageframe[class*="polaroid"]:hover .fusion-imageframe img,
html body .fusion-imageframe.polaroid:hover a img,
html body .fusion-imageframe[class*="polaroid"]:hover a img,
html body .fusion-imageframe.polaroid:hover a,
html body .fusion-imageframe[class*="polaroid"]:hover a {
    transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    -o-transform: scale(1) !important;
    animation: none !important;
    -webkit-animation: none !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* Also disable any nested transforms */
html body .fusion-imageframe.polaroid:hover *,
html body .fusion-imageframe[class*="polaroid"]:hover * {
    transform: none !important;
    -webkit-transform: none !important;
}

/* Fix polaroid CSS to allow Avada max-width settings to work */
/* Target images inside polaroid/frame/photo containers, exclude yogurt pots */
[class*="polaroid"]:not(.yogurt-pot):not([class*="yogurt-pot"]) img:not(.yogurt-pot__image):not([class*="yogurt-pot"]),
[class*="photo"]:not(.yogurt-pot):not([class*="yogurt-pot"]) img:not(.yogurt-pot__image):not([class*="yogurt-pot"]),
[class*="frame"]:not(.yogurt-pot):not([class*="yogurt-pot"]) img:not(.yogurt-pot__image):not([class*="yogurt-pot"]) {
    /* Don't set max-width here - let Avada's inline style work */
    width: auto !important;
    height: auto !important;
}

/* Ensure Avada's inline max-width is respected - inline styles should win, but ensure no conflicts */
/* Target images that have inline max-width set by Avada */
img[style*="max-width"]:not(.yogurt-pot__image):not([class*="yogurt-pot"]):not([class*="yogurt"]) {
    /* Don't override max-width - the inline style should work */
    /* Only set width/height to auto to maintain aspect ratio */
    width: auto !important;
    height: auto !important;
}

/* Ensure polaroid containers don't constrain images when Avada sets max-width */
[class*="polaroid"]:not(.yogurt-pot):not([class*="yogurt-pot"]):not([class*="yogurt"]),
[class*="photo"]:not(.yogurt-pot):not([class*="yogurt-pot"]):not([class*="yogurt"]),
[class*="frame"]:not(.yogurt-pot):not([class*="yogurt-pot"]):not([class*="yogurt"]) {
    /* Don't constrain width - let images use their max-width from Avada */
    max-width: none !important;
    width: auto !important;
}

/* Fix Smart Slider polaroid borders to match Avada fusion-imageframe uniform borders */
/* Smart Slider polaroid elements have thicker borders on top/bottom - make them uniform */
/* Target Smart Slider layers with polaroid class - use maximum specificity */
body .n2-ss-layer.polaroid,
body .n2-ss-layer[class*="polaroid"],
body .n2-ow.polaroid,
body .n2-ow[class*="polaroid"],
body .n2-ss-layer.n2-ow.polaroid,
body .n2-ss-layer.n2-ow[class*="polaroid"],
body [class*="n2-ss-layer"][class*="polaroid"],
body [class*="n2-ow"][class*="polaroid"],
html body .n2-ss-layer.polaroid,
html body .n2-ss-layer[class*="polaroid"],
html body .n2-ow.polaroid,
html body .n2-ow[class*="polaroid"],
html body [class*="n2-ss-layer"][class*="polaroid"],
html body [class*="n2-ow"][class*="polaroid"],
/* Target exact class combination: n2-ss-layer n2-ow polaroid */
.n2-ss-layer.n2-ow.polaroid,
.n2-ss-layer.n2-ow[class*="polaroid"],
/* Also target any element with both n2-ss-layer and polaroid classes */
[class*="n2-ss-layer"].polaroid,
[class*="n2-ss-layer"][class*="polaroid"],
[class*="n2-ow"].polaroid,
[class*="n2-ow"][class*="polaroid"],
/* Target any element with polaroid class inside Smart Slider */
.n2-ss-slider [class*="polaroid"],
.n2-ss-slide [class*="polaroid"],
[class*="n2-ss"] [class*="polaroid"] {
    /* Equalize padding to create uniform white border like Avada fusion-imageframe */
    /* Match Avada's fusion-imageframe polaroid padding (typically 10px uniform) */
    padding: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    /* Remove any margins that might affect border appearance */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Override any nested content padding that might affect border appearance */
.n2-ss-layer.polaroid .n2-ss-layer-content,
.n2-ss-layer[class*="polaroid"] .n2-ss-layer-content,
.n2-ow.polaroid .n2-ss-layer-content,
.n2-ow[class*="polaroid"] .n2-ss-layer-content,
.n2-ss-layer.n2-ow.polaroid .n2-ss-layer-content,
.n2-ss-layer.n2-ow[class*="polaroid"] .n2-ss-layer-content,
[class*="n2-ss-layer"][class*="polaroid"] .n2-ss-layer-content,
[class*="n2-ow"][class*="polaroid"] .n2-ss-layer-content {
    padding: 0 !important;
    margin: 0 !important;
    /* Ensure no top/bottom margins that could create uneven borders */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure images inside Smart Slider polaroid containers fill the space properly */
/* Match Avada fusion-imageframe image display to ensure uniform border appearance */
.n2-ss-layer.polaroid img,
.n2-ss-layer[class*="polaroid"] img,
.n2-ow.polaroid img,
.n2-ow[class*="polaroid"] img,
.n2-ss-layer.n2-ow.polaroid img,
.n2-ss-layer.n2-ow[class*="polaroid"] img,
/* Images inside Smart Slider polaroid containers */
.n2-ss-layer.polaroid .n2-ss-layer-content img,
.n2-ss-layer[class*="polaroid"] .n2-ss-layer-content img,
[class*="n2-ss-layer"][class*="polaroid"] img,
[class*="n2-ow"][class*="polaroid"] img,
.n2-ss-layer.polaroid img,
.n2-ss-layer[class*="polaroid"] img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    /* Maintain aspect ratio and fill width */
    object-fit: contain !important;
    object-position: center !important;
    vertical-align: middle !important;
}

/* Ensure the content container doesn't constrain the image */
.n2-ss-layer.polaroid .n2-ss-layer-content,
.n2-ss-layer[class*="polaroid"] .n2-ss-layer-content {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
}

/* Ensure the container maintains consistent aspect ratio handling */
.n2-ss-layer.polaroid,
.n2-ss-layer[class*="polaroid"],
.n2-ow.polaroid,
.n2-ow[class*="polaroid"],
.n2-ss-layer.n2-ow.polaroid,
.n2-ss-layer.n2-ow[class*="polaroid"] {
    /* Ensure container displays images consistently and stays responsive */
    display: block !important;
    vertical-align: middle !important;
    /* Match Avada fusion-imageframe display */
    line-height: 0 !important;
    /* Let Smart Slider/parent control the width, but keep it fluid */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* Hide Avada footer scripts container - scripts will still execute */
.avada-footer-scripts {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
}

/* ========================================
   AGGRESSIVE OVERRIDE: REDUCE ALL IMAGE HOVER ZOOM
   Maximum specificity to override all other rules
   ======================================== */
html body .products .product:hover img,
html body .products li.product:hover img,
html body .related .products .product:hover img,
html body .upsells .products .product:hover img,
html body .cross-sells .products .product:hover img,
html body .product-image-container:hover img,
html body .product-image-container img:hover,
html body .woocommerce .products .product:hover img,
html body .woocommerce-page .products .product:hover img,
html body .fusion-woo-products .products .product:hover img {
    transform: scale(1.02) translateY(-2px) !important;
}

/* Override all bounce animations to prevent excessive zoom */
@keyframes gentleBounce {
    0% { transform: scale(1) translateY(0) !important; }
    25% { transform: scale(1.02) translateY(-3px) !important; }
    50% { transform: scale(1.02) translateY(-2px) !important; }
    75% { transform: scale(1.01) translateY(-1px) !important; }
    100% { transform: scale(1.02) translateY(-2px) !important; }
}

@keyframes gentleBounceProductImage {
    0% { transform: scale(1) !important; }
    50% { transform: scale(1.02) !important; }
    100% { transform: scale(1.02) !important; }
}

/* Portfolio featured image badge overlay */
.portfolio-featured-image-wrapper {
    position: relative;
    display: inline-block;
}

.portfolio-featured-image-wrapper img {
    display: block;
}

.portfolio-featured-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    pointer-events: none;
    width: 80px !important;
    height: auto;
}

.portfolio-featured-badge img {
    display: block;
    width: 80px !important;
    max-width: 80px !important;
    height: auto;
}

.portfolio-featured-stars {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    display: inline-flex;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
}

/* Global footer legal links */
.fusion-footer a[href*="privacy-policy"],
.fusion-footer a[href*="terms"],
.fusion-footer .avada-privacy-footer a,
.fusion-footer .fusion-footer-copyright-area a {
    color: #fff !important;
}

.portfolio-featured-star {
    color: #f6c542;
    font-size: 30px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Ensure grid thumbnails can host the badge */
.fusion-portfolio-post .fusion-portfolio-thumbnail,
.fusion-portfolio-post .fusion-image-wrapper,
.fusion-portfolio-post .fusion-rollover {
    position: relative;
}

/*
 * iy-site-2025-new: word wrapping must override later blocks (~1092, ~3044) that set
 * html body .fusion-title-heading * { overflow-wrap: break-word } — same specificity + later = win.
 * Extra html + body.iy-site-2025-new beats html body for nested column titles.
 */
html body.iy-site-2025-new .fusion-column-wrapper .fusion-title-heading,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-title-heading h1,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-title-heading h2,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-title-heading h3,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-title-heading h4,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-title-heading h5,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-title-heading h6,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-title-heading *,
html body.iy-site-2025-new .fusion-builder-column .fusion-title-heading,
html body.iy-site-2025-new .fusion-builder-column .fusion-title-heading h1,
html body.iy-site-2025-new .fusion-builder-column .fusion-title-heading h2,
html body.iy-site-2025-new .fusion-builder-column .fusion-title-heading h3,
html body.iy-site-2025-new .fusion-builder-column .fusion-title-heading h4,
html body.iy-site-2025-new .fusion-builder-column .fusion-title-heading h5,
html body.iy-site-2025-new .fusion-builder-column .fusion-title-heading h6,
html body.iy-site-2025-new .fusion-builder-column .fusion-title-heading *,
html body.iy-site-2025-new .fusion-layout-column .fusion-title-heading,
html body.iy-site-2025-new .fusion-layout-column .fusion-title-heading h1,
html body.iy-site-2025-new .fusion-layout-column .fusion-title-heading h2,
html body.iy-site-2025-new .fusion-layout-column .fusion-title-heading h3,
html body.iy-site-2025-new .fusion-layout-column .fusion-title-heading h4,
html body.iy-site-2025-new .fusion-layout-column .fusion-title-heading h5,
html body.iy-site-2025-new .fusion-layout-column .fusion-title-heading h6,
html body.iy-site-2025-new .fusion-layout-column .fusion-title-heading *,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-text h1,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-text h2,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-text h3,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-text h4,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-text h5,
html body.iy-site-2025-new .fusion-column-wrapper .fusion-text h6,
html body.iy-site-2025-new .fusion-builder-column .fusion-text h1,
html body.iy-site-2025-new .fusion-builder-column .fusion-text h2,
html body.iy-site-2025-new .fusion-builder-column .fusion-text h3,
html body.iy-site-2025-new .fusion-builder-column .fusion-text h4,
html body.iy-site-2025-new .fusion-builder-column .fusion-text h5,
html body.iy-site-2025-new .fusion-builder-column .fusion-text h6,
html body.iy-site-2025-new .fusion-layout-column .fusion-text h1,
html body.iy-site-2025-new .fusion-layout-column .fusion-text h2,
html body.iy-site-2025-new .fusion-layout-column .fusion-text h3,
html body.iy-site-2025-new .fusion-layout-column .fusion-text h4,
html body.iy-site-2025-new .fusion-layout-column .fusion-text h5,
html body.iy-site-2025-new .fusion-layout-column .fusion-text h6,
html body.iy-site-2025-new .fusion-title-heading,
html body.iy-site-2025-new .fusion-title-heading h1,
html body.iy-site-2025-new .fusion-title-heading h2,
html body.iy-site-2025-new .fusion-title-heading h3,
html body.iy-site-2025-new .fusion-title-heading h4,
html body.iy-site-2025-new .fusion-title-heading h5,
html body.iy-site-2025-new .fusion-title-heading h6,
html body.iy-site-2025-new .fusion-title-heading *,
html body.iy-site-2025-new .fusion-title-heading.title-heading-left,
html body.iy-site-2025-new .fusion-title-heading.title-heading-left *,
html body.iy-site-2025-new .fusion-title-heading.title-heading-center,
html body.iy-site-2025-new .fusion-title-heading.title-heading-center *,
html body.iy-site-2025-new .fusion-title-heading.title-heading-center h1,
html body.iy-site-2025-new .fusion-title-heading.title-heading-center h2,
html body.iy-site-2025-new .fusion-title-heading.title-heading-center h3,
html body.iy-site-2025-new .fusion-title-heading.title-heading-center h4,
html body.iy-site-2025-new .fusion-title-heading.title-heading-center h5,
html body.iy-site-2025-new .fusion-title-heading.title-heading-center h6,
html body.iy-site-2025-new .fusion-title-heading.title-heading-center span,
html body.iy-site-2025-new .fusion-title-heading.title-heading-center div,
html body.iy-site-2025-new .fusion-title-heading.title-heading-center p,
html body.iy-site-2025-new .fusion-title-text,
html body.iy-site-2025-new .fusion-title-text a {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
    white-space: normal !important;
}