/* ══════════════════════════════════════════════════════════════
   home-slider.css — flexible images plus a hover behaviour that follows the slide's image count
   ══════════════════════════════════════════════════════════════ */

.slide-items-row {
    display: flex;
    width: 100%;
    height: 480px; /* Adjust to the project's current slider height (see slider-image in home.css) */
    overflow: hidden;
    gap: 2px;
}

/* Each item is either <div class="slide-item"> or <a class="slide-item-link"><div class="slide-item">…
   so the flex item itself is either .slide-item or .slide-item-link — which is why every
   hover rule covers both. */
.slide-item,
.slide-item-link {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: block;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: flex-grow .45s cubic-bezier(.22, 1, .36, 1),
                box-shadow .35s ease,
                z-index 0s;
}

/* <picture> wraps the image so a WebP source can be offered. It must not become a box
   of its own: .slide-item-img is sized at 100% of .slide-item, and an inline <picture>
   between them would leave the image with no definite height to resolve against.
   display:contents removes the wrapper from layout entirely and leaves the <img> a direct
   child as far as the box tree is concerned. */
.slide-item picture,
.slide-item-link picture {
    display: contents;
}

.slide-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* The description: centred horizontally and vertically over the image, carried by a shadow alone.
   ─────────────────────────────────────────────────────────────
   It used to be pinned to the bottom of the image (left:0 right:0 bottom:0) and aligned
   left, relying for its legibility on a black gradient covering the image's lower part.

   And that gradient has a price: it always obscures the image's lower third, even when the
   description is a single word. And the `0 1px 3px` shadow was far too faint to take its
   place if the gradient were removed — the text dissolves over any light image.

   Now: centred horizontally with translateX, and positioned low with some breathing room —
   neither flush against the edge as before, nor at the image's exact middle. And a real
   shadow (2px 2px 6px) makes the text legible over any background without obscuring it.

   ⚠️ `bottom` as a percentage rather than in pixels: the slide's own height changes between
   desktop (480px) and mobile (320px), so a fixed value means comfortable spacing at one
   size and a cramped one at the other. */
/* The container carries the position, the centring and the shadow; the two lines inherit them.
   ─────────────────────────────────────────────────────────────
   Two lines: the title (the product's name) and then the description beneath it, a step
   smaller. Both are optional — a title with no description stays centred on its own with no
   gap below, because the view prints no element for empty text in the first place. */
.slide-item-caption {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    width: 90%;
    padding: 0 8px;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, .75);
    pointer-events: none;
}

