/**
 * Shared secondary navigation for Coding Ants storefront widgets.
 *
 * `View all` remains a link to a destination page; it is deliberately not a
 * primary button or a "load more" control.
 */
:root {
    --ca-carousel-dot-size: 6px;
    --ca-carousel-dot-active-width: 16px;
    --ca-carousel-dot-gap: 4px;
    --ca-carousel-pager-mobile-height: 20px;
    --ca-carousel-pager-mobile-offset: 6px;
    --ca-widget-card-border: #f0f0f0;
    --ca-widget-section-gap: 24px;
    --ca-widget-section-gap-mobile: 16px;
    --ca-widget-card-padding-mobile: 24px;
    --ca-widget-card-padding-inline-mobile: 20px;
}

/*
 * Carousel libraries keep their own markup, but their pagination markers use
 * the same compact visual scale. Component-specific styles may change colour
 * or placement, never the default marker dimensions.
 */
.owl-theme .owl-dots .owl-dot span,
.slick-slider .slick-dots li,
.carousel-indicators [data-bs-target],
.carousel-indicators button,
.snap-marker {
    height: var(--ca-carousel-dot-size, 6px) !important;
    width: var(--ca-carousel-dot-size, 6px) !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.slick-slider .slick-dots li.slick-active,
.carousel-indicators .active,
.snap-marker[aria-current="true"] {
    width: var(--ca-carousel-dot-active-width, 16px) !important;
}

.ca-widget-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 var(--ca-widget-section-gap, 24px);
    text-align: left;
}

.ca-widget-section-title {
    color: var(--ca-color-text-primary, #212529);
    display: block;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 2rem;
    text-transform: uppercase;
}

/*
 * Widget titles have historically used both ca-widget-title and the shared
 * ca-widget-section-title contract. Keep their casing identical while the
 * older templates are migrated to the shared class.
 */
.ca-widget .ca-widget-title {
    text-transform: uppercase;
}

/*
 * Keep every widget heading on the same left alignment.  The action owns its
 * right edge through margin-left:auto, so a title and "View all" still form a
 * split header without relying on a special centred variant or :has().
 */
.ca-widget-section-header--centered,
.ca-widget-section-header--split {
    justify-content: flex-start;
    text-align: left;
}

.ca-widget-section-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
}

.ca-widget-view-all {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 2px 0 6px;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease-out;
}

.ca-widget-view-all::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    content: '';
    transform: scaleX(0.32);
    transform-origin: left center;
    transition: transform 220ms ease-out;
}

.ca-widget-view-all:hover::after,
.ca-widget-view-all:focus-visible::after {
    transform: scaleX(1);
}

.ca-widget-view-all__arrow {
    display: block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    transition: transform 200ms ease-out;
}

