/* MOBILE FIXES: Prevent horizontal scroll and bottom white space */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    height: auto !important;
}

main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

* {
    box-sizing: border-box;
}

/* Fix the min-h-screen div that's causing blank space */
div.min-h-screen.bg-background {
    min-height: auto !important;
    height: auto !important;
}

@media (max-width: 768px) {
    div.min-h-screen.bg-background {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 0 !important;
    }
    
    div.min-h-screen.bg-background > main {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .pb-20 {
        padding-bottom: 1rem !important;
    }
}

/* BANNER SIZE OPTIMIZATION: Prevent extreme upscaling while maintaining layout */
#carousel-banners {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 200px;
    position: relative;
    background-color: transparent;
}

/* Se não houver imagens, garantir que o container ainda seja visível */
#carousel-banners:empty::before {
    content: '';
    display: block;
    width: 100%;
    height: 200px;
    background: transparent;
}

#carousel-banners .banner-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prevent banner from being stretched beyond reasonable limits */
.owl-carousel-0 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure owl-stage-outer hides overflow */
.owl-carousel-0 .owl-stage-outer {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
}

/* Ensure banner maintains aspect ratio and doesn't get distorted */
.owl-carousel-0 img,
.owl-carousel-0 picture {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure only active items are visible - let Owl Carousel calculate width automatically */
#carousel-banners.owl-carousel-0 .owl-item {
    display: block !important;
    float: left;
    position: relative;
    opacity: 1 !important;
    visibility: visible !important;
}

/* CRITICAL: Force correct width for owl-items based on container */
#carousel-banners.owl-carousel-0 .owl-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

#carousel-banners.owl-carousel-0.owl-loaded .owl-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* Force all owl-items to be visible, not just active ones initially */
#carousel-banners .owl-item {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

#carousel-banners .owl-item.active {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Ensure the container doesn't allow items to stack */
#carousel-banners.owl-carousel-0 {
    display: block !important;
    overflow: hidden !important;
    position: relative;
}

/* Critical: Ensure owl-stage-outer hides overflow properly */
#carousel-banners.owl-carousel-0 .owl-stage-outer {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
}

/* Ensure images inside carousel don't force layout */
#carousel-banners.owl-carousel-0 .owl-item img,
#carousel-banners.owl-carousel-0 .owl-item picture,
#carousel-banners.owl-carousel-0 .owl-item a,
#carousel-banners img,
#carousel-banners picture,
#carousel-banners a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    position: relative !important;
}

/* Force images to be visible even if carousel hasn't initialized */
#carousel-banners > a,
#carousel-banners > img,
#carousel-banners > picture {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

#carousel-banners.owl-carousel-0 .owl-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#carousel-banners.owl-carousel-0 .owl-stage-outer {
    display: block !important;
    visibility: visible !important;
}

#carousel-banners.owl-carousel-0 .owl-stage {
    display: flex !important;
    visibility: visible !important;
}

/* Ensure banners are visible */
#carousel-banners {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#carousel-banners .owl-item {
    display: block !important;
    visibility: visible !important;
}

#carousel-banners img,
#carousel-banners picture {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
}

/* CRITICAL: Force all images to be visible regardless of carousel state */
#carousel-banners * {
    max-width: 100% !important;
}

#carousel-banners a {
    display: block !important;
    width: 100% !important;
}

/* Override any Owl Carousel hiding - BUT allow first item to be visible */
#carousel-banners .owl-item:not(.active):not(:first-child) {
    opacity: 0 !important;
    visibility: hidden !important;
}

#carousel-banners .owl-item.active,
#carousel-banners .owl-item:first-child {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

/* CRITICAL: Force owl-stage to start at position 0 */
/*#carousel-banners .owl-stage {
    transform: translate3d(0px, 0px, 0px) !important;
}
*/

/* Override transform on owl-stage-outer to ensure proper positioning */
#carousel-banners .owl-stage-outer {
    position: relative !important;
    overflow: hidden !important;
}

/* Ensure first item is always visible */
/*#carousel-banners .owl-item:first-child {
    transform: translate3d(0, 0, 0) !important;
}*/

#carousel-banners .owl-item.active img,
#carousel-banners .owl-item.active picture,
#carousel-banners .owl-item.active a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* MOBILE RESPONSIVE FIXES */
@media (max-width: 640px) {
    /* Fix product container width on mobile */
    #produtos-container-6 > div,
    #produtos-container-7 > div {
        width: calc(100vw - 3rem) !important;
        min-width: calc(100vw - 3rem) !important;
        max-width: calc(100vw - 3rem) !important;
    }
    
    /* Ensure containers don't overflow */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Fix category grid on mobile */
    .grid.grid-cols-2 {
        gap: 1rem !important;
    }
    
    /* Remove bottom padding that causes white space */
    main {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    section:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 2rem !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    #produtos-container-6 > div,
    #produtos-container-7 > div {
        width: calc(50% - 12px) !important;
        min-width: calc(50% - 12px) !important;
    }
}

