/* =========================================================
   MARKETPLACE / BANNER LAYOUT
========================================================= */

:root {
    --marketplace-header-height: 100px;
    --marketplace-sidebar-width: 280px;
    --marketplace-right-width: 300px;
    --marketplace-gap: 20px;
}

/* Allow sticky elements to work correctly */
main,
.marketplace-layout,
.marketplace-left,
.marketplace-right,
.marketplace-center,
.marketplace-hero {
    overflow: visible !important;
}

/* Main three-column homepage layout */
.marketplace-layout {
    display: grid;
    grid-template-columns:
        var(--marketplace-sidebar-width)
        minmax(0, 1fr)
        var(--marketplace-right-width);

    gap: var(--marketplace-gap);
    align-items: start;

    margin-top: 20px;
    margin-bottom: 60px;
}

/* Center scrolling content */
.marketplace-center {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 16px;
}

.marketplace-hero,
.marketplace-section {
    width: 100%;
    min-width: 0;
}

.marketplace-center .marketplace-section :is(.my-60, .mt-60, .mb-60) {
    margin-top: 12px !important;
    margin-bottom: 18px !important;
}

.marketplace-center .marketplace-section .section-header {
    margin-bottom: 12px;
}

.marketplace-center .marketplace-section .section-header .title {
    margin-bottom: 0;
}

/* =========================================================
   LEFT CATEGORY SIDEBAR
========================================================= */

.marketplace-left {
    position: sticky !important;
    top: calc(var(--marketplace-header-height) + 20px) !important;

    width: var(--marketplace-sidebar-width);
    min-width: var(--marketplace-sidebar-width);

    align-self: start;
    height: fit-content;

    z-index: 99;
}

/* Partial wrapper */
.marketplace-left .left-category-column {
    position: static !important;

    width: 100%;
    min-width: 0;
}

/* Actual category menu */
.marketplace-left .left-site-category {
    position: static !important;
    top: auto !important;
    left: auto !important;

    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 169px);

    overflow-y: auto;
    overflow-x: hidden;

    z-index: 99;
    padding: 0 0 14px;
    background: #fff;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
}

.marketplace-left .category-dropdown {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;

    border: none !important;
}

.marketplace-left .vertical-megamenu {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
}

.marketplace-left .vertical-megamenu > li {
    border-radius: 0;
    transition: background .16s;
}

.marketplace-left .vertical-megamenu > li:hover {
    background: #f5f7fb;
    box-shadow: none;
    transform: none;
}

.marketplace-left .vertical-megamenu > li > .menu-item {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 20px !important;
    border-radius: 0;
    color: #344054;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1.28;
}

.marketplace-left .menu-item-icon {
    display: none;
}

.marketplace-left .menu-item-arrowicon {
    margin-left: auto;
    position: static;
    transform: none;
    color: #667085;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    font-size: 14px;
    opacity: 1;
}

.marketplace-left .vertical-megamenu > li:hover > .menu-item,
.marketplace-left .vertical-megamenu > li:hover .menu-item-arrowicon {
    color: #1d2939;
}

/* =========================================================
   HOME BANNER SLIDER
========================================================= */

.marketplace-hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Slider container */
.slider-wrapper {
    position: relative;

    display: block;

    width: 100%;
    height: clamp(220px, 24vw, 345px);

    overflow: hidden;

    border-radius: 10px;
}

/* Owl root */
#homeBannerSlider {
    display: block;

    width: 100%;
    height: 100%;

    visibility: visible !important;
    opacity: 1 !important;
}

/* Owl generated structure */
#homeBannerSlider .owl-stage-outer {
    width: 100%;
    height: 100%;

    overflow: hidden;
}

#homeBannerSlider .owl-stage {
    display: flex;

    height: 100%;
}

#homeBannerSlider .owl-item {
    height: 100%;

    flex-shrink: 0;
}

#homeBannerSlider .slide-item {
    display: block;

    width: 100%;
    height: 100%;
}

#homeBannerSlider .slide-item a {
    display: block !important;

    width: 100%;
    height: 100%;
}

#homeBannerSlider .slide-item img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    visibility: visible !important;
    opacity: 1 !important;

    object-fit: cover;
    object-position: center;

    border-radius: 10px;
}

/* Show only first image before Owl initializes */
#homeBannerSlider:not(.owl-loaded) .slide-item {
    display: none;
}

#homeBannerSlider:not(.owl-loaded) .slide-item:first-child {
    display: block;
}