.ca-widget-carousel-nav-icon {
    display: block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.ca-widget-view-all:hover .ca-widget-view-all__arrow,
.ca-widget-view-all:focus-visible .ca-widget-view-all__arrow {
    transform: translateX(4px);
}

.ca-widget-view-all:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Carousel navigation belongs to the carousel, not to the section header. */
.ca-widget-carousel-viewport {
    position: relative;
}

.ca-widget-carousel-nav--overlay {
    position: absolute;
    inset: 0 -20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.ca-widget-carousel-nav--overlay button {
    pointer-events: auto;
}

/* Standard-theme widgets use Owl, which injects its controls into the carousel. */
.blog-widget-carousel .ca-blog-carousel.owl-theme,
.codingants-brand-carousel .codingants-brand-carousel__owl.owl-theme,
.ca-widget-carousel--side-nav .owl-carousel.owl-theme {
    position: relative;
}

.blog-widget-carousel .ca-blog-carousel.owl-theme .owl-nav,
.codingants-brand-carousel .codingants-brand-carousel__owl.owl-theme .owl-nav,
.ca-widget-carousel--side-nav .owl-carousel.owl-theme .owl-nav {
    position: absolute;
    top: 50%;
    right: -20px;
    left: -20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}

.blog-widget-carousel .ca-blog-carousel.owl-theme .owl-nav button,
.codingants-brand-carousel .codingants-brand-carousel__owl.owl-theme .owl-nav button,
.ca-widget-carousel--side-nav .owl-carousel.owl-theme .owl-nav button {
    pointer-events: auto;
}

.ca-testimonials-widget .ca-testimonials-carousel-stage .ca-testimonials-nav.ca-widget-carousel-nav--overlay {
    inset: 0 -20px;
}

.ca-widget-carousel-track {
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * The 20px desktop overhang gives wide layouts a clean, edge-to-edge
 * carousel treatment. Below the desktop breakpoint it can escape a narrow
 * page container, so every shared carousel keeps its controls inside the
 * viewport instead.
 */
@media (max-width: 1023px) {
    .ca-widget-section-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .ca-widget-section-header--split {
        flex-wrap: nowrap;
    }

    .ca-widget-section-actions {
        justify-content: flex-start;
        margin-left: auto;
    }

    .ca-widget-carousel-nav--overlay,
    .ca-testimonials-widget .ca-testimonials-carousel-stage .ca-testimonials-nav.ca-widget-carousel-nav--overlay {
        inset-inline: 8px !important;
    }

    .blog-widget-carousel .ca-blog-carousel.owl-theme .owl-nav,
    .codingants-brand-carousel .codingants-brand-carousel__owl.owl-theme .owl-nav,
    .ca-widget-carousel--side-nav .owl-carousel.owl-theme .owl-nav {
        right: 8px;
        left: 8px;
    }
}

/* Every Coding Ants carousel uses swipe + dots on phones. */
@media (max-width: 767px) {
    .cms-home .page-main {
        margin-top: 0 !important;
    }

    .ca-widget-section-header,
    .ca-category-widget__header {
        margin-bottom: var(--ca-widget-section-gap-mobile) !important;
    }

    .ca-service-inner,
    .ca-service-card {
        padding-block: var(--ca-widget-card-padding-mobile) !important;
        padding-inline: var(--ca-widget-card-padding-inline-mobile) !important;
    }

    /* Keep the service-benefit cards compact without changing their desktop hierarchy. */
    .ca-service-widget-wrapper .ca-service-icon,
    .ca-service-block .ca-service-card-icon {
        font-size: 40px !important;
        line-height: 1 !important;
        margin-bottom: 14px !important;
    }

    .ca-service-widget-wrapper .ca-service-title,
    .ca-service-block .ca-service-card-title {
        font-size: 20px !important;
        letter-spacing: 1.2px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .ca-service-widget-wrapper .ca-service-desc,
    .ca-service-block .ca-service-card-description {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    .ca-service-widget-wrapper .ca-service-action {
        margin-top: 0 !important;
    }

    .ca-service-widget-wrapper .ca-service-link,
    .ca-service-block .ca-service-card-link {
        font-size: 12px !important;
        letter-spacing: 0.8px !important;
    }

    /* Only the current banner contributes to the mobile carousel height. */
    .codingants-bannerslider__owl .owl-item:not(.active) .codingants-bannerslider__item,
    .codingants-bannerslider-hyva__slide:not(.active) .codingants-bannerslider-hyva__slide-inner {
        height: 0 !important;
        overflow: hidden;
    }

    .ca-widget-carousel-nav--overlay,
    .ca-category-carousel__controls,
    .ca-widget .owl-carousel.owl-theme > .owl-nav,
    .ca-products-carousel.owl-carousel.owl-theme > .owl-nav,
    .codingants-bannerslider .owl-carousel.owl-theme > .owl-nav,
    .codingants-brand-carousel .owl-carousel.owl-theme > .owl-nav,
    .codingants-countdowntimer-showcase .owl-carousel.owl-theme > .owl-nav,
    .ca-recently-viewed-pdp .owl-carousel.owl-theme > .owl-nav,
    .codingants-bannerslider-hyva__nav,
    .codingants-countdowntimer-showcase__nav,
    .snap-slider [data-prev],
    .snap-slider [data-next],
    .slick-slider .slick-prev,
    .slick-slider .slick-next,
    .carousel-control-prev,
    .carousel-control-next {
        display: none !important;
    }

    .ca-widget .owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .ca-products-carousel.owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .codingants-bannerslider .owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .codingants-brand-carousel .owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .codingants-countdowntimer-showcase .owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .ca-recently-viewed-pdp .owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .slick-slider .slick-dots,
    .carousel-indicators,
    .announcement-bar-dots {
        display: flex !important;
    }

    .ca-widget .owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .ca-products-carousel.owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .codingants-brand-carousel .owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .codingants-countdowntimer-showcase .owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .ca-recently-viewed-pdp .owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .slick-slider .slick-dots,
    .carousel-indicators,
    .ca-category-carousel__pager,
    .announcement-bar-dots {
        align-items: center;
        gap: var(--ca-carousel-dot-gap) !important;
        justify-content: center;
    }

    .ca-widget .owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .ca-products-carousel.owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .codingants-brand-carousel .owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .codingants-countdowntimer-showcase .owl-carousel.owl-theme > .owl-dots:not(.disabled),
    .ca-recently-viewed-pdp .owl-carousel.owl-theme > .owl-dots:not(.disabled) {
        margin-top: var(--ca-carousel-pager-mobile-offset) !important;
        min-height: var(--ca-carousel-pager-mobile-height);
        padding-block: 0;
    }

    .ca-widget .owl-carousel.owl-theme > .owl-dots .owl-dot,
    .ca-products-carousel.owl-carousel.owl-theme > .owl-dots .owl-dot,
    .codingants-bannerslider .owl-carousel.owl-theme > .owl-dots .owl-dot,
    .codingants-brand-carousel .owl-carousel.owl-theme > .owl-dots .owl-dot,
    .codingants-countdowntimer-showcase .owl-carousel.owl-theme > .owl-dots .owl-dot,
    .ca-recently-viewed-pdp .owl-carousel.owl-theme > .owl-dots .owl-dot {
        margin: 0 !important;
        min-height: var(--ca-carousel-pager-mobile-height);
        min-width: 0;
        padding: 0 !important;
    }

    .slick-slider .slick-dots li,
    .carousel-indicators [data-bs-target],
    .carousel-indicators button {
        margin: 0 !important;
    }

    .ca-category-carousel__pager {
        min-height: var(--ca-carousel-pager-mobile-height) !important;
        padding-top: var(--ca-carousel-pager-mobile-offset) !important;
    }

    .announcement-bar-dots {
        margin-top: var(--ca-carousel-pager-mobile-offset) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .owl-theme .owl-dots .owl-dot span,
    .slick-slider .slick-dots li,
    .carousel-indicators [data-bs-target],
    .carousel-indicators button,
    .snap-marker,
    .ca-widget-view-all,
    .ca-widget-view-all::after,
    .ca-widget-view-all__arrow {
        transition: none;
    }
}