/* ============================================================
   GREAT OFFERS CAROUSEL - COMPLETE REBUILD CSS
   Clean, minimal CSS to ensure Owl Carousel v1 works correctly
   ============================================================ */

/* Reset everything for Great Offers carousel */
.great-offers-wrapper {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Carousel container - center and constrain viewport */
.great-offers-wrapper .owl-carousel {
    width: 100% !important;
    max-width: 1170px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Stage outer - visible viewport (4 cards) */
.great-offers-wrapper .owl-stage-outer {
    width: 100% !important;
    max-width: 1170px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Wrapper outer - can expand beyond viewport */
.great-offers-wrapper .owl-wrapper-outer {
    width: auto !important;
    max-width: none !important;
    position: relative !important;
    overflow: visible !important;
}

/* Owl wrapper - MUST expand for all 12 items */
.great-offers-wrapper .owl-wrapper {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    position: relative !important;
    display: block !important;
    /* CRITICAL: Owl uses float layout, not flex */
    overflow: visible !important;
}

/* Owl stage - block for float layout */
.great-offers-wrapper .owl-stage {
    display: block !important;
    width: auto !important;
    position: relative !important;
}

/* Owl items - MUST use float:left (Owl Carousel v1 requirement) */
.great-offers-wrapper .owl-item {
    float: left !important;
    display: block !important;
    position: relative !important;
    width: auto !important; /* Owl will set inline width */
    min-width: 0 !important;
    clear: none !important; /* CRITICAL: Don't clear floats */
    /* DO NOT set left position - Owl uses float, not absolute positioning */
}

/* CRITICAL: Ensure wrapper doesn't collapse with floats */
.great-offers-wrapper .owl-wrapper::after {
    content: "" !important;
    display: block !important;
    clear: both !important;
    visibility: hidden !important;
    height: 0 !important;
}

/* Ensure items inside are properly sized */
.great-offers-wrapper .owl-item .item {
    width: 100% !important;
    display: block !important;
}

/* Remove any conflicting rules */
.great-offers-wrapper .owl-item * {
    box-sizing: border-box !important;
}

/* Navigation arrows */
.great-offers-wrapper .owl-controls {
    position: relative !important;
    margin-top: 20px !important;
}

.great-offers-wrapper .owl-buttons {
    position: absolute !important;
    top: 50% !important;
    width: 100% !important;
    margin-top: -20px !important;
}

.great-offers-wrapper .owl-prev,
.great-offers-wrapper .owl-next {
    position: absolute !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

.great-offers-wrapper .owl-prev {
    left: -50px !important;
}

.great-offers-wrapper .owl-next {
    right: -50px !important;
}