/**
 * 2025-2026 CyliumDev
 * @license   Proprietary - Non-commercial use only
 *
 * GRID presets (named asset 'cyliumee-grid').
 *
 * Unlike the carousel presets in themes.css, these are STRUCTURAL: front.js does
 * not initialise Swiper at all (it reads the theme from the widget's data-config),
 * every item is rendered, and arrows / pagination are not emitted. The only
 * exception is `grid-rows`, a multi-row CAROUSEL built on Swiper's native Grid
 * module — it keeps its arrows and needs nothing here.
 *
 * CSS Grid, not flex-wrap, on purpose:
 *   - an incomplete last row would stretch (flex-grow) or leave holes;
 *   - columns would not equalise across rows;
 *   - `grid-featured` needs `grid-column: span 2`, impossible in flex.
 *
 * Breakpoints match Creative Elements (md 768, lg 1025) and front.js, so the
 * editor's tablet/desktop preview agrees with the front.
 *
 * Custom properties, emitted by each widget on its wrapper:
 *   --cee-grid-cols-mobile / -tablet / -desktop  (integers, "Grid"/"Dense")
 *   --cee-grid-item-w                            (px, "Fluid grid")
 *   --cee-grid-gap                               (px, all presets)
 *
 * The three markups share one selector list: the slider element differs
 * (.cyliumee-cats IS the .swiper, the others contain one) but the item track is
 * always `> .swiper-wrapper`.
 */

/* ── Common: turn the Swiper track into a grid ─────────────────────────────
 *
 * 🔴 `display`, `gap` and `overflow` carry `!important` on the track, and only there.
 * Creative Elements 3.x styles every Swiper that has not started
 * (`.elementor-element .swiper:not(.swiper-initialized) > .swiper-wrapper:not(...)`,
 * specificity 0,5,0, flex + no gap + overflow hidden) and a grid preset never starts
 * one on purpose — so CE's rule beat ours (0,3,0) and the grid collapsed into a flex
 * row. CE 2.14 has no such rule. Matching CE's selector to out-weigh it would break
 * the day CE reshuffles it. */

.cyliumee-theme-grid .cyliumee-cats,
.cyliumee-theme-grid-fluid .cyliumee-cats,
.cyliumee-theme-grid-dense .cyliumee-cats,
.cyliumee-theme-grid-featured .cyliumee-cats,
.cyliumee-theme-grid .cyliumee-ps__slider,
.cyliumee-theme-grid-fluid .cyliumee-ps__slider,
.cyliumee-theme-grid-dense .cyliumee-ps__slider,
.cyliumee-theme-grid-featured .cyliumee-ps__slider,
.cyliumee-theme-grid .cyliumee-icob__swiper,
.cyliumee-theme-grid-fluid .cyliumee-icob__swiper,
.cyliumee-theme-grid-dense .cyliumee-icob__swiper,
.cyliumee-theme-grid-featured .cyliumee-icob__swiper {
    /* Swiper's stylesheet clips its container; a grid grows downwards and would
       lose its lower rows, plus card shadows and badges. */
    overflow: visible;
    height: auto;
}

.cyliumee-theme-grid .cyliumee-cats > .swiper-wrapper,
.cyliumee-theme-grid-dense .cyliumee-cats > .swiper-wrapper,
.cyliumee-theme-grid-featured .cyliumee-cats > .swiper-wrapper,
.cyliumee-theme-grid .cyliumee-ps__slider > .swiper-wrapper,
.cyliumee-theme-grid-dense .cyliumee-ps__slider > .swiper-wrapper,
.cyliumee-theme-grid-featured .cyliumee-ps__slider > .swiper-wrapper,
.cyliumee-theme-grid .cyliumee-icob__swiper > .swiper-wrapper,
.cyliumee-theme-grid-dense .cyliumee-icob__swiper > .swiper-wrapper,
.cyliumee-theme-grid-featured .cyliumee-icob__swiper > .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(var(--cee-grid-cols-mobile, 2), minmax(0, 1fr));
    gap: var(--cee-grid-gap, 16px) !important;
    overflow: visible !important;
    /* Swiper sets these when it runs; it does not here, but a shop theme might. */
    transform: none;
    width: auto;
}

