/* CyliumElementorExtras — Responsive image slider.
 * Namespaced classes (cyliumee-slider*). Per-slide alignment driven by
 * CSS custom properties so each slide can be positioned independently,
 * with a tablet / mobile fallback cascade.
 */
.cyliumee-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.cyliumee-slider__slide {
    position: relative;
    display: block;
    width: 100%;
}

.cyliumee-slider__media-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cyliumee-slider__picture,
.cyliumee-slider__picture img {
    display: block;
    width: 100%;
    height: auto;
}

.cyliumee-slider__image {
    object-fit: cover;
    width: 100%;
}

/* ---------------------------------------------------- Video slides */
.cyliumee-slider__video {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
}

.cyliumee-slider__video--fit-cover   { object-fit: cover; }
.cyliumee-slider__video--fit-contain { object-fit: contain; }

.cyliumee-slider__video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.cyliumee-slider__video-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cyliumee-slider__video-frame--fit-cover .cyliumee-slider__video-iframe {
    /* Scale the iframe past the box and crop with negative offsets so it covers
       (YouTube/Vimeo iframes ignore object-fit; this approximates the same look
       for a 16:9 source). */
    width: 177.78%;
    height: 100%;
    top: 0;
    left: -38.89%;
}

.cyliumee-slider__video-poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* ---------------------------------------------------- Content overlay */
.cyliumee-slider__content {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: var(--cee-content-padding, 1.5rem);
    justify-content: var(--cee-valign, flex-end);
    align-items: var(--cee-halign, center);
    pointer-events: none;
}

.cyliumee-slider__content-inner {
    max-width: var(--cee-content-max-width, 800px);
    width: 100%;
    text-align: var(--cee-talign, center);
    background: var(--cee-content-bg, transparent);
    pointer-events: auto;
}

