/* ==========================================================================
   PERFUMES — se carga DESPUÉS de style.css.
   Usa exactamente el mismo diseño que la página de gorras; aquí solo se
   cambia el FONDO (img/lociones/fondo.png) y se ajusta la loción
   (derecha, sin inclinar, apoyada sobre el podio del fondo).
   ========================================================================== */

:root {
    /* Baja la loción para que quede apoyada sobre el podio del fondo.
       Súbelo o bájalo (en px) si en tu pantalla no calza exacto. */
    --product-shift-y: 40px;
}

/* --- Fondo de perfumes (en lugar de img/fondo-premium.png) --- */
.product-container.perfume-page {
    background-image: url('img/lociones/fondo.png');
}

/* --- Loción: derecha (sin rotar) y apoyada en el podio --- */
.perfume-page .product-display {
    transform: translateY(var(--product-shift-y));
}

.perfume-page .product-display img {
    width: auto;
    height: clamp(220px, 50vh, 440px);
    max-width: 60vw;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(255, 255, 255, 0.8));
}

/* Título con la tipografía elegante que ya tenías en perfumes */
.perfume-page .info-box h2 {
    font-family: 'Playfair Display', serif;
    letter-spacing: 2px;
}

.coming-soon {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-align: center;
}

/* Espacios del catálogo que todavía no tienen perfume */
.catalog-card.soon {
    opacity: 0.55;
}

.catalog-card.soon:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.08);
}

.catalog-card.soon .catalog-card-img {
    cursor: default;
}

.soon-mark {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    color: rgba(255, 255, 255, 0.25);
}

.catalog-buy-btn:disabled {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

/* ============ MÓVIL ============ */
@media (max-width: 600px) {
    :root {
        --product-shift-y: 0px;
    }

    .perfume-page .product-display {
        transform: none;
        margin-bottom: 15px;
    }

    .perfume-page .product-display img {
        height: clamp(200px, 32vh, 300px);
        max-width: 70vw;
    }
}