/**
 * 2025-2026 CyliumDev
 * @license   Proprietary - Non-commercial use only
 *
 * Shared carousel LAYOUT presets (named asset 'cyliumee-themes').
 *
 * DESIGN RULE — a preset only MOVES THINGS AROUND. It never sets a colour,
a
 * font,
a background or a border-radius,
and it never touches the product card
 * (`__card` and everything inside it comes from the theme miniature picked in
 * the widget's "Miniature" control). So a preset composes with whatever colour
 * settings the widget panel applies instead of fighting them: layout here,
* look in the panel.
 *
 * Applied through a root class `cyliumee-theme- {slug}` emitted by
 * AbstractCyliumWidget::getThemeClass(). Loaded after front.css / carousel.css
 * / cats.css (declared dependencies), so equal-specificity rules win by order.
 *
 * Markup it relies on (checked against views/templates/hook/widget_product.tpl
 * and widget_category.tpl):
 *   Product carousel  .cyliumee-ps
 *                       > __header
 *                           > __heading-wrap > __heading
 *                           > __actions > __view-all + __nav-wrap > __nav--prev/--next
 *                       > __slider.swiper > __card
 *                       > __pagination
 *   Category carousel .cyliumee-cats-wrap
 *                       > __header (optional, same shape as above — since 1.0.29)
 *                       > .cyliumee-cats.swiper  <-- IS the slider: there is NO
 *                         .swiper element (rules targeting one
 *                         never matched, fixed in 1.0.29)
 *                         > .swiper-wrapper > __card
 *                         > __pagination + __nav--prev/--next (absolute,
only
 *                           when there is no header)
 *                     .cyliumee-cats--has-header marks the slider when a header
 *                     is present,
so presets can skip their no-header offsets.
 *
 * ⚠️ SPECIFICITY — cats.css declares the arrow geometry with `!important`
 * (`.cyliumee-cats .cyliumee-nav { position/top/margin/left/right }`) to
 * survive aggressive shop-theme button resets. Any preset that MOVES a category
 * arrow must therefore repeat `!important` AND keep a specificity of at least
 * 0,3,0 (theme class + .cyliumee-cats + .cyliumee-nav). Dropping either
 * silently does nothing — that was the bug in 1.0.25.
 */

/* =========================================================================
 * PRESET — classic (the default)
 * Deliberately keeps each widget's native layout: product carousel = arrows in
 * the header next to "view all", category carousel = arrows over the sides,
 * pagination under the slides. It exists so the Theme select always carries a
 * real, named value (never "none"), and so switching back is a real choice
 * rather than an empty setting.
 * Only declaration: the positioning context the absolute arrows need anyway.
 * ===================================================================== */
.cyliumee-theme-classic .cyliumee-ps,
.cyliumee-theme-classic .cyliumee-cats {
    position: relative;
}

/* =========================================================================
 * PRESET — header-split ("Editorial")
 * Title left, hairline rule, then "view all" + arrows on the SAME row, right.
 * The arrows live inside __actions (not a direct child of __header), so the
 * order/flex rules must target __actions — targeting __view-all / __nav-wrap
 * directly does nothing and used to stack the arrows vertically.
 * ===================================================================== */
.cyliumee-theme-header-split .cyliumee-ps,
.cyliumee-theme-header-split .cyliumee-cats {
    position: relative;
}.cyliumee-theme-header-split .cyliumee-header-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
}.cyliumee-theme-header-split .cyliumee-heading-wrap {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
}

/* The rule uses currentColor so it inherits the colour already set in the
   panel — no colour of our own. */
.cyliumee-theme-header-split .cyliumee-header-row::after {
    content: "";
    order: 2;
    flex: 1 1 40px;
    height: 0;
    border-top: 1px solid currentColor;
    opacity: 0.25;
}

/* Direct child of the header: this is what actually carries the link + arrows. */
.cyliumee-theme-header-split .cyliumee-actions {
    order: 3;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

/* Arrows side by side, never stacked. */
.cyliumee-theme-header-split .cyliumee-nav-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
}.cyliumee-theme-header-split .cyliumee-pagination {
    justify-content: flex-end;
    gap: 14px;
}