.cyliumee-slider__heading {
    margin: 0 0 0.25em;
    color: var(--cee-h-color, #fff);
    font-size: var(--cee-h-size, 2.25rem);
    line-height: 1.15;
}

.cyliumee-slider__subheading {
    margin: 0 0 0.5em;
    color: var(--cee-sh-color, #fff);
    font-size: var(--cee-sh-size, 1.25rem);
    line-height: 1.25;
    font-weight: 500;
}

.cyliumee-slider__text {
    margin: 0 0 1em;
    color: var(--cee-t-color, #fff);
    font-size: var(--cee-t-size, 1rem);
    line-height: 1.45;
}

.cyliumee-slider__text > :last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------- Button */
.cyliumee-slider__button {
    display: inline-block;
    margin: 0;
    padding: var(--cee-btn-pad-y, 12px) var(--cee-btn-pad-x, 24px);
    color: var(--cee-btn-text, #fff);
    background: var(--cee-btn-bg, #1f1f1f);
    border: 0;
    border-radius: var(--cee-btn-radius, 4px);
    font-size: var(--cee-btn-size, 14px);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.cyliumee-slider__button:hover,
.cyliumee-slider__button:focus {
    color: var(--cee-btn-text-hover, #fff);
    background: var(--cee-btn-bg-hover, #444);
    outline: 0;
}

/* ---------------------------------------------------- Responsive cascade
 * Each breakpoint pulls from its own --*-tablet / --*-mobile variable, with
 * a fallback chain to the desktop value if the override wasn't emitted.
 */
@media (max-width: 1024px) {
    .cyliumee-slider__content {
        padding: var(--cee-content-padding-tablet, var(--cee-content-padding, 1.5rem));
        justify-content: var(--cee-valign-tablet, var(--cee-valign, flex-end));
        align-items: var(--cee-halign-tablet, var(--cee-halign, center));
    }
    .cyliumee-slider__content-inner {
        max-width: var(--cee-content-max-width-tablet, var(--cee-content-max-width, 800px));
        text-align: var(--cee-talign-tablet, var(--cee-talign, center));
    }
    .cyliumee-slider__heading    { font-size: var(--cee-h-size-tablet, var(--cee-h-size, 2.25rem)); }
    .cyliumee-slider__subheading { font-size: var(--cee-sh-size-tablet, var(--cee-sh-size, 1.25rem)); }
    .cyliumee-slider__text       { font-size: var(--cee-t-size-tablet, var(--cee-t-size, 1rem)); }
    .cyliumee-slider__button {
        padding: var(--cee-btn-pad-y-tablet, var(--cee-btn-pad-y, 12px)) var(--cee-btn-pad-x-tablet, var(--cee-btn-pad-x, 24px));
        font-size: var(--cee-btn-size-tablet, var(--cee-btn-size, 14px));
    }
}

@media (max-width: 768px) {
    .cyliumee-slider__content {
        padding: var(--cee-content-padding-mobile, var(--cee-content-padding-tablet, var(--cee-content-padding, 1rem)));
        justify-content: var(--cee-valign-mobile, var(--cee-valign-tablet, var(--cee-valign, flex-end)));
        align-items: var(--cee-halign-mobile, var(--cee-halign-tablet, var(--cee-halign, center)));
    }
    .cyliumee-slider__content-inner {
        max-width: var(--cee-content-max-width-mobile, var(--cee-content-max-width-tablet, var(--cee-content-max-width, 100%)));
        text-align: var(--cee-talign-mobile, var(--cee-talign-tablet, var(--cee-talign, center)));
    }
    .cyliumee-slider__heading    { font-size: var(--cee-h-size-mobile, var(--cee-h-size-tablet, var(--cee-h-size, 1.5rem))); }
    .cyliumee-slider__subheading { font-size: var(--cee-sh-size-mobile, var(--cee-sh-size-tablet, var(--cee-sh-size, 1.05rem))); }
    .cyliumee-slider__text       { font-size: var(--cee-t-size-mobile, var(--cee-t-size-tablet, var(--cee-t-size, 0.9rem))); }
    .cyliumee-slider__button {
        padding: var(--cee-btn-pad-y-mobile, var(--cee-btn-pad-y-tablet, var(--cee-btn-pad-y, 10px)))
                 var(--cee-btn-pad-x-mobile, var(--cee-btn-pad-x-tablet, var(--cee-btn-pad-x, 18px)));
        font-size: var(--cee-btn-size-mobile, var(--cee-btn-size-tablet, var(--cee-btn-size, 13px)));
    }
}

/* ---------------------------------------------------- Navigation arrows */
.cyliumee-slider__nav {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 50%;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cee-arrow-size, 44px);
    height: var(--cee-arrow-size, 44px);
    margin: calc(var(--cee-arrow-size, 44px) / -2) 0 0 0;
    padding: 0;
    color: var(--cee-arrow, #fff);
    background: var(--cee-arrow-bg, rgba(0, 0, 0, 0.35));
    background-image: none;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.cyliumee-slider__nav:hover,
.cyliumee-slider__nav:focus {
    background: var(--cee-arrow-bg-hover, rgba(0, 0, 0, 0.6));
    color: var(--cee-arrow, #fff);
    outline: 0;
    box-shadow: none;
}

.cyliumee-slider__nav--prev { left: 12px; }
.cyliumee-slider__nav--next { right: 12px; }

.cyliumee-slider__nav--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.cyliumee-slider__nav--hidden { display: none; }

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

/* ---------------------------------------------------- Pagination dots */
.cyliumee-slider__pagination {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}

.cyliumee-slider__pagination--clickable .cyliumee-slider__bullet {
    pointer-events: auto;
}

.cyliumee-slider__bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cee-dot, rgba(255, 255, 255, 0.5));
    box-shadow: none;
    opacity: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.cyliumee-slider__bullet:hover { transform: scale(1.15); }

.cyliumee-slider__bullet--active {
    background: var(--cee-dot-active, #fff);
    transform: scale(1.2);
}

/* ====================================================================
 * Category Slider widget
 * ==================================================================== */

.cyliumee-cats {
    position: relative;
    width: 100%;
    padding: 4px 0;
}

.cyliumee-cats__card {
    height: auto;
    background: var(--cee-cats-card-bg, transparent);
}

.cyliumee-cats__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cyliumee-cats__image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--cee-cats-radius, 8px);
    background: #f0f0f0;
    line-height: 0;
}

.cyliumee-cats__image-wrap--ratio {
    aspect-ratio: 1 / var(--cee-cats-image-ratio, 1);
}

.cyliumee-cats__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease, opacity 0.3s ease;
}

.cyliumee-cats__image-wrap--ratio .cyliumee-cats__image {
    height: 100%;
}

/* Card shadow variants */
.cyliumee-cats--shadow-sm .cyliumee-cats__image-wrap { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.cyliumee-cats--shadow-md .cyliumee-cats__image-wrap { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.cyliumee-cats--shadow-lg .cyliumee-cats__image-wrap { box-shadow: 0 10px 30px rgba(0,0,0,0.18); }

/* ---------------------------------------------------- Meta block */
.cyliumee-cats__meta {
    padding: 14px 4px 6px;
}

.cyliumee-cats__title {
    margin: 0;
    color: var(--cee-cats-title-color, #1a1a1a);
    font-size: var(--cee-cats-title-size, 1.125rem);
    font-weight: var(--cee-cats-title-weight, 700);
    line-height: 1.25;
}

.cyliumee-cats__count--sup {
    font-size: 0.65em;
    font-weight: 500;
    color: var(--cee-cats-count-color, #888);
    margin-left: 0.15em;
    vertical-align: super;
}

.cyliumee-cats__count--inline {
    color: var(--cee-cats-count-color, #888);
    font-weight: 500;
}

.cyliumee-cats__count--below {
    margin-top: 4px;
    color: var(--cee-cats-count-color, #888);
    font-size: 0.85em;
    font-weight: 500;
}

/* ---------------------------------------------------- Badge on image */
.cyliumee-cats__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cee-cats-btn-color, #1a1a1a);
    background: var(--cee-cats-btn-bg, #fff);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

/* ---------------------------------------------------- Button styles */
.cyliumee-cats__btn--corner {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cee-cats-btn-color, #1a1a1a);
    background: var(--cee-cats-btn-bg, #fff);
    border-radius: 50%;
    opacity: 0.92;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.cyliumee-cats__card:hover .cyliumee-cats__btn--corner {
    color: var(--cee-cats-btn-color-hover, #fff);
    background: var(--cee-cats-btn-bg-hover, #1a1a1a);
    opacity: 1;
    transform: translateX(2px);
}

.cyliumee-cats__btn--inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    color: var(--cee-cats-btn-color, #1a1a1a);
    background: transparent;
    border-radius: 50%;
    vertical-align: middle;
    transition: transform 0.2s ease, color 0.2s ease;
}
.cyliumee-cats__card:hover .cyliumee-cats__btn--inline {
    color: var(--cee-cats-btn-bg-hover, #000);
    transform: translateX(3px);
}

.cyliumee-cats__btn--pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 16px;
    color: var(--cee-cats-btn-color, #1a1a1a);
    background: var(--cee-cats-btn-bg, #fff);
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.cyliumee-cats__card:hover .cyliumee-cats__btn--pill {
    color: var(--cee-cats-btn-color-hover, #fff);
    background: var(--cee-cats-btn-bg-hover, #1a1a1a);
    border-color: var(--cee-cats-btn-bg-hover, #1a1a1a);
}

/* ---------------------------------------------------- Hover effects on image */
.cyliumee-cats--hover-zoom .cyliumee-cats__card:hover .cyliumee-cats__image     { transform: scale(1.08); }
.cyliumee-cats--hover-zoom-out .cyliumee-cats__card .cyliumee-cats__image        { transform: scale(1.08); }
.cyliumee-cats--hover-zoom-out .cyliumee-cats__card:hover .cyliumee-cats__image  { transform: scale(1); }
.cyliumee-cats--hover-grayscale .cyliumee-cats__card .cyliumee-cats__image       { filter: grayscale(100%); }
.cyliumee-cats--hover-grayscale .cyliumee-cats__card:hover .cyliumee-cats__image { filter: grayscale(0); }
.cyliumee-cats--hover-blur .cyliumee-cats__card .cyliumee-cats__image            { filter: blur(2px); }
.cyliumee-cats--hover-blur .cyliumee-cats__card:hover .cyliumee-cats__image      { filter: blur(0); }
.cyliumee-cats--hover-tilt .cyliumee-cats__card                                  { transition: transform 0.3s ease; transform-origin: center bottom; }
.cyliumee-cats--hover-tilt .cyliumee-cats__card:hover                            { transform: perspective(800px) rotateX(2deg) rotateY(-2deg) scale(1.02); }
.cyliumee-cats--hover-lift .cyliumee-cats__card                                  { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cyliumee-cats--hover-lift .cyliumee-cats__card:hover                            { transform: translateY(-6px); }
.cyliumee-cats--hover-fade .cyliumee-cats__image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background-color 0.3s ease;
    pointer-events: none;
}
.cyliumee-cats--hover-fade .cyliumee-cats__card:hover .cyliumee-cats__image-wrap::after {
    background: rgba(0,0,0,0.35);
}

/* ---------------------------------------------------- Navigation arrows
 * Same visual language as .cyliumee-slider__nav: round button, translucent
 * dark bg by default, white SVG. Specificity is bumped with double selectors
 * + !important on layout-critical rules so theme button styles (Bootstrap
 * .btn, Hummingbird buttons, etc.) can't leak in and bloat the controls.
 */
.cyliumee-cats .cyliumee-cats__nav,
.cyliumee-cats button.cyliumee-cats__nav {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: absolute !important;
    top: 50% !important;
    z-index: 10;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: var(--cee-cats-arrow-size, 44px) !important;
    height: var(--cee-cats-arrow-size, 44px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: var(--cee-cats-arrow-size, 44px) !important;
    max-height: var(--cee-cats-arrow-size, 44px) !important;
    margin: calc(var(--cee-cats-arrow-size, 44px) / -2) 0 0 0 !important;
    padding: 0 !important;
    color: var(--cee-cats-arrow, #fff) !important;
    background: var(--cee-cats-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-cats .cyliumee-cats__nav:hover,
.cyliumee-cats .cyliumee-cats__nav:focus,
.cyliumee-cats button.cyliumee-cats__nav:hover,
.cyliumee-cats button.cyliumee-cats__nav:focus {
    color: var(--cee-cats-arrow, #fff) !important;
    background: var(--cee-cats-arrow-bg-hover, rgba(0, 0, 0, 0.6)) !important;
    background-image: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}
.cyliumee-cats .cyliumee-cats__nav--prev { left: 12px !important; right: auto !important; }
.cyliumee-cats .cyliumee-cats__nav--next { right: 12px !important; left: auto !important; }
.cyliumee-cats .cyliumee-cats__nav--disabled {
    opacity: 0;
    pointer-events: none;
}
.cyliumee-cats .cyliumee-cats__nav--lock,
.cyliumee-cats__nav.swiper-button-lock {
    display: none !important;
}
.cyliumee-cats .cyliumee-cats__nav svg {
    display: block;
    width: 40%;
    height: 40%;
}

/* ---------------------------------------------------- Pagination dots */
.cyliumee-cats__pagination {
    position: relative;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}
.cyliumee-cats__pagination--clickable .cyliumee-cats__bullet { pointer-events: auto; }
.cyliumee-cats__bullet {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--cee-cats-dot, rgba(0,0,0,0.25));
    opacity: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.cyliumee-cats__bullet--active {
    background: var(--cee-cats-dot-active, #1a1a1a);
    transform: scale(1.25);
}

/* ---------------------------------------------------- Responsive sizes */
@media (max-width: 1024px) {
    .cyliumee-cats__title { font-size: var(--cee-cats-title-size-tablet, var(--cee-cats-title-size, 1.05rem)); }
}
@media (max-width: 768px) {
    .cyliumee-cats__title { font-size: var(--cee-cats-title-size-mobile, var(--cee-cats-title-size-tablet, var(--cee-cats-title-size, 1rem))); }
    .cyliumee-cats__meta  { padding: 10px 2px 4px; }
}

/* ---------------------------------------------------- Category slider full-bleed / peek
 * Breaks out of the parent column so the slider reaches the viewport edges.
 * "Peek" reveals roughly 30% of the next card on the right — driven by JS via
 * slidesPerView, no extra CSS needed beyond keeping overflow visible.
 */
.cyliumee-cats--full-bleed {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: var(--cee-cats-bleed-pad, 24px);
    padding-right: var(--cee-cats-bleed-pad, 24px);
    overflow: hidden;
}

.cyliumee-cats--full-bleed .cyliumee-cats__nav--prev { left: calc(var(--cee-cats-bleed-pad, 24px) - 6px); }
.cyliumee-cats--full-bleed .cyliumee-cats__nav--next { right: calc(var(--cee-cats-bleed-pad, 24px) - 6px); }

/* ====================================================================
 * Product Slider widget
 * ==================================================================== */

.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;
}

/* ---------------------------------------------------- Header row (title + view-all + arrows) */
.cyliumee-ps__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.cyliumee-ps__heading-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.cyliumee-ps__heading {
    margin: 0;
    color: var(--cee-ps-heading-color, #1a1a1a);
    font-weight: var(--cee-ps-heading-weight, 700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

/* Size presets: S / M / L / XL / XXL. clamp() keeps each preset responsive
   without needing per-device overrides. */
.cyliumee-ps__heading--size-s   { font-size: clamp(0.95rem, 1.4vw, 1.125rem); }
.cyliumee-ps__heading--size-m   { font-size: clamp(1.05rem, 1.8vw, 1.375rem); }
.cyliumee-ps__heading--size-l   { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.cyliumee-ps__heading--size-xl  { font-size: clamp(1.5rem,  3vw,   2.25rem); }
.cyliumee-ps__heading--size-xxl { font-size: clamp(1.875rem,4vw,   3rem);    }

.cyliumee-ps__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.cyliumee-ps__view-all {
    display: inline-flex;
    align-items: center;
    color: var(--cee-ps-view-all, #1a1a1a);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 0.2s ease;
}
.cyliumee-ps__view-all:hover,
.cyliumee-ps__view-all:focus {
    opacity: 0.7;
    text-decoration: none;
    color: var(--cee-ps-view-all, #1a1a1a);
    outline: 0;
}

.cyliumee-ps__nav-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Same visual language as cyliumee-slider__nav / cyliumee-cats__nav:
 * round button, translucent dark background, white SVG. !important wins
 * over theme .btn rules from Bootstrap / Hummingbird.
 */
.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, #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%;
}

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

.cyliumee-ps__card {
    height: auto;
    display: flex;
    flex-direction: column;
}

/* Make each rendered product miniature stretch to the slide height so all
   cards line up nicely regardless of title length. */
.cyliumee-ps__card > .product-miniature,
.cyliumee-ps__card > .js-product-miniature,
.cyliumee-ps__card > .product {
    flex: 1 1 auto;
    margin: 0;
    height: 100%;
    width: 100%;
}

/* ---------------------------------------------------- Pagination dots */
.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);
}

/* ---------------------------------------------------- Responsive header
 * Heading sizes are owned by the .cyliumee-ps__heading--size-{s,m,l,xl,xxl}
 * preset classes (clamp-driven), so no extra @media rule is needed here.
 */
@media (max-width: 768px) {
    .cyliumee-ps__header  { gap: 12px; margin-bottom: 16px; }
    .cyliumee-ps__actions { gap: 8px; }
}

/* ====================================================================
 * Image Block widget
 * ==================================================================== */

.cyliumee-ib {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--cee-ib-radius, 0);
}

.cyliumee-ib__media-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cyliumee-ib__picture,
.cyliumee-ib__picture img {
    display: block;
    width: 100%;
    height: 100%;
}

.cyliumee-ib__image {
    width: 100%;
    height: 100%;
    /* aspect-ratio is applied on the .cyliumee-ib root when set; the image
       just fills the box. With ratio=auto the picture is natural-sized. */
}

.cyliumee-ib--ratio {
    height: auto;
}
.cyliumee-ib--ratio .cyliumee-ib__picture { height: 100%; }
.cyliumee-ib--ratio .cyliumee-ib__image  { height: 100%; }

.cyliumee-ib__image--fit-cover   { object-fit: cover; }
.cyliumee-ib__image--fit-contain { object-fit: contain; }

/* Overlay tint applied via ::after on the picture so the content layer
   above isn't tinted itself. */
.cyliumee-ib__picture::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cee-ib-overlay, transparent);
    pointer-events: none;
}

/* ---------------------------------------------------- Content overlay */
.cyliumee-ib__content {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: var(--cee-ib-content-padding, 2rem);
    justify-content: var(--cee-ib-valign, flex-end);
    align-items: var(--cee-ib-halign, center);
    pointer-events: none;
}

.cyliumee-ib__content-inner {
    width: 100%;
    max-width: var(--cee-ib-content-max-width, 600px);
    text-align: var(--cee-ib-talign, center);
    background: var(--cee-ib-content-bg, transparent);
    pointer-events: auto;
}

.cyliumee-ib__heading {
    margin: 0 0 0.25em;
    color: #fff;
    font-weight: 700;
    line-height: 1.15;
}

.cyliumee-ib__heading--size-s   { font-size: clamp(1rem,     1.6vw, 1.25rem); }
.cyliumee-ib__heading--size-m   { font-size: clamp(1.25rem,  2vw,   1.75rem); }
.cyliumee-ib__heading--size-l   { font-size: clamp(1.5rem,   2.6vw, 2.25rem); }
.cyliumee-ib__heading--size-xl  { font-size: clamp(2rem,     3.4vw, 3rem);    }
.cyliumee-ib__heading--size-xxl { font-size: clamp(2.5rem,   4.5vw, 4rem);    }

.cyliumee-ib__subheading {
    margin: 0 0 0.5em;
    color: var(--cee-ib-sh-color, #fff);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.25;
}

.cyliumee-ib__text {
    margin: 0 0 1em;
    color: var(--cee-ib-t-color, #fff);
    font-size: 1rem;
    line-height: 1.45;
}
.cyliumee-ib__text > :last-child { margin-bottom: 0; }

.cyliumee-ib__button {
    display: inline-block;
    margin: 0;
    padding: 12px 24px;
    color: var(--cee-ib-btn-text, #fff);
    background: var(--cee-ib-btn-bg, #1f1f1f);
    border: 0;
    border-radius: var(--cee-ib-btn-radius, 4px);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}
.cyliumee-ib__button:hover,
.cyliumee-ib__button:focus {
    color: var(--cee-ib-btn-text-hover, #fff);
    background: var(--cee-ib-btn-bg-hover, #444);
    outline: 0;
}

/* ---------------------------------------------------- Responsive cascade */
@media (max-width: 1024px) {
    .cyliumee-ib__content {
        padding: var(--cee-ib-content-padding-tablet, var(--cee-ib-content-padding, 1.5rem));
        justify-content: var(--cee-ib-valign-tablet, var(--cee-ib-valign, flex-end));
        align-items: var(--cee-ib-halign-tablet, var(--cee-ib-halign, center));
    }
    .cyliumee-ib__content-inner {
        max-width: var(--cee-ib-content-max-width-tablet, var(--cee-ib-content-max-width, 600px));
        text-align: var(--cee-ib-talign-tablet, var(--cee-ib-talign, center));
    }
}
@media (max-width: 768px) {
    .cyliumee-ib__content {
        padding: var(--cee-ib-content-padding-mobile, var(--cee-ib-content-padding-tablet, var(--cee-ib-content-padding, 1rem)));
        justify-content: var(--cee-ib-valign-mobile, var(--cee-ib-valign-tablet, var(--cee-ib-valign, flex-end)));
        align-items: var(--cee-ib-halign-mobile, var(--cee-ib-halign-tablet, var(--cee-ib-halign, center)));
    }
    .cyliumee-ib__content-inner {
        max-width: var(--cee-ib-content-max-width-mobile, var(--cee-ib-content-max-width-tablet, var(--cee-ib-content-max-width, 100%)));
        text-align: var(--cee-ib-talign-mobile, var(--cee-ib-talign-tablet, var(--cee-ib-talign, center)));
    }
}

/* ====================================================================
 * Product Hover Image widget
 * Two stacked product images. Primary is always visible. Hover image
 * fades / slides / zooms in on :hover via the transition modifier class.
 * ==================================================================== */

.cyliumee-phi {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.cyliumee-phi__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cyliumee-phi__image {
    display: block;
    width: 100%;
    height: auto;
}

.cyliumee-phi--ratio .cyliumee-phi__image {
    height: 100%;
}
.cyliumee-phi--fit-cover   .cyliumee-phi__image { object-fit: cover; }
.cyliumee-phi--fit-contain .cyliumee-phi__image { object-fit: contain; }

.cyliumee-phi__image--hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity var(--cee-phi-duration, 350ms) ease,
                transform var(--cee-phi-duration, 350ms) ease;
    opacity: 0;
    pointer-events: none;
}

/* When no hover image is rendered, the widget gracefully collapses to the
   primary image — no transition needed. */

/* ---------------------------------------------------- Transitions */
.cyliumee-phi--fade .cyliumee-phi__image--hover         { opacity: 0; }
.cyliumee-phi--fade:hover .cyliumee-phi__image--hover   { opacity: 1; }

.cyliumee-phi--slide-left  .cyliumee-phi__image--hover  { opacity: 1; transform: translateX(100%); }
.cyliumee-phi--slide-right .cyliumee-phi__image--hover  { opacity: 1; transform: translateX(-100%); }
.cyliumee-phi--slide-up    .cyliumee-phi__image--hover  { opacity: 1; transform: translateY(100%); }
.cyliumee-phi--slide-down  .cyliumee-phi__image--hover  { opacity: 1; transform: translateY(-100%); }
.cyliumee-phi--slide-left:hover  .cyliumee-phi__image--hover,
.cyliumee-phi--slide-right:hover .cyliumee-phi__image--hover,
.cyliumee-phi--slide-up:hover    .cyliumee-phi__image--hover,
.cyliumee-phi--slide-down:hover  .cyliumee-phi__image--hover { transform: translate(0, 0); }

.cyliumee-phi--zoom .cyliumee-phi__image--hover         { opacity: 0; transform: scale(0.85); }
.cyliumee-phi--zoom:hover .cyliumee-phi__image--hover   { opacity: 1; transform: scale(1); }

.cyliumee-phi--none .cyliumee-phi__image--hover         { transition: none; opacity: 0; }
.cyliumee-phi--none:hover .cyliumee-phi__image--hover   { opacity: 1; }

/* Touch devices have no real hover — keep the hover image hidden so users
   don't accidentally see a sticky overlay after a tap. */
@media (hover: none) {
    .cyliumee-phi__image--hover { display: none; }
}

/* ====================================================================
 * Icon Boxes widget (feature / reassurance bar)
 * Desktop+tablet: flex row, Swiper still init for nav consistency but
 * locked overflow (no scroll). Mobile: 1-per-view Swiper with arrows.
 * ==================================================================== */

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

.cyliumee-icob__swiper {
    position: relative;
    overflow: hidden;
}

.cyliumee-icob__item {
    height: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.cyliumee-icob--layout-inline .cyliumee-icob__item {
    flex-direction: row;
    gap: 16px;
    text-align: left;
}

.cyliumee-icob__link {
    display: flex;
    flex-direction: inherit;
    align-items: center;
    justify-content: center;
    gap: inherit;
    color: inherit;
    text-decoration: none;
    width: 100%;
}

.cyliumee-icob__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.cyliumee-icob__icon-img {
    max-width: 1em;
    max-height: 1em;
}

.cyliumee-icob__body {
    min-width: 0;
}

.cyliumee-icob__title {
    margin: 0 0 4px;
    line-height: 1.2;
}

.cyliumee-icob__desc {
    margin: 0;
    line-height: 1.4;
}

/* ---------------------------------------------------- Navigation arrows
 * Same look as the other widgets: round translucent dark + white SVG.
 * Hidden by default — JS toggles .cyliumee-icob--mobile on the wrapper
 * when the viewport is under the configured breakpoint.
 */
.cyliumee-icob .cyliumee-icob__nav,
.cyliumee-icob button.cyliumee-icob__nav {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: absolute !important;
    top: 50% !important;
    z-index: 10;
    display: none !important; /* shown only when .cyliumee-icob--mobile */
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: var(--cee-icob-arrow-size, 36px) !important;
    height: var(--cee-icob-arrow-size, 36px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: calc(var(--cee-icob-arrow-size, 36px) / -2) 0 0 0 !important;
    padding: 0 !important;
    color: var(--cee-icob-arrow, #fff) !important;
    background: var(--cee-icob-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-icob.cyliumee-icob--mobile .cyliumee-icob__nav {
    display: inline-flex !important;
}
.cyliumee-icob .cyliumee-icob__nav:hover,
.cyliumee-icob .cyliumee-icob__nav:focus {
    background: var(--cee-icob-arrow-bg-hover, rgba(0,0,0,0.6)) !important;
    outline: 0 !important;
}
.cyliumee-icob .cyliumee-icob__nav--prev { left: 4px !important; right: auto !important; }
.cyliumee-icob .cyliumee-icob__nav--next { right: 4px !important; left: auto !important; }
.cyliumee-icob .cyliumee-icob__nav--disabled { opacity: 0; pointer-events: none; }
.cyliumee-icob .cyliumee-icob__nav svg { display: block; width: 40%; height: 40%; }

/* ---------------------------------------------------- Pagination dots */
.cyliumee-icob__pagination {
    position: relative;
    margin-top: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}
.cyliumee-icob.cyliumee-icob--mobile .cyliumee-icob__pagination {
    display: flex;
}
.cyliumee-icob__pagination--clickable .cyliumee-icob__bullet { pointer-events: auto; }
.cyliumee-icob__bullet {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--cee-icob-dot, rgba(0,0,0,0.25));
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.cyliumee-icob__bullet--active {
    background: var(--cee-icob-dot-active, #1a1a1a);
    transform: scale(1.25);
}

/* ---- Add to cart widget : quantity + button layout ---- */
.cyliumee-add-to-cart__form .product__actions-qty-add {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}
.cyliumee-add-to-cart__form .product__add-to-cart {
    flex: 0 0 auto;
    margin: 0;
}
/* Quantity block matches the add-to-cart button height */
.cyliumee-add-to-cart__form .product__quantity { display: flex; }
.cyliumee-add-to-cart__form .product__quantity .quantity-button__group { height: 100%; }
/* Full width: stack the button under the quantity and stretch it */
.cyliumee-add-to-cart--fw .product__actions-qty-add {
    flex-direction: column;
    align-items: stretch;
}
.cyliumee-add-to-cart--fw .product__add-to-cart,
.cyliumee-add-to-cart--fw .product__add-to-cart-button {
    width: 100%;
}
.cyliumee-add-to-cart--fw .product__add-to-cart-button {
    justify-content: center;
}

/* ---- Add to cart widget : button Type / Size presets ---- */
.product__add-to-cart-button.cee-atc--type-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}
.product__add-to-cart-button.cee-atc--type-secondary:hover {
    background-color: #5c636a;
    border-color: #565e64;
}
.product__add-to-cart-button.cee-atc--size-xs { padding: .25rem .6rem; font-size: .72rem; }
.product__add-to-cart-button.cee-atc--size-sm { padding: .4rem .9rem; font-size: .85rem; }
.product__add-to-cart-button.cee-atc--size-lg { padding: .9rem 1.8rem; font-size: 1.12rem; }
.product__add-to-cart-button.cee-atc--size-xl { padding: 1.15rem 2.3rem; font-size: 1.25rem; }

/* ---- Add to cart widget : quantity view (− / + layout) ---- */
.cee-atc--qty-inline .quantity-button__group { display: flex; flex-direction: row; }
/* Stacked = input on the left, + on top-right and − on bottom-right (like the
   native Product Quantity widget). */
.cee-atc--qty-stacked .quantity-button__group {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "qinput qinc" "qinput qdec";
    width: max-content;
    align-items: stretch;
}
.cee-atc--qty-stacked .quantity-button__group > .js-quantity-wanted,
.cee-atc--qty-stacked .quantity-button__group > input {
    grid-area: qinput;
    height: 100%;
    width: 3.25rem;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}
.cee-atc--qty-stacked .quantity-button__group > .js-increment-button { grid-area: qinc; }
.cee-atc--qty-stacked .quantity-button__group > .js-decrement-button { grid-area: qdec; }
/* Compact +/- so the whole control stays small (theme buttons are ~44px). */
.cee-atc--qty-stacked .quantity-button__group > .js-increment-button,
.cee-atc--qty-stacked .quantity-button__group > .js-decrement-button {
    min-width: 2rem;
    min-height: 0;
    height: auto;
    padding: .1rem .5rem;
    line-height: 1;
}
.cee-atc--qty-stacked .quantity-button__group .material-icons { font-size: 1rem; line-height: 1; }
.cee-atc--qty-stacked .quantity-button__group .spinner-border { display: none; }
.cee-atc--no-inc .quantity-button__group .js-increment-button { display: none; }
.cee-atc--no-dec .quantity-button__group .js-decrement-button { display: none; }
/* ---- Add to cart widget : variations layout / value ---- */
.cee-atc--var-inline .product__variants { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.cee-atc--var-novalue .product-variant__selected { display: none; }

/* ---- Add to cart widget : quantity Size presets (heights match the button) ---- */
.cee-atc--qtysize-xs .quantity-button__group input { padding-top: .25rem; padding-bottom: .25rem; font-size: .72rem; }
.cee-atc--qtysize-sm .quantity-button__group input { padding-top: .4rem; padding-bottom: .4rem; font-size: .85rem; }
.cee-atc--qtysize-lg .quantity-button__group input { padding-top: .9rem; padding-bottom: .9rem; font-size: 1.12rem; }
.cee-atc--qtysize-xl .quantity-button__group input { padding-top: 1.15rem; padding-bottom: 1.15rem; font-size: 1.25rem; }
.cee-atc--qtysize-xs .quantity-button__group .btn { padding-top: .25rem; padding-bottom: .25rem; }
.cee-atc--qtysize-sm .quantity-button__group .btn { padding-top: .4rem; padding-bottom: .4rem; }
.cee-atc--qtysize-lg .quantity-button__group .btn { padding-top: .9rem; padding-bottom: .9rem; }
.cee-atc--qtysize-xl .quantity-button__group .btn { padding-top: 1.15rem; padding-bottom: 1.15rem; }

/* ---- Add to cart widget : hide quantity selector (qty stays submitted) ---- */
.cee-atc--noqty .product__quantity { display: none; }