/* KOSMOSTORE UNIFIED INTERACTIONS START */

:root {
    --kosmo-interaction-accent: #ef493f;
    --kosmo-interaction-duration: 0.22s;
}

/*
 * JavaScript adds this class only to enabled interactive elements.
 * Their original visual state is stored in custom properties before
 * the class is attached, so legacy hover rules cannot change the
 * background, colour, shadow or position.
 */
.kosmo-unified-interaction--positioned {
    position: relative !important;
}

.kosmo-unified-interaction__line {
    position: absolute !important;
    z-index: 2147483647 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 2px !important;
    min-height: 2px !important;
    max-height: 2px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--kosmo-interaction-accent),
            transparent
        ) !important;

    box-shadow: none !important;
    content: "" !important;
    opacity: 0;
    overflow: hidden !important;
    pointer-events: none !important;

    transform: scaleX(0.45);
    transform-origin: center;

    transition:
        opacity var(--kosmo-interaction-duration) ease,
        transform var(--kosmo-interaction-duration) ease !important;
}

.kosmo-unified-interaction__line::before,
.kosmo-unified-interaction__line::after {
    display: none !important;
    content: none !important;
}

/*
 * Restore the state captured before hover/focus. This neutralises the
 * collection of old lift, recolour, brightness and shadow effects.
 *
 * The never-matching ID inside :is() deliberately gives this final layer
 * enough specificity to beat older page rules that also use !important.
 * The class branch is the one that actually matches the element.
 */
:is(
    #kosmo-unified-interaction-priority,
    .kosmo-unified-interaction
):focus-visible,
:is(
    #kosmo-unified-interaction-priority,
    .kosmo-unified-interaction
):focus-within,
:is(
    #kosmo-unified-interaction-priority,
    .kosmo-unified-interaction
):active {
    color:
        var(--kosmo-interaction-base-color) !important;
    -webkit-text-fill-color:
        currentColor !important;

    border-top-color:
        var(--kosmo-interaction-base-border-top) !important;
    border-right-color:
        var(--kosmo-interaction-base-border-right) !important;
    border-bottom-color:
        var(--kosmo-interaction-base-border-bottom) !important;
    border-left-color:
        var(--kosmo-interaction-base-border-left) !important;

    background-color:
        var(--kosmo-interaction-base-background-color) !important;
    background-image:
        var(--kosmo-interaction-base-background-image) !important;
    background-position:
        var(--kosmo-interaction-base-background-position) !important;
    background-size:
        var(--kosmo-interaction-base-background-size) !important;
    background-repeat:
        var(--kosmo-interaction-base-background-repeat) !important;
    background-origin:
        var(--kosmo-interaction-base-background-origin) !important;
    background-clip:
        var(--kosmo-interaction-base-background-clip) !important;
    background-attachment:
        var(--kosmo-interaction-base-background-attachment) !important;

    box-shadow:
        var(--kosmo-interaction-base-shadow) !important;

    filter:
        var(--kosmo-interaction-base-filter) !important;
    opacity:
        var(--kosmo-interaction-base-opacity) !important;
    transform:
        var(--kosmo-interaction-base-transform) !important;

    text-decoration-color:
        var(--kosmo-interaction-base-decoration-color) !important;
}