/* Ensure Owl is visible after initialization */
#homeBannerSlider.owl-loaded {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;
}

/* Optional dots */
#homeBannerSlider .owl-dots {
    position: absolute;
    right: 0;
    bottom: 12px;
    left: 0;

    display: flex;
    justify-content: center;
    gap: 6px;

    z-index: 5;
}

#homeBannerSlider .owl-dot span {
    display: block;

    width: 8px;
    height: 8px;

    margin: 0;

    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
}

#homeBannerSlider .owl-dot.active span {
    background: #fff;
}

/* =========================================================
   BANNER CATEGORIES BELOW SLIDER
========================================================= */

.marketplace-center .banner-categories {
    margin: 0 auto;
    padding-top: 1px;

    text-align: center;

    border: 1px solid hsl(var(--border));
    border-radius: 5px;

    transition: 0.3s;
}

.marketplace-center .banner-categories img {
    display: inline-block;

    width: 100% !important;
    max-width: 100px;

    margin: 0 auto;
    padding: 0 14px;

    transform: scale(1);
    transition: 0.3s;
}

.marketplace-center .banner-categories:hover img {
    transform: scale(1.05);
}

.marketplace-center .banner-categories .title {
    margin-top: 10px;

    font-size: 0.875rem;
}

/* =========================================================
   RIGHT STICKY BANNER
========================================================= */

.marketplace-right {
    position: sticky !important;
    top: calc(var(--marketplace-header-height) + 20px) !important;

    width: var(--marketplace-right-width);
    min-width: var(--marketplace-right-width);

    align-self: start;
    height: fit-content;

    z-index: 98;
}

.marketplace-right .hero-banner {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;

    width: 100% !important;
    height: auto;
    min-height: 0;
    max-height: none;

    overflow: hidden;

    background: hsl(var(--white));
    border-radius: 10px;
}

.marketplace-right .hero-banner a {
    display: block !important;

    width: 100%;
    height: auto;
}

.marketplace-right .hero-banner img {
    display: block;

    width: 100% !important;
    height: auto !important;

    object-fit: contain;
    object-position: center top;

    transform: none !important;
    transition: none !important;
}

.marketplace-right .hero-banner:hover img {
    transform: none !important;
}

/* =========================================================
   PRODUCT GRID INSIDE CENTER COLUMN
========================================================= */

.marketplace-center .product-wrapper {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
    max-width: 100%;

    margin-inline: auto;

    gap: 16px;
}

.marketplace-center .product-card {
    width: 100%;
    min-width: 0;

    margin: 0;
    border-color: transparent;
    box-shadow: none;
}

.marketplace-center .product-card:hover,
.marketplace-center .product-card.active,
.marketplace-center .product-card:focus-within {
    border-color: hsl(var(--base));
}

/* =========================================================
   LEGACY HERO CLASSES
   Prevent older rules from interfering
========================================================= */

.hero-section {
    display: block;

    width: 100%;

    margin: 0;

    overflow: visible !important;
}

.hero-slider {
    display: flex;
    flex-direction: column;
    gap: 16px;

    width: 100%;
    min-width: 0;

    overflow: visible !important;
}

.left-category-column,
.right-banner-column {
    position: static !important;

    width: 100%;
    min-width: 0;
}

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

@media (max-width: 1399px) {
    .marketplace-layout {
        grid-template-columns:
            280px
            minmax(0, 1fr);
    }

    .marketplace-right {
        display: none !important;
    }

    .marketplace-center .product-wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .marketplace-layout {
        grid-template-columns:
            250px
            minmax(0, 1fr);
    }

    .marketplace-left {
        width: 250px;
        min-width: 250px;
    }

    .marketplace-center .product-wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .marketplace-layout {
        display: block;

        margin-top: 20px;
    }

    .marketplace-left,
    .marketplace-right {
        display: none !important;
    }

    .marketplace-center {
        width: 100%;
    }

    .slider-wrapper {
        height: auto;

        aspect-ratio: 16 / 9;
    }

    .marketplace-center .product-wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .marketplace-center {
        gap: 20px;
    }

    .marketplace-center .product-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;
    }
}

@media (max-width: 575px) {
    .marketplace-layout {
        margin-top: 12px;
        margin-bottom: 30px;
    }

    .slider-wrapper {
        height: auto;

        aspect-ratio: 16 / 9;

        border-radius: 6px;
    }

    #homeBannerSlider .slide-item img {
        border-radius: 6px;
    }

    .marketplace-center .banner-categories .title {
        font-size: 0.75rem;
    }
}