/* ── Fluid: as many columns as the BLOCK width allows ────────────────────── */

.cyliumee-theme-grid-fluid .cyliumee-cats > .swiper-wrapper,
.cyliumee-theme-grid-fluid .cyliumee-ps__slider > .swiper-wrapper,
.cyliumee-theme-grid-fluid .cyliumee-icob__swiper > .swiper-wrapper {
    display: grid !important;
    /* min() caps the item at the container width, so a 400px item in a 300px
       column shrinks instead of overflowing. */
    grid-template-columns: repeat(auto-fill, minmax(min(var(--cee-grid-item-w, 260px), 100%), 1fr));
    gap: var(--cee-grid-gap, 16px) !important;
    overflow: visible !important;
    transform: none;
    width: auto;
}

/* ── Slides become grid cells ────────────────────────────────────────────── */

.cyliumee-theme-grid .swiper-slide,
.cyliumee-theme-grid-fluid .swiper-slide,
.cyliumee-theme-grid-dense .swiper-slide,
.cyliumee-theme-grid-featured .swiper-slide {
    /* Swiper's base CSS pins slides to width:100% / flex-shrink:0, which would
       make every cell span its whole track. */
    width: auto;
    min-width: 0;
    flex-shrink: 1;
    height: auto;
}

/* ── Tablet / desktop column counts ──────────────────────────────────────── */

@media (min-width: 768px) {
    .cyliumee-theme-grid .cyliumee-cats > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-cats > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-cats > .swiper-wrapper,
    .cyliumee-theme-grid .cyliumee-ps__slider > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-ps__slider > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-ps__slider > .swiper-wrapper,
    .cyliumee-theme-grid .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-icob__swiper > .swiper-wrapper {
        grid-template-columns: repeat(var(--cee-grid-cols-tablet, 3), minmax(0, 1fr));
    }
}

@media (min-width: 1025px) {
    .cyliumee-theme-grid .cyliumee-cats > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-cats > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-cats > .swiper-wrapper,
    .cyliumee-theme-grid .cyliumee-ps__slider > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-ps__slider > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-ps__slider > .swiper-wrapper,
    .cyliumee-theme-grid .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-icob__swiper > .swiper-wrapper {
        grid-template-columns: repeat(var(--cee-grid-cols-desktop, 4), minmax(0, 1fr));
    }
}

/* ── Dense: tighter gutters (the extra column is added server-side, since
      repeat() does not accept calc()) ─────────────────────────────────────── */

.cyliumee-theme-grid-dense .cyliumee-cats > .swiper-wrapper,
.cyliumee-theme-grid-dense .cyliumee-ps__slider > .swiper-wrapper,
.cyliumee-theme-grid-dense .cyliumee-icob__swiper > .swiper-wrapper {
    gap: var(--cee-grid-gap-dense, 8px) !important;
}

/* ── Feature: the first item takes 2 columns x 2 rows ────────────────────── */

.cyliumee-theme-grid-featured .cyliumee-cats > .swiper-wrapper > .swiper-slide:first-child,
.cyliumee-theme-grid-featured .cyliumee-ps__slider > .swiper-wrapper > .swiper-slide:first-child,
.cyliumee-theme-grid-featured .cyliumee-icob__swiper > .swiper-wrapper > .swiper-slide:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Phone: 2 columns means the feature would be the whole grid — keep it to one
   cell so the layout still reads as a grid. */
@media (max-width: 767.98px) {
    .cyliumee-theme-grid-featured .cyliumee-cats > .swiper-wrapper > .swiper-slide:first-child,
    .cyliumee-theme-grid-featured .cyliumee-ps__slider > .swiper-wrapper > .swiper-slide:first-child,
    .cyliumee-theme-grid-featured .cyliumee-icob__swiper > .swiper-wrapper > .swiper-slide:first-child {
        grid-column: span 2;
        grid-row: span 1;
    }
}

/* ── Scrolling grid (grid-rows): Swiper's own Grid module does the work, so
      nothing to lay out here. Only the vertical gutter needs a value, because
      Swiper applies spaceBetween horizontally only. ───────────────────────── */

