/* WEB-UI Video Preview Categories – layout fix v2
   Goal: video preview must never disturb the original stock badge/card layout. */
.category-card.category-video-ready {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Keep the original decorative card layers behind the video. */
.category-card.category-video-ready::before,
.category-card.category-video-ready::after {
    z-index: 0;
}

.category-video-media,
.category-video-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .28s ease;
}

.category-video-media {
    z-index: 1;
    object-fit: cover;
    object-position: var(--category-video-position, center center);
    transform: scale(1.015);
}

.category-video-overlay {
    z-index: 2;
    /* Stronger at the bottom so only the essential text remains readable. */
    background:
        linear-gradient(180deg,
            rgba(0,0,0,.12) 0%,
            rgba(0,0,0,.24) 34%,
            rgba(0,0,0,.62) 67%,
            rgba(0,0,0,.88) 100%);
}

.category-card.category-video-ready.is-video-active .category-video-media,
.category-card.category-video-ready.is-video-active .category-video-overlay {
    opacity: 1;
}

/* IMPORTANT: do not change position:absolute/relative of existing stock badges.
   The previous version did this and pushed the badge into the title. */
.category-card.category-video-ready .category-icon,
.category-card.category-video-ready h3,
.category-card.category-video-ready p,
.category-card.category-video-ready .category-link,
.category-card.category-video-ready .category-card-link,
.category-card.category-video-ready .category-action {
    position: relative;
    z-index: 3;
}

.category-card.category-video-ready .category-stock-badge,
.category-card.category-video-ready [class*="stock"],
.category-card.category-video-ready [class*="availability"] {
    z-index: 5 !important;
}

/* Clean hover state: show only category name + CTA over the moving image. */
.category-card.category-video-ready.is-video-active .category-icon {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.category-card.category-video-ready.is-video-active p {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.category-card.category-video-ready.is-video-active h3 {
    position: absolute;
    right: 28px;
    bottom: 68px;
    left: 28px;
    z-index: 4;
    margin: 0;
    color: #fff !important;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.08;
    text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.category-card.category-video-ready.is-video-active .category-link,
.category-card.category-video-ready.is-video-active .category-card-link,
.category-card.category-video-ready.is-video-active .category-action {
    position: absolute;
    bottom: 27px;
    left: 28px;
    z-index: 4;
    margin: 0;
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.category-card.category-video-ready.is-video-active .category-link svg,
.category-card.category-video-ready.is-video-active .category-card-link svg,
.category-card.category-video-ready.is-video-active .category-action svg {
    color: #ffc400 !important;
    stroke: currentColor;
}

/* In case a card does not have a dedicated CTA class, keep the title readable
   but do not move random links/buttons. */
.category-card.category-video-ready.is-video-active h3,
.category-card.category-video-ready.is-video-active .category-icon,
.category-card.category-video-ready.is-video-active .category-icon svg {
    color: #fff !important;
    stroke: currentColor;
}

.category-video-mobile-toggle {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 7;
    display: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 50%;
    color: #111;
    background: #ffc400;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.category-video-mobile-toggle[aria-pressed="true"] {
    color: #ffc400;
    background: #111;
}

@media (hover: none), (pointer: coarse) {
    .category-video-mobile-toggle { display: grid; }
}

@media (max-width: 700px) {
    .category-card.category-video-ready.is-video-active h3 {
        right: 20px;
        bottom: 62px;
        left: 20px;
    }
    .category-card.category-video-ready.is-video-active .category-link,
    .category-card.category-video-ready.is-video-active .category-card-link,
    .category-card.category-video-ready.is-video-active .category-action {
        bottom: 22px;
        left: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .category-video-media,
    .category-video-overlay { transition: none; }
}