@media (hover: hover) and (pointer: fine) {
    :is(
        #kosmo-unified-interaction-priority,
        .kosmo-unified-interaction
    ):hover {
        color:
            var(--kosmo-interaction-base-color) !important;
        -webkit-text-fill-color:
            currentColor !important;

        border-top-color:
            var(--kosmo-interaction-base-border-top) !important;
        border-right-color:
            var(--kosmo-interaction-base-border-right) !important;
        border-bottom-color:
            var(--kosmo-interaction-base-border-bottom) !important;
        border-left-color:
            var(--kosmo-interaction-base-border-left) !important;

        background-color:
            var(--kosmo-interaction-base-background-color) !important;
        background-image:
            var(--kosmo-interaction-base-background-image) !important;
        background-position:
            var(--kosmo-interaction-base-background-position) !important;
        background-size:
            var(--kosmo-interaction-base-background-size) !important;
        background-repeat:
            var(--kosmo-interaction-base-background-repeat) !important;
        background-origin:
            var(--kosmo-interaction-base-background-origin) !important;
        background-clip:
            var(--kosmo-interaction-base-background-clip) !important;
        background-attachment:
            var(--kosmo-interaction-base-background-attachment) !important;

        box-shadow:
            var(--kosmo-interaction-base-shadow) !important;

        filter:
            var(--kosmo-interaction-base-filter) !important;
        opacity:
            var(--kosmo-interaction-base-opacity) !important;
        transform:
            var(--kosmo-interaction-base-transform) !important;

        text-decoration-color:
            var(--kosmo-interaction-base-decoration-color) !important;
    }

    .kosmo-unified-interaction:hover
    > .kosmo-unified-interaction__line {
        opacity: 1;
        transform: scaleX(1);
    }
}

.kosmo-unified-interaction:focus-visible
> .kosmo-unified-interaction__line,
.kosmo-unified-interaction:focus-within
> .kosmo-unified-interaction__line,
.kosmo-unified-interaction:active
> .kosmo-unified-interaction__line {
    opacity: 1;
    transform: scaleX(1);
}

/*
 * When an interactive control sits inside an interactive card, show
 * one line only: the innermost active target wins.
 */
.kosmo-unified-interaction:has(
    .kosmo-unified-interaction:hover
)
> .kosmo-unified-interaction__line,
.kosmo-unified-interaction:has(
    .kosmo-unified-interaction:focus-visible
)
> .kosmo-unified-interaction__line,
.kosmo-unified-interaction:has(
    .kosmo-unified-interaction:focus-within
)
> .kosmo-unified-interaction__line,
.kosmo-unified-interaction:has(
    .kosmo-unified-interaction:active
)
> .kosmo-unified-interaction__line {
    opacity: 0;
    transform: scaleX(0.45);
}

/*
 * Older page rules sometimes recolour a title, label or SVG child when
 * the surrounding card is hovered. JavaScript captures the real resting
 * values for every descendant; this layer restores those exact values.
 */
:is(
    #kosmo-unified-interaction-priority,
    .kosmo-unified-interaction
):is(
    :hover,
    :focus-visible,
    :focus-within,
    :active
) :is(
    #kosmo-unified-interaction-priority,
    .kosmo-unified-interaction__visual-lock
) {
    color:
        var(--kosmo-interaction-lock-color) !important;
    -webkit-text-fill-color:
        currentColor !important;
    fill:
        var(--kosmo-interaction-lock-fill) !important;
    stroke:
        var(--kosmo-interaction-lock-stroke) !important;
    filter:
        var(--kosmo-interaction-lock-filter) !important;
    opacity:
        var(--kosmo-interaction-lock-opacity) !important;
    transform:
        var(--kosmo-interaction-lock-transform) !important;
    text-decoration-color:
        var(
            --kosmo-interaction-lock-decoration-color
        ) !important;
}

:is(
    #kosmo-unified-interaction-priority,
    .kosmo-unified-interaction
):is(
    :hover,
    :focus-visible,
    :focus-within,
    :active
) :is(
    #kosmo-unified-interaction-priority,
    .kosmo-unified-interaction__visual-lock
)::before,
:is(
    #kosmo-unified-interaction-priority,
    .kosmo-unified-interaction
):is(
    :hover,
    :focus-visible,
    :focus-within,
    :active
) :is(
    #kosmo-unified-interaction-priority,
    .kosmo-unified-interaction__visual-lock
)::after {
    color:
        var(--kosmo-interaction-lock-color) !important;
    -webkit-text-fill-color:
        currentColor !important;
    fill:
        var(--kosmo-interaction-lock-fill) !important;
    stroke:
        var(--kosmo-interaction-lock-stroke) !important;
}