.cyliumee-theme-grid-rows .swiper-slide {
    height: calc((100% - var(--cee-grid-row-gap, 16px)) / var(--cee-grid-rows, 2));
}

/* ─────────────────────────────────────────────────────────────────────────
 * CAROUSEL, "as many items as fit" (sizing_mode = width).
 *
 * Not a grid preset, but it belongs with the other layout modes: Swiper is run
 * with slidesPerView:'auto', which means it READS the slide width from CSS. The
 * width is therefore declared here, per breakpoint, and min(...,100%) keeps an
 * item from overflowing a narrow block.
 * ───────────────────────────────────────────────────────────────────────── */

.cyliumee-cats--autow > .swiper-wrapper > .swiper-slide,
.cyliumee-ps__slider--autow > .swiper-wrapper > .swiper-slide,
.cyliumee-icob__swiper--autow > .swiper-wrapper > .swiper-slide {
    /* 🔴 CHAINED. Each breakpoint used its own constant, so a merchant who set
       300px on desktop and left the others alone got 220px on tablet and 160px on
       mobile — three widths nobody asked for. Mobile inherits tablet, tablet
       inherits desktop; the constant is the last resort, not the second. */
    width: min(var(--cee-item-w-mobile, var(--cee-item-w-tablet, var(--cee-item-w-desktop, 160px))), 100%);
}

@media (min-width: 768px) {
    .cyliumee-cats--autow > .swiper-wrapper > .swiper-slide,
    .cyliumee-ps__slider--autow > .swiper-wrapper > .swiper-slide,
    .cyliumee-icob__swiper--autow > .swiper-wrapper > .swiper-slide {
        width: min(var(--cee-item-w-tablet, var(--cee-item-w-desktop, 220px)), 100%);
    }
}

@media (min-width: 1025px) {
    .cyliumee-cats--autow > .swiper-wrapper > .swiper-slide,
    .cyliumee-ps__slider--autow > .swiper-wrapper > .swiper-slide,
    .cyliumee-icob__swiper--autow > .swiper-wrapper > .swiper-slide {
        width: min(var(--cee-item-w-desktop, 260px), 100%);
    }
}

/* Per-screen grid gap for the icon boxes (the slider path picks its own through
   front.js).
 *
 * 🔴 These used to REDEFINE --cee-grid-gap on .cyliumee-icob, and were inert for
 * two independent reasons — either one alone is fatal:
 *
 *   1. widget_icon_boxes.tpl writes --cee-grid-gap in the element's STYLE
 *      attribute. An inline declaration beats any stylesheet rule on that same
 *      element, whatever its specificity, so a media query could never win.
 *   2. `--cee-grid-gap: var(--cee-grid-gap-tablet, var(--cee-grid-gap))` names
 *      the property it is defining inside its own fallback. That is a cycle, and
 *      a cyclic custom property is invalid at computed-value time — the whole
 *      declaration is dropped even when nothing else competes.
 *
 * So the tablet and mobile spacing fields did nothing at all. The fix is the
 * idiom the columns above already use: do not touch the variable, re-declare
 * the CONSUMING property on the descendant that reads it — .swiper-wrapper
 * carries no inline style, and the *-tablet / *-mobile variables reach it by
 * inheritance. Chained fallbacks keep an unset breakpoint on the larger one.
 *
 * Grid presets ONLY. On a carousel preset (classic, swiper, grid-rows) Swiper
 * spaces the slides itself with a margin, so a flex `gap` on top counts the
 * spacing twice and each slide drifts one more gap than the one before. */
@media (max-width: 1024px) {
    .cyliumee-theme-grid .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-fluid .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-icob__swiper > .swiper-wrapper {
        gap: var(--cee-grid-gap-tablet, var(--cee-grid-gap, 16px)) !important;
    }
}

@media (max-width: 767px) {
    .cyliumee-theme-grid .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-fluid .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-icob__swiper > .swiper-wrapper {
        gap: var(--cee-grid-gap-mobile, var(--cee-grid-gap-tablet, var(--cee-grid-gap, 16px))) !important;
    }
}