.slide-item-title {
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.3;

    /* ⚠️ Clamped to two lines here as well — added along with the larger type.
       An unclamped title was acceptable at 1.05rem; at 1.35rem one long name ("Apple AirPods
       Pro (2nd generation) with MagSafe Charging Case") is enough to cover an entire image on
       a narrow slide. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* One step smaller rather than a jump: 1.05rem against 1.35rem — the same ratio that held
   between 0.9 and 1.05 before the increase. And the contrast comes from the weight and the
   opacity together, so the description stays legible and subordinate rather than competing. */
.slide-item-desc {
    margin-top: 4px;
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.35;
    opacity: .92;

    /* ── Clamped to two lines ──────────────────────────────────
       The default description comes from `products.description` — written for the product
       page rather than the slider, so some of it runs to two or three sentences. Leaving it
       unbounded lets it climb the image and cover it.

       ⚠️ And clamped in CSS rather than in JavaScript or in SQL, deliberately:
         · measuring the text in JavaScript means reading layout after paint (a reflow) for
           every image in the slider — the surest way to slow the page's largest element.
         · clamping in SQL cuts by character count rather than by line width, so the result
           differs between phone and desktop and cuts a word in half.
       The browser knows the real width and clamps there, at no runtime cost. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile scales up with them at the same ratio — it does not stay at the old size, or the
   difference between the two screens becomes a jump rather than a gradation. And the slide's
   height there is 320px rather than 480px, so the bound is tighter. */
@media (max-width: 767px) {
    .slide-item-title { font-size: 1.1rem; }
    .slide-item-desc  { font-size: .9rem; }
}

/* ── The 1–4 image case: a simple, conventional hover ──────── */
.slide-items-row.count-1 > .slide-item:hover > .slide-item-img,
.slide-items-row.count-2 > .slide-item:hover > .slide-item-img,
.slide-items-row.count-3 > .slide-item:hover > .slide-item-img,
.slide-items-row.count-4 > .slide-item:hover > .slide-item-img,
.slide-items-row.count-1 > .slide-item-link:hover > .slide-item > .slide-item-img,
.slide-items-row.count-2 > .slide-item-link:hover > .slide-item > .slide-item-img,
.slide-items-row.count-3 > .slide-item-link:hover > .slide-item > .slide-item-img,
.slide-items-row.count-4 > .slide-item-link:hover > .slide-item > .slide-item-img {
    transform: scale(1.04);
}

/* ── The 5+ image case: a hover that expands to roughly a quarter of the slider ── */
.slide-items-row.compact-count .slide-item,
.slide-items-row.compact-count .slide-item-link {
    flex-grow: 1; /* The normal state: an even distribution */
}
.slide-items-row.compact-count:hover > .slide-item,
.slide-items-row.compact-count:hover > .slide-item-link {
    flex-grow: 0.6; /* The images not hovered shrink a little to make room */
}
.slide-items-row.compact-count > .slide-item:hover,
.slide-items-row.compact-count > .slide-item-link:hover {
    flex-grow: 4;              /* Approaching 25% of the total width, depending on the item count */
    z-index: 5;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.slide-items-row.compact-count .slide-item-link:hover > .slide-item > .slide-item-img,
.slide-items-row.compact-count .slide-item:hover > .slide-item-img {
    transform: scale(1.02); /* A very slight extra enlargement on top of the flex expansion itself */
}

/* The description becomes clearer only in the expanded state (reducing visual clutter in the narrow one) */
.slide-items-row.compact-count .slide-item .slide-item-caption,
.slide-items-row.compact-count .slide-item-link .slide-item-caption {
    opacity: 0;
    transition: opacity .3s ease .1s;
}
.slide-items-row.compact-count .slide-item-link:hover .slide-item-caption,
.slide-items-row.compact-count .slide-item:hover .slide-item-caption {
    opacity: 1;
}

/* ── Mobile response: no hover-driven growth on a touch screen ──
   The height that used to be here (320px) moved to the block further
   down that owns the phone sizing, so one place decides it. */
@media (max-width: 767px) {
    .slide-items-row.compact-count:hover > .slide-item,
    .slide-items-row.compact-count:hover > .slide-item-link { flex-grow: 1; } /* No enlargement on touch */
    .slide-items-row.compact-count > .slide-item:hover,
    .slide-items-row.compact-count > .slide-item-link:hover {
        flex-grow: 1; box-shadow: none; z-index: auto;
    }
}

/* ── Phone and tablet: one image per slide, and two per screen ──
   A slide holds every image its slider row carries — up to six. At
   375px that measured 61px wide against 320 tall, a column of slivers.
   Three of them measured 124px: better, and still not a photograph of a
   product. A phone has room for exactly one.

   So js/store/slider-chunk.js re-deals them — one image per slide below
   768px, three between 768 and 991 — and a slider of six becomes six
   slides. Nothing is hidden from a phone visitor; it is one swipe away.

   ⚠️ `:not([data-chunked])` — the hiding here is only for the moment
   BEFORE that file runs. It marks each row it builds with data-chunked,
   after which every child in it shows.

   The hiding still earns its place: without it the first paint would
   show six slivers and then jump to one the moment the deferred bundle
   executes — a shift in the page's largest contentful element. With it
   the count is right from the first frame and the script only rehouses
   what was already invisible.

   The counts here and in slider-chunk.js must agree: three below 992,
   one below 768. Change them together. */
@media (max-width: 991px) {
    .slide-items-row { height: 360px; }
    .slide-items-row:not([data-chunked]) > *:nth-child(n+4) { display: none; }
}

@media (max-width: 767px) {
    /* One image across the full width, so the row can afford to be
       taller than it was when it held slivers: 375 x 260 is a hero,
       375 x 320 (the old value) crowds the page below it. */
    .slide-items-row { height: 260px; }
    .slide-items-row:not([data-chunked]) > *:nth-child(n+2) { display: none; }
}

@media (max-width: 575px) {
    .slide-items-row { height: 240px; }

    /* ⚠️ The description is NOT hidden here, and hiding it was a
       mistake worth naming: an earlier pass wrote `display: none` on it
       because three images to a slide left 124px of width, in which two
       clamped lines of text were unreadable. The answer was never to
       delete the sentence the admin wrote for that slide — it was to
       give the image the whole screen, which is what happens now. The
       two-line clamp above still bounds it. */
    .slide-item-title { font-size: 1.05rem; }
    .slide-item-desc { font-size: 0.9rem; }
}

@media (max-width: 320px) {
    .slide-items-row { height: 200px; }
    .slide-item-title { font-size: 0.95rem; }
    .slide-item-desc { font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Slider Navigation Arrows — Compact & Non-blocking
   ═══════════════════════════════════════════════════════════════════
   The aim: shrinking the button's hit area from the default full height and 15% width down
   to a small circle, and hiding it by default (opacity:0 plus pointer-events:none) so it
   stops blocking the hover on the first and last product in a slide.
   The arrow appears only on hovering the slider as a whole (#mainSlider:hover).
   ═══════════════════════════════════════════════════════════════════ */

/* Cancelling Bootstrap's default button styling (full width and height, a transparent gradient) */
#mainSlider .carousel-control-prev,
#mainSlider .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px !important;        /* A fixed circle size rather than 15% of the slider's width */
    height: 44px !important;       /* Rather than full height */
    min-width: 0 !important;       /* Cancelling Bootstrap's min-width: 15% */
    opacity: 0;                    /* Hidden by default */
    pointer-events: none;          /* It intercepts no clicks or hovers on what lies beneath — the key detail */
    background: rgba(0, 0, 0, 0.35);  /* A semi-transparent circular background */
    border-radius: 50%;            /* A circle */
    backdrop-filter: blur(4px);    /* A glass effect (supported in recent browsers) */
    -webkit-backdrop-filter: blur(4px);
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease, transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    z-index: 10;                   /* Above the images, but pointer-events:none keeps it non-intercepting */
    display: flex;
    align-items: center;
    justify-content: center;
}

#mainSlider .carousel-control-prev { left: 12px !important; }
#mainSlider .carousel-control-next { right: 12px !important; }

/* The arrow icon: shrunk inside the circle */
#mainSlider .carousel-control-prev-icon,
#mainSlider .carousel-control-next-icon {
    width: 20px !important;
    height: 20px !important;
    background-size: 45% 45% !important;  /* Rather than the large default */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Showing the arrows on hovering the slider as a whole */
#mainSlider:hover .carousel-control-prev,
#mainSlider:hover .carousel-control-next {
    opacity: 0.85;
    pointer-events: auto;  /* Now they can be interacted with */
}

/* Hovering the arrow itself */
#mainSlider .carousel-control-prev:hover,
#mainSlider .carousel-control-next:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ── Mobile response: smaller circles, shown more persistently (since touch has no hover) ── */
@media (max-width: 767px) {
    #mainSlider .carousel-control-prev,
    #mainSlider .carousel-control-next {
        width: 36px !important;
        height: 36px !important;
        opacity: 0.55;           /* Always faintly visible on mobile */
        pointer-events: auto;    /* Directly tappable */
    }
    #mainSlider .carousel-control-prev { left: 8px !important; }
    #mainSlider .carousel-control-next { right: 8px !important; }
    #mainSlider .carousel-control-prev-icon,
    #mainSlider .carousel-control-next-icon {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ──────────────────────────────────────────────────────────────────
   An alternative design (commented out) — dot indicators plus arrows that appear only within a 40px edge
   ═══════════════════════════════════════════════════════════════════
   A more polished alternative: hiding the arrows entirely, using .carousel-indicators as
   small dots beneath the slider, and revealing the arrows only on hovering the extreme edge
   (the first or last 40px of the width). This removes any covering of the products
   completely, because the reveal area falls outside the images in most cases.
   
   To enable it: uncomment the code below and hide the primary solution above.
   
   #mainSlider .carousel-control-prev,
   #mainSlider .carousel-control-next {
       width: 40px !important;
       height: 100% !important;
       opacity: 0;
       pointer-events: none;
       background: transparent !important;
       border-radius: 0;
   }
   #mainSlider .carousel-control-prev { left: 0 !important; }
   #mainSlider .carousel-control-next { right: 0 !important; }
   #mainSlider:hover .carousel-control-prev:hover,
   #mainSlider:hover .carousel-control-next:hover {
       opacity: 0.8;
       pointer-events: auto;
       background: linear-gradient(90deg, rgba(0,0,0,.35), transparent) !important;
   }
   #mainSlider .carousel-control-next:hover {
       background: linear-gradient(270deg, rgba(0,0,0,.35), transparent) !important;
   }
   #mainSlider .carousel-indicators {
       bottom: 16px !important;
   }
   #mainSlider .carousel-indicators button {
       width: 8px !important; height: 8px !important; border-radius: 50% !important;
       background: rgba(255,255,255,.7) !important; border: none !important;
       margin: 0 4px !important; opacity: .7;
   }
   #mainSlider .carousel-indicators button.active {
       background: #fff !important; opacity: 1; transform: scale(1.2);
   }
   ────────────────────────────────────────────────────────────────── */