/*
 * tls-home-slider.css
 * Home-page hero slider visual fixes (added 2026-05-15).
 *
 * Scoped strictly to the Elementor "slides" widget on the front page
 * — widget id `befda2a` on page 16. Any other slider on the site
 * (product carousels, post loops, etc.) is unaffected.
 */

/* ─────────────────────────────────────────────────────────────────
 * 1. Contain instead of cover.
 *
 * Elementor's default `background-size: cover` was cropping parts of
 * the slide art (Fruttina wrappers, watermelon edges) on narrower
 * viewports. `contain` makes the full image visible regardless of
 * the container's aspect ratio. We also pin `no-repeat` and
 * `center` so any random theme override that leaves these unset
 * doesn't tile or skew the image.
 * ───────────────────────────────────────────────────────────────── */
.elementor-element-befda2a .swiper-slide-bg {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* ─────────────────────────────────────────────────────────────────
 * 2. Force background-image at every viewport.
 *
 * Elementor sets each slide's image via a per-repeater-item rule
 * (one inline rule per slide). On some viewports a higher-specificity
 * responsive override blanks the URL out — that's why the slide art
 * vanishes at certain widths and the visitor sees only the blue
 * gradient + dots pattern. Pinning the URL with `!important` here
 * makes the image stick on every device.
 *
 * URLs were lifted directly from Elementor's own rendered CSS rules
 * for widget befda2a. If a slide is added/removed/swapped in
 * Elementor, the repeater-item class changes (it's a hash of the
 * config) and the rule for the new slide needs to be added here.
 * Old rules become inert — safe to leave.
 * ───────────────────────────────────────────────────────────────── */
.elementor-element-befda2a .elementor-repeater-item-b33df0b .swiper-slide-bg {
    background-image: url("https://candyglida.co.il/wp-content/uploads/2025/07/Property-1Variant7.png") !important;
}
.elementor-element-befda2a .elementor-repeater-item-f6d8b12 .swiper-slide-bg {
    background-image: url("https://candyglida.co.il/wp-content/uploads/2025/07/Property-1Variant6.png") !important;
}
.elementor-element-befda2a .elementor-repeater-item-f14ee5c .swiper-slide-bg {
    background-image: url("https://candyglida.co.il/wp-content/uploads/2025/07/Property-1Frame-1707480428.png") !important;
}

/* ─────────────────────────────────────────────────────────────────
 * 3. Hide the pagination row when there's only one slide.
 *
 * `:only-child` matches a bullet that's also the only bullet — i.e.
 * exactly one slide. We hide both the bullet itself and the whole
 * pagination row so we don't leave an empty bar of vertical space.
 *
 * Note about Swiper's `loop` mode: with infinite loop on, Swiper
 * clones the original slides to make the loop seamless. However,
 * its pagination renders one bullet per *original* slide (not per
 * clone), so this rule fires only when the source list truly has
 * one entry. With the current 3 originals, the bullets stay
 * visible and only this single-slide case is suppressed.
 * ───────────────────────────────────────────────────────────────── */
.elementor-element-befda2a .swiper-pagination-bullets .swiper-pagination-bullet:only-child {
    display: none !important;
}
.elementor-element-befda2a .swiper-pagination:has(.swiper-pagination-bullet:only-child) {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
 * 4. Home hero Slick slider (the small slider in the LEFT half of
 *    the hero — the one this whole feature was actually about).
 *
 * This slider is OUTSIDE Elementor's own slider widgets. It's
 * rendered by a custom shortcode inside Elementor widget
 * `9af661f`, and uses the Slick library (different markup from
 * Swiper). Container chain:
 *   .home-slider-container > .home-slider (.slick-initialized)
 *     > .slick-list > .slick-track > .slick-slide > .image > img
 *
 * Two fixes here mirror the swiper-side ones above so the visual
 * behavior is consistent across both sliders on the home page:
 *
 *   a) `object-fit: contain` on the img instead of cover, so the
 *      full slide artwork is visible (cover was cropping the
 *      "FRUTTINA" wordmark on the right edge).
 *
 *   b) Hide the .slick-dots pagination when there's only one
 *      slide. Slick renders one <li> per slide; `:has(li:only-child)`
 *      makes the entire dot row disappear in that case. A
 *      fallback rule for older browsers also hides the lone dot
 *      itself so we don't leave a stray dot rendered even if
 *      :has() isn't supported.
 * ───────────────────────────────────────────────────────────────── */
.home-slider-container .home-slider .slick-slide img {
    object-fit: contain !important;
    object-position: center center !important;
}

.home-slider-container .home-slider .slick-dots:has(li:only-child) {
    display: none !important;
}
.home-slider-container .home-slider .slick-dots li:only-child {
    display: none !important;
}