@media (min-width: 1025px) {
    #produtos-container-6 > div,
    #produtos-container-7 > div {
        width: calc(25% - 18px) !important;
        min-width: calc(25% - 18px) !important;
    }
}

/* Prevent horizontal overflow from any element */
* {
    max-width: 100%;
}

img, picture, video {
    max-width: 100%;
    height: auto;
}

/* Keep Owl inline sizing intact for the mobile category carousel */
.owl-carousel-4 .owl-stage,
.owl-carousel-4 .owl-item {
    max-width: none !important;
}

.owl-carousel-4 .owl-stage-outer {
    overflow: hidden !important;
}

@media (max-width: 767px) {
    .owl-carousel-4 .owl-dots {
        margin-top: 0.75rem;
        text-align: center;
    }

    .owl-carousel-4 .owl-dots .owl-dot span {
        width: 10px;
        height: 10px;
        margin: 0 5px;
        background: #cbd5e1;
        opacity: 1;
    }

    .owl-carousel-4 .owl-dots .owl-dot.active span {
        background: hsl(var(--primary, 217 81% 35%));
    }

    .categorias-mobile-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        margin-top: 0.75rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: #64748b;
    }

    .categorias-mobile-hint svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }
}

/* Remove extra bottom space */
body > main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body > main > section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 1rem !important;
}

/* Ensure footer doesn't create extra space */
footer {
    margin-top: 0 !important;
}

/* Fix any element that might overflow */
section {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Desktop fixes - ensure proper layout */
@media (min-width: 1025px) {
    .container {
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Fix grid layouts on desktop */
    .grid.grid-cols-5 {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    /* Ensure 3-column grid is always 3 columns on desktop */
    section.bg-muted\\/30 .grid,
    section.bg-muted\\/30 .container > .grid,
    .grid.md\\:grid-cols-3,
    .grid[class*="md:grid-cols-3"] {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }
    
    /* Force 3 columns for the support section on desktop */
    @media (min-width: 768px) {
        section.bg-muted\\/30 .container > .grid[class*="md:grid-cols-3"],
        section.bg-muted\\/30 .container > .grid.md\\:grid-cols-3 {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 2rem !important;
        }
    }
    
    /* Ensure product cards have correct width on desktop */
    #produtos-container-6 > div,
    #produtos-container-7 > div {
        width: calc(25% - 18px) !important;
        min-width: calc(25% - 18px) !important;
        max-width: calc(25% - 18px) !important;
    }
}

/* Fix contrast on hover for "Por que comprar" cards */
/* CRITICAL: Force white text on blue background when hovering */
.porque-comprar-card:hover {
    background-color: hsl(var(--primary)) !important;
    color: #ffffff !important;
}

.porque-comprar-card:hover * {
    color: #ffffff !important;
}

.porque-comprar-card:hover h3 {
    color: #ffffff !important;
}

.porque-comprar-card:hover p {
    color: #ffffff !important;
}

.porque-comprar-card:hover strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.porque-comprar-card:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

/* Also target by class pattern for backup */
[class*="hover:bg-primary"]:hover.porque-comprar-card,
.porque-comprar-card[class*="hover:bg-primary"]:hover {
    background-color: hsl(var(--primary)) !important;
    color: #ffffff !important;
}

[class*="hover:bg-primary"]:hover.porque-comprar-card *,
.porque-comprar-card[class*="hover:bg-primary"]:hover * {
    color: #ffffff !important;
}

/* Ensure product containers scroll properly on mobile */
@media (max-width: 640px) {
    .overflow-hidden {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    .overflow-hidden::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    #produtos-container-6,
    #produtos-container-7 {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Fix específico para landscape (667x375) - iPhone SE landscape */
@media (max-width: 667px) and (min-width: 641px) and (max-height: 400px) {
    .overflow-hidden {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .overflow-hidden::-webkit-scrollbar {
        display: none;
    }
    
    #produtos-container-6,
    #produtos-container-7 {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Additional fix for blank space */
    body {
        height: auto !important;
        min-height: auto !important;
    }
    
    html {
        height: auto !important;
    }
}


.categorias-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .categorias-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}
.categoria-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    min-height: 300px;
}
.categoria-right-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .categoria-right-column {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 1.5rem;
    }
}
@media (min-width: 768px) {
    .categoria-card-large {
        min-height: 600px;
    }
    .categoria-card-small {
        aspect-ratio: 1;
        min-height: 290px;
    }
    .categoria-card-wide {
        grid-column: 1 / -1;
        aspect-ratio: 2 / 1;
        min-height: 290px;
    }
}
.categoria-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.categoria-card:hover img {
    transform: scale(1.05);
}
.categoria-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
}
.categoria-card-content {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    color: white;
}
.categoria-card-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
    .categoria-card-title {
        font-size: 2rem;
    }
}
.categoria-card-subtitle {
    font-size: 0.875rem;
    opacity: 0.95;
}
@media (min-width: 768px) {
    .categoria-card-subtitle {
        font-size: 1rem;
    }
}

}