:root {
    --product-bg: #2d3277;
    --product-accent: #f2a7b5;
}

body {
    background-color: var(--product-bg);
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.navbar {
    background-color: rgba(45, 50, 119, 0.95) !important;
}

.btn-sakura {
    background-color: var(--product-accent);
    border: 0;
    border-radius: 25px;
    color: var(--product-bg);
    font-weight: 700;
    padding: 10px 30px;
    transition: background-color 180ms ease, transform 180ms ease;
}

.btn-sakura:hover {
    background-color: #fff;
    color: var(--product-bg);
    transform: translateY(-1px);
}

.miniatura-producto {
    background: #fff;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    line-height: 0;
    padding: 0;
    transition: border-color 180ms ease, transform 180ms ease;
}

.miniatura-producto:hover,
.miniatura-producto:focus-visible,
.miniatura-producto.activa {
    border-color: var(--product-bg);
    transform: translateY(-2px);
}

.miniatura-producto img {
    height: 80px;
    object-fit: cover;
    width: 80px;
}

.descuento-detalle {
    background: linear-gradient(135deg, #d63384, #8a5a00);
    color: #fff;
    font-size: 1rem;
    z-index: 2;
}

.product-detail-skeleton {
    background: #f8f9fa;
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(8, 11, 55, 0.24);
    min-height: 560px;
    overflow: hidden;
    padding: 3rem;
}

.product-skeleton-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.product-skeleton-media,
.product-skeleton-line,
.product-skeleton-panel {
    background: #e2e5eb;
    border-radius: 0.75rem;
}

.product-skeleton-media {
    aspect-ratio: 1 / 1;
    min-height: 400px;
}

.product-skeleton-copy {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    justify-content: center;
}

.product-skeleton-line {
    height: 1.2rem;
    width: 100%;
}

.product-skeleton-line--short { width: 38%; }
.product-skeleton-line--title { height: 3.6rem; width: 88%; }
.product-skeleton-line--price { height: 2.5rem; width: 42%; }
.product-skeleton-panel { height: 180px; }

.skeleton-shimmer {
    background-image: linear-gradient(100deg, #e1e4ea 25%, #f7f8fa 42%, #e1e4ea 59%);
    background-size: 220% 100%;
    animation: product-skeleton-shimmer 1.25s ease-in-out infinite;
}

.product-detail-assembly .detail-piece {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
}

.product-detail-assembly.is-ready .detail-piece {
    animation: product-piece-assemble 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.product-detail-assembly.is-ready .detail-piece--2 { animation-delay: 55ms; }
.product-detail-assembly.is-ready .detail-piece--3 { animation-delay: 110ms; }
.product-detail-assembly.is-ready .detail-piece--4 { animation-delay: 165ms; }
.product-detail-assembly.is-ready .detail-piece--5 { animation-delay: 220ms; }
.product-detail-assembly.is-ready .detail-piece--6 { animation-delay: 275ms; }
.product-detail-assembly.is-ready .detail-piece--7 { animation-delay: 330ms; }
.product-detail-assembly.is-ready .detail-piece--8 { animation-delay: 385ms; }

.progressive-product-image {
    filter: blur(8px);
    opacity: 0.22;
    transform: scale(0.985);
    transition: filter 320ms ease, opacity 320ms ease, transform 320ms ease;
}

.progressive-product-image.is-loaded {
    filter: none;
    opacity: 1;
    transform: none;
}

@keyframes product-skeleton-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -120% 0; }
}

@keyframes product-piece-assemble {
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .product-detail-skeleton {
        min-height: 680px;
        padding: 1.25rem;
    }

    .product-skeleton-grid {
        grid-template-columns: 1fr;
    }

    .product-skeleton-media {
        min-height: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-sakura,
    .miniatura-producto,
    .progressive-product-image {
        transition: none;
    }

    .skeleton-shimmer {
        animation: none;
    }

    .product-detail-assembly .detail-piece,
    .product-detail-assembly.is-ready .detail-piece {
        animation: none;
        opacity: 1;
        transform: none;
    }
}