/* =============================================================
   CUSTOM CSS OVERRIDES — Ethic ShopFactory
   Location: templates/jl_bella/custom/custom.css
   This file is SAFE from Gantry 5 CSS recompilation.
   Loaded via head_bottom in page/head.yaml
   ============================================================= */

/* Make Off-canvas mobile menu scrollable */
.uk-offcanvas-bar {
    max-height: 100vh !important;   /* full viewport height */
    overflow-y: auto !important;    /* enable vertical scroll */
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

body.uk-offcanvas-page {
    overflow: visible !important;   /* unlock body scroll while menu open */
}

/* Fix: Navigation dropdown menus appearing behind CK Carousel */
#g-navigation {
    position: relative;
    z-index: 200;
}

/* Fix: Balbooa Gallery captions always visible — album (style-13) + gallery grid (style-1) */
.ba-gallery-grid.css-style-13 .ba-caption,
.ba-album.css-style-13 .ba-caption,
.ba-gallery-grid.css-style-1 .ba-caption {
    opacity: 1 !important;
    bottom: 0 !important;
    display: flex !important;
}

/* Homogenize: Make style-1 (product images) look like style-13 (categories) */
.ba-gallery-grid.css-style-1 .ba-caption {
    height: auto !important;
    top: auto !important;
    padding-top: 2.8125rem !important;
    background: linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.6) 150%) !important;
}

.ba-gallery-grid.css-style-1 .ba-caption h3,
.ba-gallery-grid.css-style-1 .ba-caption p.image-category,
.ba-gallery-grid.css-style-1 .ba-caption p.short-description {
    opacity: 1 !important;
    transform: none !important;
    color: #fff !important;
    line-height: 1.5 !important;
    margin: .9375rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    width: calc(100% - 1.875rem);
}

/* Product title font size on desktop */
.ba-gallery-grid.css-style-1 .ba-caption h3 {
    font-size: 10px !important;
}

/* Fix: Balbooa Gallery captions visible on mobile/tablet */
@media (max-width: 1024px) {
    .ba-album.css-style-13 .ba-image + .ba-caption,
    .ba-gallery-grid.css-style-13 .ba-image .ba-caption,
    .ba-gallery-grid.css-style-1 .ba-caption {
        display: flex !important;
        opacity: 1 !important;
        bottom: 0 !important;
    }
    .ba-gallery-grid.css-style-1 .ba-caption h3,
    .ba-gallery-grid.css-style-1 .ba-caption p.image-category,
    .ba-gallery-grid.css-style-1 .ba-caption p.short-description {
        opacity: 1 !important;
        transform: none !important;
    }
    /* Minimal caption on mobile — title only, tiny font */
    .ba-gallery-grid.css-style-1 .ba-caption {
        padding-top: 0 !important;
        background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 100%) !important;
    }
    .ba-gallery-grid.css-style-1 .ba-caption h3 {
        font-size: 7px !important;
        margin: 2px 4px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Hide category on mobile — only show title to save space */
    .ba-gallery-grid.css-style-1 .ba-caption p.image-category,
    .ba-gallery-grid.css-style-1 .ba-caption p.short-description {
        display: none !important;
    }
}