/**
 * 2025-2026 CyliumDev
 * @license   Proprietary - Non-commercial use only
 *
 * Product carousel markup, shared by the product carousel and the
 * deprecated product slider (cyliumee-carousel handle).
 * Split out of front.css so a page only pays for the widgets it renders;
 * depends on 'cyliumee-front' (shared commons) for cascade order.
 */

.cyliumee-ps {
    position: relative;
    width: 100%;
}

.cyliumee-ps--full-bleed {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: var(--cee-ps-bleed-pad, 24px);
    padding-right: var(--cee-ps-bleed-pad, 24px);
    overflow: hidden;
}

.cyliumee-ps .cyliumee-ps__nav,
.cyliumee-ps button.cyliumee-ps__nav {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: var(--cee-ps-arrow-size, 44px) !important;
    height: var(--cee-ps-arrow-size, 44px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: var(--cee-ps-arrow-size, 44px) !important;
    max-height: var(--cee-ps-arrow-size, 44px) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--cee-ps-arrow, #fff) !important;
    background: var(--cee-ps-arrow-bg, rgba(0, 0, 0, 0.35)) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.cyliumee-ps .cyliumee-ps__nav:hover,
.cyliumee-ps .cyliumee-ps__nav:focus {
    color: var(--cee-ps-arrow-hover, var(--cee-ps-arrow, #fff)) !important;
    background: var(--cee-ps-arrow-bg-hover, rgba(0, 0, 0, 0.6)) !important;
    outline: 0 !important;
}

.cyliumee-ps .cyliumee-ps__nav--disabled {
    opacity: 0.3;
    pointer-events: none;
}

.cyliumee-ps .cyliumee-ps__nav svg {
    display: block;
    width: 40%;
    height: 40%;
}

.cyliumee-ps__slider {
    position: relative;
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────
 * PRODUCT CARD (.cyliumee-ps__card)
 *
 * Every value below is a CSS VARIABLE fed by the "Product card" style section,
 * and NOT a `selectors` rule, for the reason already paid for on the image block:
 * a rule Creative Elements generates from `selectors` lands at specificity 0,4,0
 * (`.elementor-element-<id> .cyliumee-ps__card`), which outranks this file's own
 * `:hover` rule (0,2,0) — the card would then stop reacting to hover. Keeping the
 * Normal/Hover pair inside ONE stylesheet lets source order decide, which is the
 * only reliable arbiter here.
 *
 * 🔴 `overflow: hidden` is what makes the corner radius actually cut. Without it
 * the miniature paints a square box over the rounded corners and the control
 * looks dead. Consequence to know: anything the miniature deliberately hangs
 * OUTSIDE the card — an absolutely-positioned badge, a hover zoom — is clipped
 * too. That is the trade the radius requires.
 * ───────────────────────────────────────────────────────────────────────── */

/* The SLIDE. Pure layout: Swiper writes its width inline and measures it to
   compute slidesPerView, so nothing that changes its box (border, padding) may
   land here. It only carries the style VARIABLES, which cascade to the inner. */
.cyliumee-ps__card {
    height: auto;
    display: flex;
    flex-direction: column;
}

/* The VISIBLE CARD. Everything a merchant sees as "the card" is this element. */
.cyliumee-ps__card-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cee-ps-card-bg, transparent);
    border: var(--cee-ps-card-bw, 0) solid var(--cee-ps-card-bc, transparent);
    border-radius: var(--cee-ps-card-radius, 0);
    box-shadow: var(--cee-ps-card-shadow, none);
    overflow: hidden;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Each hover value falls back to its own Normal value, so setting only the
   hover state does not blank the rest. The hover TARGET is the slide, so the
   card still reacts when the pointer is over its margin. */
.cyliumee-ps__card:hover .cyliumee-ps__card-inner {
    background: var(--cee-ps-card-bg-hover, var(--cee-ps-card-bg, transparent));
    border-color: var(--cee-ps-card-bc-hover, var(--cee-ps-card-bc, transparent));
    box-shadow: var(--cee-ps-card-shadow-hover, var(--cee-ps-card-shadow, none));
}

/*
 * The miniature's own root has to be clipped as well, or its background repaints
 * the corners the card just rounded. Three roots are possible and all three are
 * real: a theme miniature (.product-miniature), and a Creative Elements
 * miniature document, whose card is an `.elementor` wrapper holding a SECTION.
 *
 * ⚠️ Scoped to the DIRECT chain on purpose. `.cyliumee-ps__card .elementor-section`
 * would clip every nested section too, including one a merchant built to let a
 * badge stick out.
 */
.cyliumee-ps__card-inner > .elementor,
.cyliumee-ps__card-inner > .elementor > .elementor-section,
.cyliumee-ps__card-inner > .elementor > .elementor-section > .elementor-container,
.cyliumee-ps__card-inner > .product-miniature,
.cyliumee-ps__card-inner > .js-product-miniature,
.cyliumee-ps__card-inner > .product {
    overflow: hidden;
    border-radius: inherit;
}

.cyliumee-ps__card-inner > .product-miniature,
.cyliumee-ps__card-inner > .js-product-miniature,
.cyliumee-ps__card-inner > .product {
    flex: 1 1 auto;
    margin: 0;
    height: 100%;
    width: 100%;
}

/* Content alignment, inherited by the miniature's text. Empty = untouched, so
   the miniature keeps its own alignment. */
.cyliumee-ps__card-inner {
    text-align: var(--cee-ps-card-align, inherit);
}

.cyliumee-ps__pagination {
    position: relative;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}

.cyliumee-ps__pagination--clickable .cyliumee-ps__bullet { pointer-events: auto; }

.cyliumee-ps__bullet {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--cee-ps-dot, rgba(0,0,0,0.25));
    opacity: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.cyliumee-ps__bullet--active {
    background: var(--cee-ps-dot-active, #1a1a1a);
    transform: scale(1.25);
}

/* ─────────────────────────────────────────────────────────────────────────
 * UNAVAILABLE PRODUCT CARDS (.cyliumee-ps__card--unavailable)
 *
 * Set by the renderer when the product cannot be ordered (catalogue-only, out of
 * stock under the shop's policy, no add-to-cart URL). Everything here applies to
 * the SLIDE (opacity, grayscale — they fade the whole cell) and to the VISIBLE
 * CARD (border, radius — same element as the Normal state, so the two cannot
 * disagree about what "the card" is).
 *
 * Everything defaults to "no change", so nothing happens until the editor sets
 * it in Style > Product card > Not orderable.
 * ───────────────────────────────────────────────────────────────────────── */

.cyliumee-ps__card--unavailable {
    opacity: var(--cee-ps-card-off-opacity, 1);
    filter: grayscale(var(--cee-ps-card-off-gray, 0));
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/*
 * 🔴 Every value falls back to the NORMAL card variable, not to a literal:
 * before that chain existed, this rule reset an unavailable card's border and
 * radius to 0, silently undoing the "Normal" settings on exactly the cards a
 * merchant wants to grey out rather than restyle.
 *
 * Specificity 0,2,0 — same as the hover rule — so SOURCE ORDER decides and this
 * block must stay AFTER it. `--cee-ps-card-off-radius` has no control any more
 * (set in 0 documents on both shops, and the radius is global now) but the
 * variable is still read, so a hand-edited document keeps working.
 */
.cyliumee-ps__card--unavailable .cyliumee-ps__card-inner {
    border: var(--cee-ps-card-off-bw, var(--cee-ps-card-bw, 0)) solid
            var(--cee-ps-card-off-bc, var(--cee-ps-card-bc, transparent));
    border-radius: var(--cee-ps-card-off-radius, var(--cee-ps-card-radius, 0));
}

/*
 * Advanced > Border > Radius is generated by Creative Elements on the widget
 * wrapper's direct `> .elementor-widget-container` child
 * (creativeelements/includes/widgets/common.php:845-855), never on our markup —
 * so without a clip the rounded corners are painted over by the square cards and
 * the native control looks dead. Same defect, and same remedy, as the product
 * hover image widget (see hoverimage.css).
 *
 * 🔴 BUT A CAROUSEL IS NOT AN IMAGE BOX: one preset puts things OUTSIDE the box
 * on purpose. `arrows-outside` ("Showcase") positions each arrow at a negative
 * offset — `left: calc(-1 * (var(--cee-ps-arrow-size) + 14px))` in themes.css —
 * so a blanket `overflow: hidden` would not merely clip them, it would DELETE
 * them from the page. Hence the `:not(:has(…))`: every preset gets its corners
 * clipped except the one whose arrows live outside, where the radius keeps its
 * old (unclipped) behaviour rather than costing the merchant its navigation.
 *
 * On a browser without :has() the whole rule is dropped, which is exactly
 * today's behaviour — a radius that does not clip. No layout breaks either way.
 */
.elementor-widget-cyliumee-crosssell-cart
    > .elementor-widget-container:not(:has(.cyliumee-theme-arrows-outside)) {
    overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────
 * CUSTOM SVG FOR THE ADD-TO-CART ICON (--cart-icon)
 *
 * WHY THIS EXISTS: Creative Elements' own miniature add-to-cart control excludes
 * SVG (`exclude_inline_options => ['svg']`, miniature/add-to-cart.php), so a
 * merchant with a house SVG simply cannot use it there. A FONT icon needs none of
 * this — it is already settable in the miniature document, and that stays the
 * right place for it.
 *
 * The whole block is gated behind `--cart-icon`, a class the template emits only
 * when a URL survived sanitisation: with no icon set, nothing here applies and
 * the miniature's own icon is untouched.
 *
 * `mask` + `currentColor` rather than an <img>: a mask INHERITS the button's
 * colour, including on hover, which an image never does. Same reason inline SVG
 * beats <img> in IconsManager — the lesson of 1.0.53.
 *
 * ⚠️ We hide CE's glyph rather than replace it: this is another widget's markup
 * and the less we touch of it the better. If CE ever renames
 * `.elementor-button-icon`, the effect is that the custom icon stops applying —
 * not a broken card.
 * ───────────────────────────────────────────────────────────────────────── */

.cyliumee-ps--cart-icon .cyliumee-ps__card .elementor-button-icon > * {
    display: none !important;
}

.cyliumee-ps--cart-icon .cyliumee-ps__card .elementor-button-icon::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--cee-ps-cart-icon) no-repeat center / contain;
            mask: var(--cee-ps-cart-icon) no-repeat center / contain;
}

/* ─────────────────────────────────────────────────────────────────────────
 * PER-BREAKPOINT VISIBILITY OF THE ARROWS AND THE DOTS
 *
 * The markup is built once, server-side, so it cannot know the viewport: the
 * controls are RENDERED as soon as any breakpoint asks for them, and hidden here
 * on the breakpoints that do not. Breakpoints match Creative Elements' own
 * (md = 768, lg = 1025), so the editor's device preview and the front agree.
 * ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 1025px) {
    .cyliumee-ps--no-arrows-d .cyliumee-ps__nav,
    .cyliumee-ps--no-arrows-d .cyliumee-ps__nav-wrap,
    /* "Navigation" is ONE concept: with the Scrolling rail preset the same switch
       governs the bar, since that preset has no arrows to govern. */
    .cyliumee-ps--no-arrows-d .cyliumee-ps__scrollbar { display: none !important; }
    .cyliumee-ps--no-dots-d .cyliumee-ps__pagination { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .cyliumee-ps--no-arrows-t .cyliumee-ps__nav,
    .cyliumee-ps--no-arrows-t .cyliumee-ps__nav-wrap,
    /* "Navigation" is ONE concept: with the Scrolling rail preset the same switch
       governs the bar, since that preset has no arrows to govern. */
    .cyliumee-ps--no-arrows-t .cyliumee-ps__scrollbar { display: none !important; }
    .cyliumee-ps--no-dots-t .cyliumee-ps__pagination { display: none !important; }
}

@media (max-width: 767px) {
    .cyliumee-ps--no-arrows-m .cyliumee-ps__nav,
    .cyliumee-ps--no-arrows-m .cyliumee-ps__nav-wrap,
    /* "Navigation" is ONE concept: with the Scrolling rail preset the same switch
       governs the bar, since that preset has no arrows to govern. */
    .cyliumee-ps--no-arrows-m .cyliumee-ps__scrollbar { display: none !important; }
    .cyliumee-ps--no-dots-m .cyliumee-ps__pagination { display: none !important; }
}

/* =========================================================================
 * "VIEW ALL" — placements other than the header
 *
 * `bottom` is a centred link under the row. `tile` is a REAL swiper slide
 * appended after the products, so it scrolls with them and inherits the card
 * width Swiper computed — nothing here measures anything.
 * ===================================================================== */

.cyliumee-ps__viewall-bottom {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.cyliumee-ps__viewall-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* A floor, not a height: the tile fills the row through `flex: 1 1 auto`
       inherited from `.cyliumee-ps__card-inner`. */
    min-height: 120px;
    text-align: center;
    text-decoration: none;
    color: var(--cee-ps-view-all, #1a1a1a);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cyliumee-ps__viewall-tile:hover,
.cyliumee-ps__viewall-tile:focus-visible { opacity: 0.7; }

.cyliumee-ps__viewall-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25em;
    height: 2.25em;
}

.cyliumee-ps__viewall-arrow svg { width: 100%; height: 100%; }

.cyliumee-ps__viewall-text {
    font-weight: 600;
    line-height: 1.2;
}

/* The tile is navigation, not a product: the "unavailable" greying and the card
   background/border of the "Product card" section would both misread it. */
.cyliumee-ps__card--viewall .cyliumee-ps__card-inner {
    background: none;
    border: 0;
    box-shadow: none;
}

/* 🔴 There used to be `height: 100%` here, on the SLIDE and on its inner card,
   and it did the opposite of what it promised. `.swiper-wrapper` is a flex row
   whose `align-items: stretch` makes every slide as tall as the tallest — but
   ONLY while the slide's height is `auto`. Setting an explicit `height: 100%`
   opted our tile OUT of that stretch, and since the wrapper's own height is
   content-driven the percentage was circular and resolved to `auto`: the tile
   collapsed to its `min-height` of 120px and the vertical placement control had
   120px to work in instead of the full row. Reported as "the block does not seem
   to take the full height" — it did not.
   The inner card already carries `flex: 1 1 auto`, which is what fills a column
   flex container whose height IS definite. Nothing else is needed. */
.cyliumee-ps__card--viewall { height: auto; }