/**
 * "LOTTE PICKS" ribbon badge.
 * The visual (shape + wordmark + gradient) lives in assets/img/lotte-picks.svg;
 * this file only positions/sizes it over the product image and adds motion.
 *
 * The ribbon hangs from the top edge of the thumbnail. Sizing is fluid via
 * clamp() so it scales across phones, tablets and desktop. Motion is a gentle
 * one-time "drop & settle" on appear plus a small lift on hover — no perpetual
 * animation, so grids full of badges stay calm. All motion is disabled under
 * prefers-reduced-motion.
 */

/* Positioning context — scoped with :has() so ONLY a wrapper that actually
   contains our badge is touched (no side effects elsewhere). */
.product_thumbnail:has(> .lhs-badge),
.woocommerce-product-gallery:has(.lhs-badge) {
    position: relative;
}

.lhs-badge {
    /* Ribbon width. Grows with viewport, clamped to a tidy corner size. */
    --lhs-w: clamp(34px, 5vw, 48px);

    /* Hang from the top-RIGHT corner: clears Goya's onsale/new badge (top-left)
       and the wishlist/quickview actions (bottom). */
    position: absolute;
    top: 0;
    right: 12px;
    z-index: 9;

    display: block;
    width: var(--lhs-w);

    transform-origin: top center; /* pivot like a pinned ribbon */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
    pointer-events: none;
    user-select: none;

    animation: lhs-drop 0.6s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
    transition: transform 0.25s ease, filter 0.25s ease;
    will-change: transform;
}

.lhs-badge__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Periodic light sweep (like the previous badge), clipped to the ribbon shape
   via a CSS mask of the same SVG so it never spills into the transparent
   corners. Sweeps once, then rests for the remainder of the cycle. */
.lhs-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0) 42%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 58%
    );
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 160% 0;

    -webkit-mask: url(../img/lotte-picks.svg) 0 0 / 100% 100% no-repeat;
            mask: url(../img/lotte-picks.svg) 0 0 / 100% 100% no-repeat;

    animation: lhs-sheen 5.5s ease-in-out infinite;
}

/* Main single-product gallery image: a touch larger, hanging from the top-LEFT.
   Goya's single gallery is a transformed carousel, so right-anchoring would
   push the badge off the slide track — left maps to the main image. Goya also
   removes the onsale flash here, so the top-left corner is free.

   Scoped to the gallery (NOT the whole .single-product body) so the loop grids
   on the same page — "related / similar products" — keep the smaller grid size. */
.woocommerce-product-gallery .lhs-badge {
    --lhs-w: clamp(46px, 4vw, 60px);
    right: auto;
    left: 16px;
}

/* Gentle lift when the product card / gallery is hovered. */
.product_thumbnail:hover .lhs-badge,
.woocommerce-product-gallery:hover .lhs-badge {
    transform: translateY(1px) scale(1.06);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.28));
}

/* Drop in from above and swing once to settle, like a ribbon dropping onto a pin. */
@keyframes lhs-drop {
    0% {
        opacity: 0;
        transform: translateY(-12px) rotate(-6deg);
    }
    55% {
        opacity: 1;
        transform: translateY(0) rotate(3.5deg);
    }
    78% {
        transform: rotate(-1.8deg);
    }
    100% {
        transform: translateY(0) rotate(0);
    }
}

/* Sweep quickly across, then rest for the rest of the cycle. */
@keyframes lhs-sheen {
    0% {
        background-position: 160% 0;
    }
    16%,
    100% {
        background-position: -60% 0;
    }
}

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .lhs-badge {
        animation: none;
        transition: none;
    }
    .lhs-badge::after {
        display: none;
    }
    .product_thumbnail:hover .lhs-badge,
    .woocommerce-product-gallery:hover .lhs-badge {
        transform: none;
    }
}