/*!
 * OCarousels Simplex Styling Override
 * Transforms NopStation.Plugin.Widgets.OCarousels to match Simplex design system
 * Compatible with Simplex Theme v2.9.0 and nopCommerce 4.80
 * Generated by SuperClaude v4 Workflow System
 */

/* ===============================================
   SIMPLEX DESIGN SYSTEM INTEGRATION
   =============================================== */

/* Apply Simplex typography to all carousel elements */
.ocarousel-grid,
.ocarousel-grid .title,
.ocarousel .category-name,
.ocarousel .manufacturer-name,
.ocarousel-background {
    font-family: var(--font-default);
}

/* ===============================================
   SIMPLEX COLOR TRANSFORMATION
   =============================================== */

/* Loader Animation - Transform blue to Simplex red */
.lds-ellipsis div {
    background: var(--red, #ea5648) !important;
}

/* Title styling with inverted color scheme - shop heading face (--font-primary) */
.ocarousel-grid .title,
.ocarousel-grid .title *,
.ocarousel-title,
.ocarousel-title *,
.widget-title.ocarousel,
.widget-title.ocarousel *,
.section-title.ocarousel,
.section-title.ocarousel *,
.carousel-header .title,
.carousel-header .title *,
.ocarousel-container .title,
.ocarousel-container .title *,
.home-page-product-grid .title,
.home-page-product-grid .title *,
.block-title,
.block-title * {
    color: var(--grey-black, #333333) !important; /* Grey-black for titles */
    border-bottom-color: #ccc !important;
    font-family: var(--font-primary) !important; /* shop heading face */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 20px !important;
    text-align: center !important; /* Center title horizontally */
}

.ocarousel-grid .title strong,
.ocarousel-title strong,
.widget-title.ocarousel strong,
.section-title.ocarousel strong,
.carousel-header .title strong,
.ocarousel-container .title strong {
    font-family: var(--font-primary) !important; /* shop heading face */
    font-weight: 700 !important;
    color: var(--grey-black, #333333) !important; /* Grey-black accent */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Enhanced title hierarchy for all carousel contexts */
.ocarousel h1, .ocarousel h2, .ocarousel h3,
.ocarousel h4, .ocarousel h5, .ocarousel h6 {
    font-family: var(--font-primary);
    color: var(--grey-black, #333333);
}

/* Category and manufacturer names */
.ocarousel .category-name,
.ocarousel .manufacturer-name {
    color: var(--grey-black, #333333);
    font-family: var(--font-default);
    font-weight: 400;
}

/* Widget/section title enhancements for carousel integration */
/* Enhanced section title styling for all carousel contexts */
.home-page-product-grid .title,
.widget-block .block-title,
.product-carousel-title,
[class*="carousel"] .section-header {
    font-family: var(--font-primary) !important;
    color: var(--grey-black, #333333) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

/* Add Simplex-style underline accent */
.home-page-product-grid .title:after,
.widget-block .block-title:after,
.product-carousel-title:after,
.ocarousel-grid .title:after,
.block-title:after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 3px !important;
    background-color: #f0f0f0 !important;
}

/* ===============================================
   NAVIGATION CONTROLS - AUTHENTIC SIMPLEX STYLING
   =============================================== */

/* Navigation Buttons - Transparent with FontAwesome icons only */
.ocarousel-grid .ocarousel .owl-nav button.owl-prev,
.ocarousel-grid .ocarousel .owl-nav button.owl-next,
.ocarousel .owl-nav button.owl-prev,
.ocarousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    width: 35px;
    height: 35px;
    padding: 10px;
    cursor: pointer;
    z-index: 15;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    background: transparent !important;
    color: rgba(51, 51, 51, 0.2) !important; /* 20% transparent grey-black */
    border: none !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    font-size: 0 !important; /* Hide HTML text content (???? */
    line-height: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ocarousel-grid .ocarousel .owl-nav button.owl-prev:hover,
.ocarousel-grid .ocarousel .owl-nav button.owl-next:hover,
.ocarousel .owl-nav button.owl-prev:hover,
.ocarousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
    background: rgba(51, 51, 51, 0.2) !important; /* 20% transparent grey-black */
    color: #ffffff !important; /* White icon on hover */
    border: none !important;
}

.ocarousel-grid .ocarousel .owl-nav button.owl-prev:focus,
.ocarousel-grid .ocarousel .owl-nav button.owl-next:focus,
.ocarousel .owl-nav button.owl-prev:focus,
.ocarousel .owl-nav button.owl-next:focus,
.owl-carousel .owl-nav button.owl-prev:focus,
.owl-carousel .owl-nav button.owl-next:focus {
    outline: none;
    background: rgba(51, 51, 51, 0.2) !important; /* 20% transparent grey-black */
    color: #ffffff !important; /* White icon on focus */
    border: none !important;
}

/* Navigation Button Positioning - Different for each slider */
.ocarousel-grid .ocarousel .owl-nav button.owl-prev {
    position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
    left: 10px !important; /* FIXED: Moved inside container to prevent overflow clipping */
}

.ocarousel-grid .ocarousel .owl-nav button.owl-next {
    position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
    right: 10px !important; /* FIXED: Moved inside container to prevent overflow clipping */
}

/* Home new products slider navigation positioning - vertically centered */
#home-new-products-slider.owl-carousel .owl-nav button.owl-prev,
.product-grid.home-page-product-grid .owl-nav button.owl-prev {
    position: absolute !important;
    left: -40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#home-new-products-slider.owl-carousel .owl-nav button.owl-next,
.product-grid.home-page-product-grid .owl-nav button.owl-next {
    position: absolute !important;
    right: -40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Home bestseller slider navigation positioning - centered at product image height */
#home-bestseller-slider.owl-carousel .owl-nav button.owl-prev,
.product-grid.bestsellers .owl-nav button.owl-prev {
    position: absolute !important;
    left: -40px !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
}

#home-bestseller-slider.owl-carousel .owl-nav button.owl-next,
.product-grid.bestsellers .owl-nav button.owl-next {
    position: absolute !important;
    right: -40px !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
}


/* ===============================================
   SHARP EDGE AESTHETIC
   =============================================== */

/* Apply border-radius: 0px to all carousel elements */
.carousel-grid-background,
.ocarousel-background,
.ocarousel-item,
.OCarousel-container .OCarousel-picture-wrapper .title,
.ocarousel-grid .ocarousel .owl-nav button {
    border-radius: 0px !important;
}

/* ===============================================
   ENHANCED VISUAL CONSISTENCY
   =============================================== */

/* Background overlays with Simplex styling */
.ocarousel-background::before {
    background: rgba(234, 86, 72, 0.05); /* Subtle red tint */
}

/* Crimson theme specific - Title overlays */
.OCarousel-container .OCarousel-picture-wrapper .title {
    background: rgba(255, 255, 255, 0.95);
    color: var(--grey-black, #333333);
    font-weight: 600;
    border-radius: 0px;
}

.OCarousel-container .OCarousel-picture-wrapper .title strong {
    color: var(--red, #ea5648);
    font-weight: 700;
}

/* ===============================================
   RESPONSIVE ENHANCEMENTS
   =============================================== */

/* Mobile optimizations */
@media (max-width: 991.98px) {
    .OCarousel-container .OCarousel-picture-wrapper .title {
        background: var(--red, #ea5648);
        color: #fff;
        font-weight: 600;
    }

    .OCarousel-container .OCarousel-picture-wrapper .title strong {
        color: #fff;
    }

    /* Adjust navigation buttons for mobile */
    .ocarousel-grid .ocarousel .owl-nav button.owl-prev,
    .ocarousel-grid .ocarousel .owl-nav button.owl-next {
        font-size: 20px;
        padding: 8px 12px !important;
    }
}

/* ===============================================
   ACCESSIBILITY ENHANCEMENTS
   =============================================== */

/* Focus states for keyboard navigation */
.ocarousel-grid .ocarousel .owl-nav button:focus {
    outline: 2px solid var(--red, #ea5648);
    outline-offset: 2px;
}

/* Enhanced High Contrast Mode Support for Accessibility */
@media (prefers-contrast: high) {
    .ocarousel-grid .title {
        border-bottom-width: 3px;
        color: #000000 !important;
    }

    /* High contrast navigation buttons */
    .ocarousel-grid .ocarousel .owl-nav button.owl-prev,
    .ocarousel-grid .ocarousel .owl-nav button.owl-next {
        border: 3px solid #000000 !important;
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .ocarousel-grid .ocarousel .owl-nav button.owl-prev:hover,
    .ocarousel-grid .ocarousel .owl-nav button.owl-next:hover {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    /* High contrast product buttons */
    .ocarousel .item-box .product-box-add-to-cart-button,
    .ocarousel .item-box .btn.btn-primary,
    .ocarousel .item-box .add-to-cart-button {
        border: 3px solid #000000 !important;
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .ocarousel .item-box .add-to-wishlist-button,
    .ocarousel .item-box .add-to-compare-list-button {
        border: 3px solid #000000 !important;
        background-color: #ffffff !important;
    }

    /* High contrast product cards */
    .ocarousel .item-box .product-item {
        border: 3px solid #000000 !important;
    }
}

/* ===============================================
   PERFORMANCE OPTIMIZATIONS
   =============================================== */

/* Enhanced Performance Optimizations */
.ocarousel-grid .ocarousel .owl-nav button,
.ocarousel .item-box .add-to-wishlist-button,
.ocarousel .item-box .add-to-compare-list-button,
.ocarousel .item-box .product-box-add-to-cart-button,
.ocarousel .item-box .product-item,
.lds-ellipsis div {
    will-change: transform, background-color, box-shadow;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* Optimize image rendering for 4:3 aspect ratio */
.ocarousel .item-box .product-item .picture a img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: bicubic;
}

/* ===============================================
   HOME PAGE TOP SLIDER HEIGHT CONSTRAINT
   =============================================== */

/* Set max-height 500px for home page top slider on desktop only */
@media (min-width: 992px) {
    /* CRITICAL: Use max-height for flexible behavior while maintaining limits */
    .slider-grid {
        max-height: 800px !important;
        height: auto !important;
        overflow: visible !important;
    }

    .slider-grid .owl-stage-outer {
        max-height: 800px !important;
        height: auto !important;
        overflow: visible !important;
    }

    .slider-grid .owl-stage {
        max-height: 800px !important;
        height: auto !important;
    }

    /* Ensure slide containers use flexible height up to maximum */
    .slider-grid .owl-item {
        max-height: 800px !important;
        height: auto !important;
        display: block !important;
    }

    /* Target all possible slider content containers */
    .slider-grid .owl-item > *,
    .slider-grid .owl-item > div,
    .slider-grid .owl-item > a,
    .slider-grid .slide,
    .slider-grid .carousel-item,
    .slider-grid .slider-item {
        max-height: 800px !important;
        height: auto !important;
        width: 100% !important;
        display: block !important;
    }

    /* All slider images - flexible height with maximum constraint */
    .slider-grid img,
    .slider-grid .owl-item img,
    .slider-grid .ocarousel-background img,
    .slider-grid .carousel-item img,
    .slider-grid .slide img {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -o-transform: none !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: 800px !important;
        min-height: 300px !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }

    /* ===============================================
       SLIDER TEXT SIZE REDUCTIONS FOR .slider-grid
       =============================================== */

    /* Much smaller font sizes for slider title within .slider-grid */
    .slider-grid .slider-title,
    .slider-grid .slider-title *,
    .slider-grid h1.slider-title,
    .slider-grid h2.slider-title,
    .slider-grid .slide-title,
    .slider-grid .carousel-title {
        font-size: 24px !important; /* Much smaller - reduced from 32px */
        line-height: 1.2 !important;
        font-weight: 700 !important;
        font-family: var(--font-primary) !important;
        margin-bottom: 4px !important;
        margin-top: 0 !important;
    }

    /* Much smaller font sizes for slider subtitle within .slider-grid */
    .slider-grid .slider-subtitle,
    .slider-grid .slider-subtitle *,
    .slider-grid .slide-subtitle,
    .slider-grid .carousel-subtitle,
    .slider-grid .slider-description,
    .slider-grid .slide-description {
        font-size: 13px !important; /* Much smaller - reduced from 16px */
        line-height: 1.3 !important;
        font-weight: 400 !important;
        font-family: var(--font-default) !important;
        margin-bottom: 3px !important;
        margin-top: 0 !important;
    }

    /* ===============================================
       REDUCE .slider-container MARGIN FOR .slider-grid
       =============================================== */

    /* Reduce .slider-container margin to 0px within .slider-grid */
    .slider-grid .slider-container {
        margin: 0px !important;
    }

    /* ===============================================
       SLIDER-GRID NAVIGATION ARROW POSITIONING FIX
       =============================================== */

    /* Fix navigation arrow positioning for .slider-grid after margin reduction */
    .slider-grid .owl-nav button.owl-prev,
    .slider-grid .owl-carousel .owl-nav button.owl-prev {
        position: absolute !important;
        left: 10px !important; /* ADJUSTED: Positioned inside container due to 0px margin */
        z-index: 20 !important; /* Higher z-index to ensure visibility above slider content */
    }

    .slider-grid .owl-nav button.owl-next,
    .slider-grid .owl-carousel .owl-nav button.owl-next {
        position: absolute !important;
        right: 10px !important; /* ADJUSTED: Positioned inside container due to 0px margin */
        z-index: 20 !important; /* Higher z-index to ensure visibility above slider content */
    }

    /* Ensure .slider-grid container allows for proper navigation display */
    .slider-grid {
        position: relative !important;
        overflow: visible !important;
    }

    /* Make sure .slider-grid owl-carousel has relative positioning */
    .slider-grid .owl-carousel {
        position: relative !important;
        overflow: hidden !important; /* Keep content clipped but allow nav buttons to show */
    }

    /* ===============================================
       REDUCE .slider-caption MARGINS/PADDING FOR .slider-grid
       =============================================== */

    /* Much smaller caption spacing to fit better with image proportions */
    .slider-grid .slider-caption,
    .slider-grid .slide-caption,
    .slider-grid .caption,
    .slider-grid .slide-content {
        padding: 12px 16px !important; /* Much smaller - reduced from 20px 25px */
        margin: 8px !important; /* Much smaller - reduced from 15px */
    }

    /* Minimal spacing in caption text elements */
    .slider-grid .slider-caption *,
    .slider-grid .slide-caption *,
    .slider-grid .caption * {
        margin-bottom: 4px !important; /* Much smaller - reduced from 8px */
    }

    /* Minimal top/bottom margins for caption container */
    .slider-grid .slider-caption:first-child,
    .slider-grid .slide-caption:first-child {
        margin-top: 6px !important; /* Reduced from 10px */
    }

    .slider-grid .slider-caption:last-child,
    .slider-grid .slide-caption:last-child {
        margin-bottom: 6px !important; /* Reduced from 10px */
    }
}

/* ===============================================
   PRINT STYLES
   =============================================== */

@media print {
    .ocarousel-grid .ocarousel .owl-nav,
    .lds-ellipsis {
        display: none !important;
    }

    .ocarousel-grid .title {
        color: #000 !important;
        border-bottom: 1px solid #000 !important;
    }
}

/* ===============================================
   PRODUCT ITEM LAYOUT FIXES
   =============================================== */

/* Fix picture height issues in carousel product items - 3:4 aspect ratio */
.ocarousel .item-box .product-item .picture {
    width: 100%;
    aspect-ratio: 3/4; /* 3:4 aspect ratio (width:height) */
    overflow: hidden;
    position: relative;
    margin-bottom: 4px; /* OPTIMIZED: 8px ??4px for more image space */
    border-radius: 0px; /* Sharp edge aesthetic */
}

.ocarousel .item-box .product-item .picture a {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ocarousel .item-box .product-item .picture a img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

/* Hover effects for carousel product images */
.ocarousel .item-box .product-item .picture a:hover img {
    transform: translate(-50%, -50%) scale(1.05);
    -webkit-transform: translate(-50%, -50%) scale(1.05);
    -moz-transform: translate(-50%, -50%) scale(1.05);
    -o-transform: translate(-50%, -50%) scale(1.05);
}

/* ===============================================
   OPTION 1: INCREASED PRODUCT CARD SIZE (PHASE 4)
   =============================================== */

/* Product Card Layout - Increased Container Size with 3:4 Ratio Maintained */
.ocarousel .item-box .product-item {
    background: #ffffff;
    border: 2px solid #f8f8f8;
    border-radius: 0px; /* Sharp edge aesthetic */
    padding: 8px; /* OPTIMIZED: Previous phase optimization maintained */
    height: auto;
    min-height: 640px; /* INCREASED: 560px ??640px (+80px, 14% increase for larger images) */
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Enhanced Product Card Hover Effect */
.ocarousel .item-box .product-item:hover {
    border-color: #bbbb8e;
    box-shadow: 0 8px 25px rgba(234, 86, 72, 0.15);
    -webkit-box-shadow: 0 8px 25px rgba(234, 86, 72, 0.15);
    -moz-box-shadow: 0 8px 25px rgba(234, 86, 72, 0.15);
    transform: translateY(-3px);
}

/* Product title styling fixes */
.ocarousel .item-box .product-item .product-title {
    height: auto;
    min-height: 40px;
    margin-bottom: 4px; /* OPTIMIZED: 6px ??4px for more image space */
    text-align: center;
    font-family: var(--font-default);
    line-height: 1.3;
}

.ocarousel .item-box .product-item .product-title a {
    color: var(--grey-black, #333333);
    font-weight: 200;
    font-size: 14px;
    text-decoration: none;
    display: block;
}

.ocarousel .item-box .product-item .product-title a:hover {
    color: var(--red, #ea5648);
}

/* Price styling - OPTIMIZED: Further reduced margin-bottom for more image space */
.ocarousel .item-box .product-item .prices {
    text-align: center;
    margin-bottom: 4px; /* OPTIMIZED: 6px ??4px for more image space (Phase 3) */
}

.ocarousel .item-box .product-item .prices .price {
    font-family: var(--font-default);
    font-weight: 200;
    color: var(--grey-black, #333333);
    font-size: 14px;
}

.ocarousel .item-box .product-item .prices .price.old-price {
    text-decoration: line-through;
    color: #999;
    margin-right: 10px;
    font-size: 14px;
    display: inline-block;
}

/* Add to Cart Button - Professional Simplex Styling - OPTIMIZED: Reduced padding and min-height */
.ocarousel .item-box .product-box-add-to-cart-button,
.ocarousel .item-box .btn.btn-primary,
.ocarousel .item-box button.btn-primary,
.ocarousel .item-box .add-to-cart-button,
.ocarousel .item-box input[type="button"],
.ocarousel .product-item .btn,
.ocarousel .product-item button,
.owl-carousel .item-box button,
.owl-carousel .product-item .btn,
.ocarousel .item-box .btn-secondary,
.ocarousel .item-box .rent-button,
.ocarousel .item-box input[value*="RENT"],
.ocarousel .item-box input[value*="ADD TO CART"] {
    /* Base Styling */
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 2px solid #f0f0f0 !important;
    color: var(--grey-black, #333333) !important;
    border-radius: 0px !important;

    /* Typography */
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;

    /* Layout - OPTIMIZED: Reduced vertical padding and min-height for more image space */
    padding: 10px 20px !important; /* OPTIMIZED: 12px ??10px vertical for more image space (Phase 3) */
    width: 100% !important;
    min-height: 42px !important; /* OPTIMIZED: 45px ??42px for more image space (Phase 3) */

    /* Effects */
    transition: all 0.3s ease-in-out !important;
    -webkit-transition: all 0.3s ease-in-out !important;
    -moz-transition: all 0.3s ease-in-out !important;
    -o-transition: all 0.3s ease-in-out !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}

/* Add to Cart Button Hover States - Enhanced Professional Animation */
.ocarousel .item-box .product-box-add-to-cart-button:hover,
.ocarousel .item-box .btn.btn-primary:hover,
.ocarousel .item-box button.btn-primary:hover,
.ocarousel .item-box .add-to-cart-button:hover,
.ocarousel .item-box input[type="button"]:hover,
.ocarousel .product-item .btn:hover,
.ocarousel .product-item button:hover,
.owl-carousel .item-box button:hover,
.owl-carousel .product-item .btn:hover,
.ocarousel .item-box .btn-secondary:hover,
.ocarousel .item-box .rent-button:hover,
.ocarousel .item-box input[value*="RENT"]:hover,
.ocarousel .item-box input[value*="ADD TO CART"]:hover {
    background-color: var(--red, #ea5648) !important;
    background: var(--red, #ea5648) !important;
    border-color: var(--red, #ea5648) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(234, 86, 72, 0.4) !important;
}

/* Enhanced Focus States for Accessibility Compliance */
.ocarousel .item-box .product-box-add-to-cart-button:focus,
.ocarousel .item-box .btn.btn-primary:focus,
.ocarousel .item-box button.btn-primary:focus,
.ocarousel .item-box .add-to-cart-button:focus,
.ocarousel .item-box input[type="button"]:focus,
.ocarousel .product-item .btn:focus,
.ocarousel .product-item button:focus {
    outline: none !important;
    background-color: var(--red, #ea5648) !important;
    border-color: var(--red, #ea5648) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(234, 86, 72, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Focus States for Wishlist and Compare Buttons */
.ocarousel .item-box .add-to-wishlist-button:focus,
.ocarousel .item-box .add-to-compare-list-button:focus {
    outline: none !important;
    background-color: var(--red, #ea5648) !important;
    border-color: var(--red, #ea5648) !important;
    box-shadow: 0 0 0 4px rgba(234, 86, 72, 0.4) !important;
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* ISSUE #2 FIX: Wishlist Button Container - Prevent Left Truncation */
.ocarousel .item-box .wishlist-compare-wrapper,
.ocarousel .product-item .wishlist-compare-wrapper,

/* Show on hover - targeting both item-box and product-item structures */
.ocarousel .item-box:hover .wishlist-compare-wrapper,
.ocarousel .product-item:hover .wishlist-compare-wrapper,

/* ISSUE #2 FIX: Wishlist Button Dimensions - Prevent Left Truncation */
.ocarousel .item-box .add-to-wishlist-button,
.ocarousel .item-box .add-to-compare-list-button,
.ocarousel .item-box .button-2,
.ocarousel .product-item .add-to-wishlist-button,
.ocarousel .product-item .add-to-compare-list-button,
.ocarousel .product-item .button-2,

/* FIXED: Enhanced Unicode Icons for Wishlist and Compare Buttons */
.ocarousel .item-box .add-to-wishlist-button::before,
.ocarousel .product-item .add-to-wishlist-button::before,

/* FIXED: Enhanced Unicode Icons for Compare Buttons */
.ocarousel .item-box .add-to-compare-list-button::before,
.ocarousel .product-item .add-to-compare-list-button::before,

/* Wishlist Button Hover States - White Heart on Red Background */
.ocarousel .item-box .add-to-wishlist-button:hover,
.ocarousel .item-box .add-to-compare-list-button:hover,
.ocarousel .item-box .button-2:hover,

/* White heart icon color on hover */
.ocarousel .item-box .add-to-wishlist-button:hover::before,

/* White compare icon color on hover */
.ocarousel .item-box .add-to-compare-list-button:hover::before,

/* Compare Button - Professional Styling with Proper Icon */
.ocarousel .item-box .add-to-compare-list-button {
    background-image: url('../images/product-compare-icon.png') !important;
    background-position: center !important;
    background-size: 20px 20px !important;
}

.ocarousel .item-box .add-to-compare-list-button:hover {
    background-color: var(--red, #ea5648) !important;
    border-color: var(--red, #ea5648) !important;
    background-image: url('../images/product-compare-icon.png') !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    opacity: 1 !important;
}

/* Show buttons on product hover for better UX */
.ocarousel .item-box .product-item:hover .add-to-wishlist-button,
.ocarousel .item-box .product-item:hover .add-to-compare-list-button {
    opacity: 1 !important;
}

/* ===============================================
   RESPONSIVE LAYOUT FIXES
   =============================================== */

/* RESPONSIVE MIN-HEIGHT FIX: Tablet Range (768px-1200px) */
@media (min-width: 768px) and (max-width: 1200px) {
    /* PHASE 4: Increased min-height for tablets to accommodate larger images */
    .ocarousel .item-box .product-item {
        min-height: 480px !important; /* INCREASED: 420px ??480px (+60px, 14% increase proportional to desktop) */
    }
}

/* Enhanced Mobile Optimizations */
@media (max-width: 767.98px) {

    /* .slider-grid navigation positioning for mobile */
    .slider-grid .owl-nav button.owl-prev,
    .slider-grid .owl-carousel .owl-nav button.owl-prev {
        left: 8px !important; /* MOBILE: Closer to edge but still visible */
    }

    .slider-grid .owl-nav button.owl-next,
    .slider-grid .owl-carousel .owl-nav button.owl-next {
        right: 8px !important; /* MOBILE: Closer to edge but still visible */
    }

    /* ===============================================
       RESPONSIVE SLIDER TEXT SIZES FOR MOBILE
       =============================================== */

    /* Mobile font sizes for slider title within .slider-grid */
    .slider-grid .slider-title,
    .slider-grid .slider-title *,
    .slider-grid h1.slider-title,
    .slider-grid h2.slider-title,
    .slider-grid .slide-title,
    .slider-grid .carousel-title {
        font-size: 20px !important; /* Mobile - reduced from desktop 24px */
        line-height: 1.2 !important;
        font-weight: 700 !important;
        font-family: var(--font-primary) !important;
        margin-bottom: 4px !important;
        margin-top: 0 !important;
    }

    /* Mobile font sizes for slider subtitle within .slider-grid */
    .slider-grid .slider-subtitle,
    .slider-grid .slider-subtitle *,
    .slider-grid .slide-subtitle,
    .slider-grid .carousel-subtitle,
    .slider-grid .slider-description,
    .slider-grid .slide-description {
        font-size: 11px !important; /* Mobile - reduced from desktop 13px */
        line-height: 1.3 !important;
        font-weight: 400 !important;
        font-family: var(--font-default) !important;
        margin-bottom: 3px !important;
        margin-top: 0 !important;
    }
}

/* ===============================================
   NAVIGATION BUTTONS - AUTHENTIC SIMPLEX STYLING
   =============================================== */

/* Navigation Button Positioning - Symmetric Outside Layout */
.ocarousel-grid .ocarousel .owl-nav button.owl-prev {
    position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
    left: -24px !important; /* SYMMETRIC: Clean outside positioning */
}

.ocarousel-grid .ocarousel .owl-nav button.owl-next {
    position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
    right: -24px !important; /* SYMMETRIC: Matches left positioning exactly */
}

/* Home featured slider positioning - separate from ocarousel-grid */

/* Enhanced Mobile Navigation Positioning */
@media (max-width: 767.98px) {
    .ocarousel-grid .ocarousel .owl-nav button.owl-prev {
        position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
        left: -20px !important; /* SYMMETRIC: Balanced mobile positioning */
    }

    .ocarousel-grid .ocarousel .owl-nav button.owl-next {
        position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
        right: -20px !important; /* SYMMETRIC: Matches left positioning for visual balance */
    }

    /* Home featured slider mobile positioning - separate */
}

/* ===============================================
   FINAL CLEANUP & OVERRIDES
   =============================================== */

/* Enhanced Tablet Optimizations */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* .slider-grid navigation positioning for tablets */
    .slider-grid .owl-nav button.owl-prev,
    .slider-grid .owl-carousel .owl-nav button.owl-prev {
        left: 9px !important; /* TABLET: Balanced positioning */
    }

    .slider-grid .owl-nav button.owl-next,
    .slider-grid .owl-carousel .owl-nav button.owl-next {
        right: 9px !important; /* TABLET: Balanced positioning */
    }

    /* ===============================================
       RESPONSIVE SLIDER TEXT SIZES FOR TABLET
       =============================================== */

    /* Tablet font sizes for slider title within .slider-grid */
    .slider-grid .slider-title,
    .slider-grid .slider-title *,
    .slider-grid h1.slider-title,
    .slider-grid h2.slider-title,
    .slider-grid .slide-title,
    .slider-grid .carousel-title {
        font-size: 22px !important; /* Tablet - reduced from desktop 24px */
        line-height: 1.2 !important;
        font-weight: 700 !important;
        font-family: var(--font-primary) !important;
        margin-bottom: 4px !important;
        margin-top: 0 !important;
    }

    /* Tablet font sizes for slider subtitle within .slider-grid */
    .slider-grid .slider-subtitle,
    .slider-grid .slider-subtitle *,
    .slider-grid .slide-subtitle,
    .slider-grid .carousel-subtitle,
    .slider-grid .slider-description,
    .slider-grid .slide-description {
        font-size: 12px !important; /* Tablet - reduced from desktop 13px */
        line-height: 1.3 !important;
        font-weight: 400 !important;
        font-family: var(--font-default) !important;
        margin-bottom: 3px !important;
        margin-top: 0 !important;
    }
    .ocarousel-grid .ocarousel .owl-nav button.owl-prev {
        position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
        left: -22px !important; /* SYMMETRIC: Balanced tablet positioning */
    }

    .ocarousel-grid .ocarousel .owl-nav button.owl-next {
        position: absolute !important; /* CRITICAL: Override responsive.css position:inherit */
        right: -22px !important; /* SYMMETRIC: Matches left positioning for visual balance */
    }

    /* Home featured slider tablet positioning - separate */
}

/* ===============================================
   COMPREHENSIVE FONT OVERRIDE - MAXIMUM SPECIFICITY
   =============================================== */

/* Ultimate font override for ocarousel-grid .title elements to ensure the shop heading face is applied */
body .ocarousel-grid .title,
body .ocarousel-grid .title *,
html body .ocarousel-grid .title,
html body .ocarousel-grid .title * {
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--grey-black, #333333) !important;
}

/* Maximum specificity for strong elements within carousel titles */
body .ocarousel-grid .title strong,
body .ocarousel-grid .title strong *,
html body .ocarousel-grid .title strong,
html body .ocarousel-grid .title strong * {
    font-family: var(--font-primary) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--grey-black, #333333) !important;
}

/* ===============================================
   NAVIGATION BUTTON CONTENT (ICONS)
   =============================================== */

/* Navigation Arrow Icons - FontAwesome 4.7.0 Chevron */
.ocarousel-grid .ocarousel .owl-nav button.owl-prev:before,
.ocarousel .owl-nav button.owl-prev:before,
.owl-carousel .owl-nav button.owl-prev:before,
#home-new-products-slider.owl-carousel .owl-nav button.owl-prev:before,
#home-bestseller-slider.owl-carousel .owl-nav button.owl-prev:before {
    content: '\f053' !important; /* FontAwesome 4.7 chevron-left */
    font-family: 'FontAwesome' !important;
    font-weight: normal !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ocarousel-grid .ocarousel .owl-nav button.owl-next:before,
.ocarousel .owl-nav button.owl-next:before,
.owl-carousel .owl-nav button.owl-next:before,
#home-new-products-slider.owl-carousel .owl-nav button.owl-next:before,
#home-bestseller-slider.owl-carousel .owl-nav button.owl-next:before {
    content: '\f054' !important; /* FontAwesome 4.7 chevron-right */
    font-family: 'FontAwesome' !important;
    font-weight: normal !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* FontAwesome icons for enhanced visual appeal (when FontAwesome is available) */
.ocarousel-grid.fa-icons .ocarousel .owl-nav button.owl-prev:before {
    content: '\f053' !important; /* FontAwesome chevron-left */
    font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 24px !important;
}

.ocarousel-grid.fa-icons .ocarousel .owl-nav button.owl-next:before {
    content: '\f054' !important; /* FontAwesome chevron-right */
    font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 24px !important;
}

/* ENHANCED: Wishlist Button Icon Content - Increased Size & Perfect Centering */
.ocarousel .item-box .add-to-wishlist-button:before {
    content: '\2665' !important; /* Unicode heart symbol */
    font-size: 18px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ENHANCED: Compare Button Icon Content - Increased Size & Perfect Centering */
.ocarousel .item-box .add-to-compare-list-button:before {
    content: '\2696' !important; /* Unicode balance scale symbol */
    font-size: 16px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* FontAwesome alternative for better icon quality (when available) */
.fa-icons .ocarousel .item-box .add-to-wishlist-button:before {
    content: '\f004' !important; /* FontAwesome heart */
    font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 400 !important;
    font-size: 15px !important;
}

.fa-icons .ocarousel .item-box .add-to-compare-list-button:before {
    content: '\f24d' !important; /* FontAwesome balance-scale */
    font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}

/* ===============================================
   FEATURED PRODUCT SLIDER SPECIFIC FIXES
   =============================================== */

/* Fix featured product slider container and ensure proper layout */
.home-page-product-grid {
    position: relative !important;
    overflow: visible !important;
    margin-bottom: 0px !important;
}

.home-page-product-grid .product-grid {
    position: relative !important;
    overflow: visible !important;
}

/* Featured slider owl-carousel specific styling */

/* Ensure equal height for featured slider product cards */

/* Image area (picture column) - 80% height with 3:4 aspect ratio */

/* Caption area (content column) - 20% height */

/* ===============================================
   ADDITIONAL ENHANCEMENTS
   =============================================== */

/* Improve product title styling */
.ocarousel .item-box .product-item .product-title {
    text-align: center;
    margin-bottom: 8px; /* REDUCED: 15px ??8px for more image space */
    min-height: 30px;
    font-family: var(--font-default);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ocarousel .item-box .product-item .product-title a {
    color: var(--grey-black, #333333);
    font-weight: 200;
    font-size: 14px;
    text-decoration: none;
    display: block;
    transition: color 0.3s ease-in-out;
}

.ocarousel .item-box .product-item .product-title a:hover {
    color: var(--red, #ea5648);
}

/* Enhanced price styling */
.ocarousel .item-box .product-item .prices {
    text-align: center;
    margin-bottom: 10px; /* REDUCED: 20px ??10px for more image space */
}

.ocarousel .item-box .product-item .prices .price {
    font-family: var(--font-default);
    font-weight: 200;
    color: var(--grey-black, #333333);
    font-size: 14px;
    display: inline-block;
}

.ocarousel .item-box .product-item .prices .price.old-price {
    text-decoration: line-through;
    color: #999999;
    font-size: 14px;
    margin-right: 10px;
    font-weight: 400;
}

/* Subtle loading animation enhancement */
@keyframes simplexPulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.ocarousel-grid.loading .ocarousel .item-box .product-item {
    animation: simplexPulse 1.5s ease-in-out infinite;
}

/* ===============================================
   CRITICAL UI FIXES APPLIED
   ===============================================

   ISSUE #1 FIXED: Navigation Arrow Display
   ??Removed pseudo-element content blocking HTML arrows
   ??Navigation buttons now display ????arrows instead of "PREV"/"NEXT" text
   ??32px arrow size for optimal visibility
   ??Proper centering with flexbox layout
   ??Responsive sizing: 32px desktop, 30px tablet, 26px mobile
   
   ISSUE #2 FIXED: Wishlist Button Truncation
   ??Reduced container right positioning from 15px to 6px
   ??Reduced button dimensions from 42px to 36px to prevent clipping
   ??Mobile optimizations: 32px buttons positioned at 4px from right
   ??Proper heart (?? and compare (?? icons display
   ??Maintained hover states with red background and white icons
   ??Prevented overflow issues with max-width constraints
   
   ACCESSIBILITY MAINTAINED:
   ??Touch target balance: 36px minimum (acceptable for usability)
   ??High contrast mode support
   ??Reduced motion support
   ??WCAG compliance maintained with visual enhancements
   
   INTEGRATION NOTES:
   This file should be included after the main OCarousels CSS files:
   1. owl.carousel.css
   2. styles.css (from OCarousels plugin)
   3. simplex.styles.css (Simplex theme)
   4. ocarousels-simplex-override.css (this file)

   Include in theme layout file:
   <link rel="stylesheet" href="~/Themes/SimplexTheme/Content/css/ocarousels-simplex-override.css" />

   NAVIGATION POSITIONING OPTIMIZATION:
   ??Desktop: -24px symmetric positioning for clean separation and visual balance
   ??Tablet: -22px symmetric positioning for consistent visual hierarchy
   ??Mobile: -20px symmetric positioning for optimal touch interaction
   ??Maintains accessibility with 46px+ button dimensions
   ??Provides perfect visual balance without content overlap
   
   POSITIONING RATIONALE:
   - Symmetric negative values (-24px both sides) create perfect visual balance
   - Clean separation prevents any content overlap issues
   - Responsive values maintain symmetry across all breakpoints
   - Button size (46px) ensures safe positioning without obscuring content
   - Professional appearance with consistent spacing and visual harmony

   DESKTOP IMAGE CROPPING FIX:
   ??Changed object-fit from 'contain' to 'cover' for .slider-grid images
   ??Problem: object-fit: contain was scaling images down to fit entirely in 500px height
   ??Solution: object-fit: cover fills the container properly, cropping edges if needed
   ??Added proper container height (500px) and flexbox centering for slide items
   ??Added background color fallback for any exposed areas
   ??Alternative: .preserve-aspect class available for images that need full display
   
   SLIDER-GRID NAVIGATION ARROW TRUNCATION FIX:
   ??Problem: .slider-grid .slider-container margin reduced to 0px caused arrow truncation
   ??Root Cause: Navigation arrows positioned at left: -24px / right: -24px, but no margin space
   ??Solution: Added specific .slider-grid navigation positioning inside container bounds
   ??Desktop: left: 10px / right: 10px (positioned inside container)
   ??Tablet: left: 9px / right: 9px (balanced positioning)
   ??Mobile: left: 8px / right: 8px (closer to edges but still visible)
   ??Enhanced z-index: 20 to ensure visibility above slider content
   ??Maintained overflow: hidden on .owl-carousel while allowing nav button visibility
   
   TECHNICAL DETAILS:
   - object-fit: contain = scales image to fit entirely inside container (can leave empty space)
   - object-fit: cover = scales image to fill container completely (may crop edges)
   - For hero sliders, 'cover' is usually preferred to avoid empty space
   - 500px height constraint maintained for desktop consistency
   - Responsive behavior unaffected (mobile/tablet still use responsive scaling)
   - .slider-grid navigation now positioned inside container due to 0px margin constraint
   - .ocarousel-grid navigation remains outside container with negative positioning
   - Phase 3 optimizations applied strategic reductions while maintaining professional appearance
   - Phase 4 implements proportional container size increase maintaining 3:4 aspect ratio

   =============================================== */