/* Phone: the hairline eats the whole row, so drop it and let the title and the
   actions sit on two lines. */
@media (max-width: 575.98px) {.cyliumee-theme-header-split .cyliumee-header-row::after {
        display: none;
    }.cyliumee-theme-header-split .cyliumee-actions {
        flex: 1 1 100%;
        justify-content: space-between;
    }
}

/* =========================================================================
 * PRESET — arrows-outside ("Showcase")
 * Round arrows on both sides, outside the slides.
 *
 * The arrows are taken OUT OF THE FLOW and pushed into negative offsets: the
 * slider keeps its full width, so no card ever shifts. (1.0.25 reserved 56px
 * gutters with margins, which visibly narrowed and offset the products — that
 * is what this rewrite fixes.)
 * ===================================================================== */
.cyliumee-theme-arrows-outside .cyliumee-ps,
.cyliumee-theme-arrows-outside .cyliumee-cats {
    position: relative;
}

/* No margin/padding on the slider: zero impact on the cards. */
.cyliumee-theme-arrows-outside .swiper,
.cyliumee-theme-arrows-outside .cyliumee-cats {
    margin-left: 0;
    margin-right: 0;
}

/* Unwrap the flex wrapper so each arrow can be positioned on its own. */
.cyliumee-theme-arrows-outside .cyliumee-nav-wrap {
    display: contents;
}

.cyliumee-theme-arrows-outside .cyliumee-ps .cyliumee-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    margin: 0 !important;
}

/* 🔴 FIXED: these two used to sit at left/right: -(arrow + 14px), i.e. OUTSIDE
   the widget box. A Creative Elements column rarely has spare horizontal room, so
   they were clipped or invisible — which is why the preset appeared to do nothing
   at all. They now sit ON the edges of the row and overlap the cards slightly,
   which is what "edge arrows" means and what the reference layout shows. */
.cyliumee-theme-arrows-outside .cyliumee-ps .cyliumee-nav--prev {
    left: calc(-1 * var(--cee-ps-arrow-size, 44px) / 3);
    right: auto;
}

.cyliumee-theme-arrows-outside .cyliumee-ps .cyliumee-nav--next {
    right: calc(-1 * var(--cee-ps-arrow-size, 44px) / 3);
    left: auto;
}

/* Vertically centred on the ROW, not on the whole widget: positioning against
   `.cyliumee-ps` put them at the middle of header + row, i.e. too high. */
.cyliumee-theme-arrows-outside .swiper {
    position: relative;
}

.cyliumee-theme-arrows-outside .cyliumee-ps .cyliumee-nav {
    top: calc(50% - var(--cee-ps-dots-room, 0px) / 2);
}

/* The arrows overlap the cards, so the row must not clip them. */
.cyliumee-theme-arrows-outside .swiper,
.cyliumee-theme-arrows-outside .cyliumee-header-row { overflow: visible; }

.cyliumee-theme-arrows-outside .cyliumee-cats .cyliumee-nav--prev {
    left: calc(-1 * (var(--cee-cats-arrow-size, 44px) + 14px)) !important;
    right: auto !important;
}

.cyliumee-theme-arrows-outside .cyliumee-cats .cyliumee-nav--next {
    right: calc(-1 * (var(--cee-cats-arrow-size, 44px) + 14px)) !important;
    left: auto !important;
}

/* Not enough room left and right of the content column: fall back to arrows
   over the slides rather than letting them escape the viewport. */
@media (max-width: 1199.98px) {
    .cyliumee-theme-arrows-outside .cyliumee-ps .cyliumee-nav--prev {
        left: 8px;
    }
    .cyliumee-theme-arrows-outside .cyliumee-ps .cyliumee-nav--next {
        right: 8px;
    }
    .cyliumee-theme-arrows-outside .cyliumee-cats .cyliumee-nav--prev {
        left: 8px !important;
    }
    .cyliumee-theme-arrows-outside .cyliumee-cats .cyliumee-nav--next {
        right: 8px !important;
    }
}