/*
 * Full cards keep the common underline and regain a restrained lift.
 * Compact controls, cart buttons and favourite buttons remain still.
 */
@media (hover: hover) and (pointer: fine) {
    :is(
        #kosmo-unified-interaction-priority,
        .kosmo-unified-interaction
    ).kosmo-unified-interaction--card:hover {
        transform:
            translateY(-3px) !important;
    }
}

/*
 * A consistent keyboard focus ring remains visible in addition to the
 * line. It is intentionally not used for pointer hover.
 */
:is(
    #kosmo-unified-interaction-priority,
    .kosmo-unified-interaction
):focus-visible {
    outline:
        3px solid
        rgba(239, 73, 63, 0.42) !important;
    outline-offset: 3px !important;
}

/*
 * Void submit controls cannot contain the line span. They receive the
 * same two-pixel accent as an inset layer.
 */
.kosmo-unified-interaction--void {
    box-shadow:
        var(--kosmo-interaction-base-shadow-layer) !important;
    transition:
        box-shadow var(--kosmo-interaction-duration) ease !important;
}

:is(
    #kosmo-unified-interaction-priority,
    .kosmo-unified-interaction--void
):focus-visible,
:is(
    #kosmo-unified-interaction-priority,
    .kosmo-unified-interaction--void
):active {
    box-shadow:
        var(--kosmo-interaction-base-shadow-layer),
        inset 0 -2px 0
        var(--kosmo-interaction-accent) !important;
}

@media (hover: hover) and (pointer: fine) {
    :is(
        #kosmo-unified-interaction-priority,
        .kosmo-unified-interaction--void
    ):hover {
        box-shadow:
            var(--kosmo-interaction-base-shadow-layer),
            inset 0 -2px 0
            var(--kosmo-interaction-accent) !important;
    }
}

/*
 * The reference subcategory line and the old navigation underline are
 * replaced by the common physical span, preventing a double line.
 */
.category-child-card::after,
.nav a::after {
    display: none !important;
    content: none !important;
}

/*
 * Two legacy effects live on descendants rather than on the target
 * itself. Neutralise them explicitly so cards do not animate internally
 * after their outer hover has been unified.
 */
.product-card.kosmo-unified-interaction:hover
.product-card__media
.product-fallback-image img,
.product-card.kosmo-unified-interaction:focus-within
.product-card__media
.product-fallback-image img,
.product-card.kosmo-unified-interaction:active
.product-card__media
.product-fallback-image img {
    filter:
        saturate(0.86)
        contrast(0.96)
        brightness(0.82) !important;
    transform: scale(0.92) !important;
}

.category-child-card.kosmo-unified-interaction:hover
.category-child-card__action > span,
.category-child-card.kosmo-unified-interaction:focus-visible
.category-child-card__action > span,
.category-child-card.kosmo-unified-interaction:active
.category-child-card__action > span {
    transform: none !important;
}

@media (max-width: 700px) {
    .product-card.kosmo-unified-interaction:hover
    .product-card__media
    .product-fallback-image img,
    .product-card.kosmo-unified-interaction:focus-within
    .product-card__media
    .product-fallback-image img,
    .product-card.kosmo-unified-interaction:active
    .product-card__media
    .product-fallback-image img {
        transform: scale(0.90) !important;
    }
}

.kosmo-unified-interaction[disabled]
> .kosmo-unified-interaction__line,
.kosmo-unified-interaction[aria-disabled="true"]
> .kosmo-unified-interaction__line,
.kosmo-unified-interaction.is-disabled
> .kosmo-unified-interaction__line {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .kosmo-unified-interaction__line,
    .kosmo-unified-interaction--void,
    .kosmo-unified-interaction--card {
        transition: none !important;
    }
}

/* KOSMOSTORE UNIFIED INTERACTIONS END */