/**
 * 2025-2026 CyliumDev
 * @license   Proprietary - Non-commercial use only
 *
 * Shared carousel HEADER (named asset 'cyliumee-header').
 *
 * One title row for every carousel family, so the product carousel, the
 * cross-sell carousel and the category carousel look and behave the same and
 * the layout presets in themes.css only need one implementation:
 *
 *   __header
 *     __heading-wrap > __heading(--size-s|m|l|xl|xxl)
 *     __actions      > __view-all + __nav-wrap > __nav--prev/--next
 *
 * Extracted from carousel.css in 1.0.29 (it was product-carousel only). Colours
 * stay per-family custom properties (--cee-ps-* / --cee-cats-*) so each widget's
 * own style panel keeps driving them.
 *
 * ⚠️ Any widget rendering a __header MUST declare 'cyliumee-header' in
 * getStyleDepends(), otherwise the title row loads unstyled.
 */

.cyliumee-ps__header,
.cyliumee-prices__header,
.cyliumee-cats__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

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

.cyliumee-ps__heading,
.cyliumee-prices__heading,
.cyliumee-cats__heading {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

/* Per-family custom properties: same rule, different variable, so each widget's
   own "Title color" control keeps working. */
.cyliumee-ps__heading {
    color: var(--cee-ps-heading-color, #1a1a1a);
    font-weight: var(--cee-ps-heading-weight, 700);
}

.cyliumee-prices__heading {
    color: var(--cee-pr-heading-color, #1a1a1a);
    font-weight: var(--cee-pr-heading-weight, 700);
}

.cyliumee-cats__heading {
    color: var(--cee-cats-heading-color, #1a1a1a);
    font-weight: var(--cee-cats-heading-weight, 700);
}

.cyliumee-ps__heading--size-s,
.cyliumee-prices__heading--size-s,
.cyliumee-cats__heading--size-s { font-size: clamp(0.95rem, 1.4vw, 1.125rem); }

.cyliumee-ps__heading--size-m,
.cyliumee-prices__heading--size-m,
.cyliumee-cats__heading--size-m { font-size: clamp(1.05rem, 1.8vw, 1.375rem); }

.cyliumee-ps__heading--size-l,
.cyliumee-prices__heading--size-l,
.cyliumee-cats__heading--size-l { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }

.cyliumee-ps__heading--size-xl,
.cyliumee-prices__heading--size-xl,
.cyliumee-cats__heading--size-xl { font-size: clamp(1.5rem, 3vw, 2.25rem); }

.cyliumee-ps__heading--size-xxl,
.cyliumee-prices__heading--size-xxl,
.cyliumee-cats__heading--size-xxl { font-size: clamp(1.875rem, 4vw, 3rem); }

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

.cyliumee-ps__view-all,
.cyliumee-prices__view-all,
.cyliumee-cats__view-all {
    display: inline-flex;
    align-items: center;
    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 { color: var(--cee-ps-view-all, #1a1a1a); }

.cyliumee-prices__view-all,
.cyliumee-cats__view-all { color: var(--cee-cats-view-all, #1a1a1a); }

.cyliumee-ps__view-all:hover,
.cyliumee-ps__view-all:focus,
.cyliumee-cats__view-all:hover,
.cyliumee-cats__view-all:focus {
    opacity: 0.7;
    text-decoration: none;
    outline: 0;
}

.cyliumee-ps__view-all:hover,
.cyliumee-ps__view-all:focus {
    color: var(--cee-ps-view-all, #1a1a1a);
}

.cyliumee-cats__view-all:hover,
.cyliumee-cats__view-all:focus {
    color: var(--cee-cats-view-all, #1a1a1a);
}

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

/* Category-carousel arrows: their appearance and their in-flow positioning are
 * declared in cats.css (one block for both placements), so nothing about them
 * is duplicated here — this file stays generic to the title row.
 */

@media (max-width: 768px) {
    .cyliumee-ps__header,
    .cyliumee-cats__header {
        margin-bottom: 16px;
        gap: 12px;
    }
    .cyliumee-ps__actions,
    .cyliumee-cats__actions { gap: 8px; }
}