/* =========================================================================
 * PRESET — arrows-top-right ("Compact")
 *
 * 🔴 It used to be indistinguishable from "Grouped navigation": both put the
 * arrows at the right of the title row, so picking it changed nothing visible —
 * the "I do not see what it is for" of 03/09. It now earns its name: the two
 * buttons are SMALLER and JOINED into one segmented control, which is what a
 * compact header looks like. The slug is kept (published documents store it).
 * ===================================================================== */
.cyliumee-theme-arrows-top-right .cyliumee-nav-wrap {
    gap: 0;
    border-radius: 99px;
    overflow: hidden;
}

.cyliumee-theme-arrows-top-right .cyliumee-ps .cyliumee-nav {
    width: calc(var(--cee-ps-arrow-size, 44px) * 0.72) !important;
    height: calc(var(--cee-ps-arrow-size, 44px) * 0.72) !important;
    max-width: calc(var(--cee-ps-arrow-size, 44px) * 0.72) !important;
    max-height: calc(var(--cee-ps-arrow-size, 44px) * 0.72) !important;
    border-radius: 0 !important;
}

/* A hairline between the two halves, so they read as one control and not as a
   single wide button. */
.cyliumee-theme-arrows-top-right .cyliumee-ps .cyliumee-nav--next {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.25) !important;
}.cyliumee-theme-arrows-top-right .cyliumee-ps,
.cyliumee-theme-arrows-top-right .cyliumee-cats {
    position: relative;
}.cyliumee-theme-arrows-top-right .cyliumee-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}.cyliumee-theme-arrows-top-right .cyliumee-heading-wrap {
    flex: 1 1 auto;
    min-width: 0;
}.cyliumee-theme-arrows-top-right .cyliumee-actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}.cyliumee-theme-arrows-top-right .cyliumee-nav-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* The category carousel has no header: pin its arrows to the top-right of the
   widget and push the slider down so they do not sit on the first card. */
/* Only meaningful when the category carousel has NO header: the arrows are then
   pinned over the widget and need room. With a header they already sit in the
   title row, so the slider must not be pushed down. */
.cyliumee-theme-arrows-top-right .cyliumee-cats:not(.cyliumee-cats--has-header) {
    margin-top: 52px;
}

.cyliumee-theme-arrows-top-right .cyliumee-cats .cyliumee-nav {
    top: 0 !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
}

.cyliumee-theme-arrows-top-right .cyliumee-cats .cyliumee-nav--prev {
    left: auto !important;
    right: calc(var(--cee-cats-arrow-size, 44px) + 8px) !important;
}

.cyliumee-theme-arrows-top-right .cyliumee-cats .cyliumee-nav--next {
    right: 0 !important;
    left: auto !important;
}

/* =========================================================================
 * Independent position controls (theme_arrows_position / theme_dots_position).
 * Declared AFTER the presets on purpose: an explicit position setting must
 * override whatever the selected preset does. Their "inherit" value emits no
 * class at all, so the preset stays in charge by default.
 * ===================================================================== */

/* -- Pagination ------------------------------------------------------- */
.cyliumee-theme-dots-below .cyliumee-pagination {
    position: relative;
    inset: auto;
    margin-top: 16px;
}.cyliumee-theme-dots-overlay-bottom .swiper,
.cyliumee-theme-dots-overlay-bottom .cyliumee-cats {
    position: relative;
}.cyliumee-theme-dots-overlay-bottom .cyliumee-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 3;
    margin-top: 0;
}

/* -- Arrows: over the slides ------------------------------------------ */
.cyliumee-theme-arrows-inside .cyliumee-ps,
.cyliumee-theme-arrows-inside .cyliumee-cats {
    position: relative;
}

.cyliumee-theme-arrows-inside .cyliumee-nav-wrap {
    display: contents;
}

.cyliumee-theme-arrows-inside .cyliumee-ps .cyliumee-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    margin: 0 !important;
}

.cyliumee-theme-arrows-inside .cyliumee-ps .cyliumee-nav--prev {
    left: 12px;
    right: auto;
}

.cyliumee-theme-arrows-inside .cyliumee-ps .cyliumee-nav--next {
    right: 12px;
    left: auto;
}

