/* ==========================================================================
   Home-page product cards - 3D flip (Genially-style)
   Front is the artwork; hover/focus rotates the card to reveal the title,
   description and price on the back.
   ========================================================================== */

/* ---- Scene ---------------------------------------------------------------
   perspective must live on the parent, not on the rotating element.
   Border/shadow/overflow move off the <a> and onto the two faces so the
   card is not clipped mid-rotation. */
.product.product-flip {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    perspective: 1000px;
    overflow: visible;
    border: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product.product-flip:hover,
.product.product-flip:focus-visible {
    transform: scale(1.02);
    box-shadow: none;
}

/* ---- Rotating body ------------------------------------------------------ */
.product-flip__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    /* easeOutQuint - snappy, then settles */
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.product-flip:hover .product-flip__inner,
.product-flip:focus-within .product-flip__inner {
    transform: rotateY(180deg);
}

/* ---- Faces -------------------------------------------------------------- */
.product-flip__face {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.product-flip__back {
    /* translateZ(1px) lifts the back off the front to avoid z-fighting */
    transform: rotateY(180deg) translateZ(1px);
    display: flex;
    flex-direction: column;
    padding: var(--space-5, 1.25rem);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--primary-rgb), 0.25);
}

/* Front artwork fills its face; kill the existing zoom-on-hover so it does
   not fight the rotation. */
.product-flip__front .product__media {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.product-flip:hover .product__media img {
    transform: none;
}

/* ---- Back content ------------------------------------------------------- */
.product-flip__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-flip__desc {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    flex: 1;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-flip__foot {
    margin-top: auto;
    padding-top: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.product-flip__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.product-flip__price-now {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
}

.product-flip__price-free {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--success-color, #16a34a);
}

.product-flip__price-was {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-decoration: line-through;
    white-space: nowrap;
}

.product-flip__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

html[dir="rtl"] .product-flip__cta .bi {
    transform: scaleX(-1);
}

/* ---- Touch fallback ------------------------------------------------------
   No hover on touch devices, so the flip would never fire. Show the title
   and price as an overlay on the artwork instead, and tap goes straight
   through to the product page. */
.product-flip__peek {
    display: none;
}

@media (hover: none) {
    .product-flip__inner {
        transform: none !important;
    }

    .product-flip__peek {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        position: absolute;
        inset: auto 0 0 0;
        padding: var(--space-3);
        color: #fff;
        background: linear-gradient(to top,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.45) 60%,
            rgba(0, 0, 0, 0) 100%);
    }

    .product-flip__peek-title {
        font-size: var(--font-size-sm);
        font-weight: 600;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-flip__peek .product-flip__price-now,
    .product-flip__peek .product-flip__price-free {
        font-size: var(--font-size-base, 1rem);
        color: #fff;
    }

    .product-flip__peek .product-flip__price-was {
        color: rgba(255, 255, 255, 0.75);
    }

    .product.product-flip:hover {
        transform: none;
    }
}

/* ---- Reduced motion ------------------------------------------------------
   No rotation; cross-fade the back in instead so the price is still
   reachable. */
@media (prefers-reduced-motion: reduce) {
    .product.product-flip,
    .product-flip__inner {
        transition: none;
    }

    .product.product-flip:hover,
    .product.product-flip:focus-visible {
        transform: none;
    }

    .product-flip:hover .product-flip__inner,
    .product-flip:focus-within .product-flip__inner {
        transform: none;
    }

    .product-flip__back {
        transform: none;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .product-flip:hover .product-flip__back,
    .product-flip:focus-within .product-flip__back {
        opacity: 1;
    }
}