/* =========================================================
   CATEGORY & BRAND CARDS - COMPACT SPACING OVERRIDES
   ========================================================= */

/* Category Section tight vertical spacing */
html body section.category-section {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html body section.category-section .container {
    padding-top: 2px !important;
    padding-bottom: 0 !important;
}

/* Category & Brand Swiper Container & Wrapper */
html body .category-swiper {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body .category-swiper .swiper-wrapper {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hide pagination dots in Category and Brand sliders to eliminate vertical dead space */
html body .category-swiper-pagination,
html body .category-swiper .swiper-controls,
html body .category-swiper .swiper-pagination {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Slide Cards - Compact & Snug */
html body .swiper-slide-category {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 3px 1px !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* See All - Blue grid icon card */
html body .cat-see-all-icon {
    width: 108px !important;
    height: 108px !important;
    min-width: 108px !important;
    min-height: 108px !important;
    border-radius: 14px !important;
    background: #e8f4ff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    border: 1px solid rgba(61, 155, 255, 0.15) !important;
    box-shadow: 0 2px 6px rgba(61, 155, 255, 0.1) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

html body .cat-see-all-icon svg {
    width: 50px !important;
    height: 50px !important;
}

html body .swiper-slide-category:hover .cat-see-all-icon {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 5px 12px rgba(61, 155, 255, 0.2) !important;
    background: #d0eaff !important;
}

html body .swiper-slide-category a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    color: inherit !important;
    width: 100% !important;
}

/* Card Images - 108px size for tight and prominent look */
html body .swiper-slide-category img,
html body .swiper-slide-category a img,
html body .brand_image_div img {
    width: 108px !important;
    height: 108px !important;
    min-width: 108px !important;
    min-height: 108px !important;
    max-width: 108px !important;
    max-height: 108px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    margin: 0 auto !important;
    display: block !important;
    background-color: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

html body .swiper-slide-category:hover img,
html body .brand_image_div:hover img {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Card Text */
html body .swiper-slide-category h6 {
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    color: #1e293b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 110px !important;
    text-align: center !important;
    line-height: 1.25 !important;
}

html body .swiper-slide-category:hover h6 {
    color: var(--primary-color, #f78b77) !important;
}

/* =========================================================
   HERO SLIDER - Gap above & Height
   ========================================================= */
html body section.slider {
    margin-top: 8px !important;
    padding-top: 0 !important;
}

html body section.slider .pb-md-1 {
    padding-top: 0 !important;
}

/* Hero banner: height follows the image's own aspect ratio so the full image is shown (no cropping) */
html body .slide-img {
    height: auto !important;
    max-height: none !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    display: block !important;
}

html body .slide-img a,
html body .slide-img picture {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

html body .slide-img img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
}

/* ---------------------------------------------------------------
   Home page section spacing — same for every section
   (Brands, New Arrivals, Trending Now, Best Sellers, Shop by ..., etc.)
   --------------------------------------------------------------- */
:root {
    --home-section-gap: 40px;      /* space above each section heading */
    --home-heading-gap: 18px;      /* space between heading and its content */
}

html body section.brand-section {
    margin-top: var(--home-section-gap) !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html body section.brand-section .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* All product sections inside the main content area */
html body section.main-content > section.wrapper {
    margin-top: var(--home-section-gap) !important;
    padding-top: 0 !important;
}

/* Heading block -> content spacing */
html body section.brand-section .featured-section-title,
html body section.main-content > section.wrapper .featured-section-title {
    margin-top: 0 !important;
    margin-bottom: var(--home-heading-gap) !important;
}

html body section.main-content .default_heading h6.title-sm {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

@media only screen and (max-width: 768px) {
    :root {
        --home-section-gap: 28px;
        --home-heading-gap: 12px;
    }
}