/* ── TK Carousel — shared slick overrides ─────────────────────────────────── *
 *
 * Arrow strategy: the Elementor widget-container gets horizontal padding equal
 * to arrow width. Arrows sit at left:-44px / right:-44px relative to the slider
 * which is inset by that padding — so arrows land inside the container bounds
 * and are never clipped by parent overflow:hidden, regardless of Elementor version.
 *
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Elementor wrapper: create gutter, allow overflow for dots ───────────── */

.elementor-widget-container:has([data-carousel="true"]) {
    padding-left:  44px !important;
    padding-right: 44px !important;
    overflow: visible !important;
    box-sizing: border-box;
}

/* Fallback for browsers without :has() — list known carousel widgets */
.elementor-widget-the_kitchen_text_items > .elementor-widget-container,
.elementor-widget-the_kitchen_logo_wall  > .elementor-widget-container {
    padding-left:  44px !important;
    padding-right: 44px !important;
    overflow: visible !important;
    box-sizing: border-box;
}

/* ── Base slider ─────────────────────────────────────────────────────────── */

/* Apply immediately — slick measures before adding .slick-initialized */
[data-carousel="true"] {
    display: block !important;
}

[data-carousel="true"].slick-slider {
    position: relative;
    overflow: visible; /* dots can extend below */
}

[data-carousel="true"] .slick-list {
    overflow: hidden;
    /* No margin — widget-container padding already handles arrow gutter */
}

[data-carousel="true"] .slick-track {
    display: flex;
    align-items: flex-start;
}

[data-carousel="true"] .slick-slide {
    height: auto;
    padding: 0 calc(var(--space-16, 16px) / 2);
}

[data-carousel="true"] .slick-slide > div {
    display: flex;
    flex-direction: column;
}

/* ── Arrows ──────────────────────────────────────────────────────────────── */

[data-carousel="true"] .slick-prev,
[data-carousel="true"] .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    /* Reset slick defaults */
    font-size: 0;
    line-height: 0;
    color: transparent;
}

/* Hide slick-theme ::before character — we use SVG */
[data-carousel="true"] .slick-prev::before,
[data-carousel="true"] .slick-next::before {
    display: none !important;
}

/* Sit in the widget-container padding gutter */
[data-carousel="true"] .slick-prev { left: -44px; }
[data-carousel="true"] .slick-next { right: -44px; }

[data-carousel="true"] .slick-prev svg,
[data-carousel="true"] .slick-next svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--color-primary, #fff);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s ease;
    pointer-events: none;
}

[data-carousel="true"] .slick-prev:hover svg,
[data-carousel="true"] .slick-next:hover svg {
    stroke: var(--color-accent, #109DC1);
}

[data-carousel="true"] .slick-prev.slick-disabled svg,
[data-carousel="true"] .slick-next.slick-disabled svg {
    opacity: 0.25;
}

/* ── Dots ────────────────────────────────────────────────────────────────── */

[data-carousel="true"].slick-dotted.slick-slider {
    margin-bottom: var(--space-48, 48px);
}

[data-carousel="true"] ul.slick-dots {
    position: absolute;
    bottom: calc(-1 * var(--space-32, 32px));
    left: 0;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4, 4px);
}

[data-carousel="true"] .slick-dots li {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

[data-carousel="true"] .slick-dots li button {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary, #fff);
    border: none;
    padding: 0;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.2s ease, background 0.2s ease;
}

[data-carousel="true"] .slick-dots li button::before {
    display: none !important;
}

/* Active dot: colour only — same size as inactive */
[data-carousel="true"] .slick-dots li.slick-active button {
    opacity: 1;
    background: var(--color-accent, #109DC1);
}