.cyliumee-theme-arrows-inside .cyliumee-cats .cyliumee-nav--prev {
    left: 12px !important;
    right: auto !important;
}

.cyliumee-theme-arrows-inside .cyliumee-cats .cyliumee-nav--next {
    right: 12px !important;
    left: auto !important;
}

/* -- Arrows: outside the slides --------------------------------------- */
.cyliumee-theme-arrows-outside .cyliumee-nav-wrap {
    display: contents;
}

/* -- Arrows: header, top right ---------------------------------------- */
.cyliumee-theme-arrows-top-right .cyliumee-nav-wrap {
    position: static;
}

/* -- Arrows: below the slides, centered ------------------------------- */
.cyliumee-theme-arrows-bottom-center .cyliumee-nav-wrap {
    position: static;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

/* __actions is the header child: send the whole block under the slider. */
.cyliumee-theme-arrows-bottom-center .cyliumee-actions {
    flex-wrap: wrap;
}

.cyliumee-theme-arrows-bottom-center .cyliumee-cats:not(.cyliumee-cats--has-header) {
    margin-bottom: calc(var(--cee-cats-arrow-size, 44px) + 12px);
}

.cyliumee-theme-arrows-bottom-center .cyliumee-cats .cyliumee-nav {
    top: auto !important;
    bottom: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

.cyliumee-theme-arrows-bottom-center .cyliumee-cats .cyliumee-nav--prev {
    left: calc(50% - (var(--cee-cats-arrow-size, 44px) + 6px)) !important;
    right: auto !important;
}

.cyliumee-theme-arrows-bottom-center .cyliumee-cats .cyliumee-nav--next {
    left: calc(50% + 6px) !important;
    right: auto !important;
}

/* =========================================================================
 * PRESET — header-split ("Editorial"), REINFORCED
 *
 * 🔴 Its only visible effect used to be a 25 %-opacity hairline, and only when
 * the header carried a "view all" link to push things apart. On a header made of
 * a title and two arrows — the common case — it was indistinguishable from the
 * default. The rule is now readable on its own, and the arrows are pinned to the
 * far right whether or not a "view all" link exists.
 * ===================================================================== */
.cyliumee-theme-header-split .cyliumee-header-row::after {
    opacity: 0.6;
    min-width: 40px;
}.cyliumee-theme-header-split .cyliumee-actions {
    order: 3;
    margin-left: auto;
}

/* The title gets room to breathe above the rule — that is what makes the preset
   read as editorial rather than as "the default with a line in it". */
.cyliumee-theme-header-split .cyliumee-heading {
    letter-spacing: -0.01em;
    line-height: 1;
}

/* 🔴 `.cyliumee-ps` is inserted in each of these three selectors ON PURPOSE.
 * Without it they read (0,2,0), exactly like the per-screen `--no-dots-*` rules
 * of carousel.css, and both carry `!important` — so source order decided, and
 * carousel.css is declared AFTER themes.css in the dependency chain. The forced
 * dots lost, leaving these presets with no navigation at all. (0,3,0) settles it
 * without another `!important` war.
 */

/* =========================================================================
 * PRESET — rail ("Scrolling rail")
 * No arrows: a draggable progress bar under the row, plus the dots. The bar is
 * Swiper's own scrollbar module (views/js/front.js), so dragging, sizing and
 * position come from the library rather than from hand-written maths.
 * ===================================================================== */

/* The rail REPLACES the arrows, so they stay hidden here whatever the switch
   says — the switch governs the BAR instead (see carousel.css, `--no-arrows-*`
   also hides `.cyliumee-scrollbar`). Two navigations at once would be one
   too many. */
/* 🔴 Classe doublee pour passer a 0,
3,
0. Les feuilles de widget forcent leurs
   fleches avec `.cyliumee-XX button.cyliumee-XX__nav { display: inline-flex
   !important }`, soit 0,2,1 : a `!important` egal, c'est la specificite qui
   tranche, et la regle du preset perdait. Les fleches restaient donc visibles
   sous le rail, sur TOUS les carrousels. */
.cyliumee-theme-rail.cyliumee-theme-rail .cyliumee-nav,
.cyliumee-theme-rail.cyliumee-theme-rail .cyliumee-nav-wrap { display: none !important; }

/* The dots sit on their own line under the bar, and are never hidden here: with
   the arrows gone they are the only page-to-page affordance left. */


.cyliumee-theme-rail .cyliumee-scrollbar {
    display: block;
    position: relative;
    height: 8px;
    margin-top: 16px;
    border-radius: 99px;
    background: var(--cee-ps-rail-track, rgba(0, 0, 0, 0.08));
}

.cyliumee-theme-rail .cyliumee-scrollbar .swiper-scrollbar-drag {
    border-radius: 99px;
    background: var(--cee-ps-dot-active, #1a1a1a);
    cursor: grab;
}

.cyliumee-theme-rail .cyliumee-scrollbar .swiper-scrollbar-drag:active { cursor: grabbing; }

/* =========================================================================
 * PRESET — dots-only ("Dots only")
 * The most restrained: no arrows, no bar. Navigation is the dots, the finger,
 * the trackpad and the keyboard.
 * ===================================================================== */

/* Arrows are left to the "Navigation" switch, per device — this preset merely
   suggests doing without them. */

/* The dots are the only affordance left, so they are never hidden here — this
   preset would otherwise have no navigation at all on that breakpoint. */
/* 🔴 The dots are NO LONGER forced here. Forcing them — like forcing the arrows
   off — made the two panel switches inert on these three presets: toggling them
   changed nothing, on any device, which is exactly what was reported. A preset
   decides the LOOK; the merchant decides what is visible, per device. Only the
   spacing stays. */
.cyliumee-theme-dots-only .cyliumee-pagination {
    margin-top: 20px;
    gap: 10px;
}

/* 🔴 What tells this preset apart from "arrows off": the next card stays PARTLY
   VISIBLE. Without that cue the row looks like a static grid with dots under it,
   and nothing suggests there is more to see — which is exactly the "I do not see
   what it is for" reported on 03/09. The slide is not resized (Swiper owns that);
   the row is simply allowed to bleed past its right edge.
   Applied from the tablet up: on a phone a peek eats too much of a narrow card. */
@media (min-width: 768px) {
    .cyliumee-theme-dots-only .swiper {
        overflow: visible;
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
                mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
    }
}

/* Cible les ENFANTS du conteneur de pagination : la classe des puces est imposee
   par la config Swiper de chaque widget (`bulletClass`), qui n'accepte qu'un seul
   nom — on ne peut pas y poser un role sans casser classList.
   Zone de clic plus large que par defaut : ici les puces portent toute la
   navigation. */
.cyliumee-theme-dots-only .cyliumee-pagination > * {
    width: 10px;
    height: 10px;
}

/* =========================================================================
 * PRESET — peek-fade ("Faded peek")
 * Cards that are not entirely inside the viewport are dimmed and regain full
 * opacity as they come in. `swiper-slide-visible` is set by Swiper itself when
 * `watchSlidesProgress` is on (views/js/front.js), so nothing is measured here.
 * ===================================================================== */

/* Arrows are left to the "Navigation" switch, per device — this preset merely
   suggests doing without them. */



/* `.swiper` plutot que le conteneur d'un widget precis : c'est la classe que
   Swiper exige de toute facon, donc elle vaut pour tous les carrousels. Ciblee
   sur .cyliumee-ps, la regle laissait le carrousel de categories intact. */
.cyliumee-theme-peek-fade .swiper .swiper-slide {
    opacity: var(--cee-ps-peek-dim, 0.35);
    transition: opacity 0.28s ease;
}

.cyliumee-theme-peek-fade .swiper .swiper-slide-visible { opacity: 1; }

/* Garde « visible en cas d'echec » : elle doit surveiller l'element que Swiper
   initialise, celui qui porte `.swiper`, et non le conteneur exterieur du widget
   — sur ce dernier la condition etait toujours vraie et le preset restait inerte. */
.cyliumee-theme-peek-fade .swiper:not(.swiper-initialized) .swiper-slide { opacity: 1; }