/**
 * 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
 *                         .cyliumee-cats__slider 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-cats__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-cats__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-ps__header,
.cyliumee-theme-header-split .cyliumee-cats__header {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.cyliumee-theme-header-split .cyliumee-ps__heading-wrap,
.cyliumee-theme-header-split .cyliumee-cats__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-ps__header::after,
.cyliumee-theme-header-split .cyliumee-cats__header::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-ps__actions,
.cyliumee-theme-header-split .cyliumee-cats__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-ps__nav-wrap,
.cyliumee-theme-header-split .cyliumee-cats__nav-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.cyliumee-theme-header-split .cyliumee-ps__pagination,
.cyliumee-theme-header-split .cyliumee-cats__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-ps__header::after,
    .cyliumee-theme-header-split .cyliumee-cats__header::after {
        display: none;
    }
    .cyliumee-theme-header-split .cyliumee-ps__actions,
    .cyliumee-theme-header-split .cyliumee-cats__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 .cyliumee-ps__slider,
.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-ps__nav-wrap {
    display: contents;
}

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

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

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

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

.cyliumee-theme-arrows-outside .cyliumee-cats .cyliumee-cats__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-ps__nav--prev {
        left: 8px;
    }
    .cyliumee-theme-arrows-outside .cyliumee-ps .cyliumee-ps__nav--next {
        right: 8px;
    }
    .cyliumee-theme-arrows-outside .cyliumee-cats .cyliumee-cats__nav--prev {
        left: 8px !important;
    }
    .cyliumee-theme-arrows-outside .cyliumee-cats .cyliumee-cats__nav--next {
        right: 8px !important;
    }
}

/* =========================================================================
 * PRESET — arrows-top-right ("Compact")
 * Arrows grouped at the top right, on the title row.
 * ===================================================================== */

.cyliumee-theme-arrows-top-right .cyliumee-ps,
.cyliumee-theme-arrows-top-right .cyliumee-cats {
    position: relative;
}

.cyliumee-theme-arrows-top-right .cyliumee-ps__header,
.cyliumee-theme-arrows-top-right .cyliumee-cats__header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cyliumee-theme-arrows-top-right .cyliumee-ps__heading-wrap,
.cyliumee-theme-arrows-top-right .cyliumee-cats__heading-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.cyliumee-theme-arrows-top-right .cyliumee-ps__actions,
.cyliumee-theme-arrows-top-right .cyliumee-cats__actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.cyliumee-theme-arrows-top-right .cyliumee-ps__nav-wrap,
.cyliumee-theme-arrows-top-right .cyliumee-cats__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-cats__nav {
    top: 0 !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
}

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

.cyliumee-theme-arrows-top-right .cyliumee-cats .cyliumee-cats__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-ps__pagination,
.cyliumee-theme-dots-below .cyliumee-cats__pagination {
    position: relative;
    inset: auto;
    margin-top: 16px;
}

.cyliumee-theme-dots-overlay-bottom .cyliumee-ps__slider,
.cyliumee-theme-dots-overlay-bottom .cyliumee-cats {
    position: relative;
}

.cyliumee-theme-dots-overlay-bottom .cyliumee-ps__pagination,
.cyliumee-theme-dots-overlay-bottom .cyliumee-cats__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-ps__nav-wrap {
    display: contents;
}

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

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

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

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

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

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

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

/* -- Arrows: below the slides, centered ------------------------------- */
.cyliumee-theme-arrows-bottom-center .cyliumee-ps__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-ps__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-cats__nav {
    top: auto !important;
    bottom: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

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

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