/* =====================================================
   Neol Parfums — estilos personalizados
   ===================================================== */

:root {
    /* Canales RGB (sin "rgb()") para que Tailwind aplique opacidades y para
       poder sobre-escribirlos en caliente desde el panel de administración. */
    --c-gold:      184 149 106;
    --c-gold-dark: 138 109 71;
    --c-ivory:     250 248 245;
    --c-onyx:      13 13 13;
    --c-graphite:  26 26 26;

    /* Colores derivados usados por el CSS de este archivo. */
    --gold:      rgb(var(--c-gold));
    --gold-dark: rgb(var(--c-gold-dark));
    --ivory:     rgb(var(--c-ivory));
    --onyx:      rgb(var(--c-onyx));
    --graphite:  rgb(var(--c-graphite));
}

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; }

.font-display { font-family: 'Cormorant Garamond', Georgia, serif; }

/* --- Botones dorados --- */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    color: var(--ivory);
    padding: .75rem 1.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 500;
    border: 1px solid var(--gold);
    transition: all .3s ease;
    cursor: pointer;
}
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--ivory);
    padding: .75rem 1.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: .8rem;
    border: 1px solid var(--ivory);
    transition: all .3s ease;
    cursor: pointer;
}
.btn-ghost:hover { background: var(--ivory); color: var(--onyx); }

.btn-outline-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--onyx);
    padding: .65rem 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: .75rem;
    border: 1px solid var(--onyx);
    transition: all .3s ease;
    cursor: pointer;
}
.btn-outline-dark:hover { background: var(--onyx); color: var(--ivory); }

/* --- Título con línea dorada --- */
.title-line { position: relative; display: inline-block; padding-bottom: 1rem; }
.title-line::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--gold);
}

/* --- Card de producto --- */
.product-card {
    background: #fff;
    transition: transform .5s ease, box-shadow .5s ease;
    overflow: hidden;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}
.product-card .cover {
    aspect-ratio: 4/5;
    background: linear-gradient(160deg, #f2ede4 0%, #e8dcc8 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.product-card .cover img,
.product-card .cover svg {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .8s ease;
}
.product-card:hover .cover img,
.product-card:hover .cover svg { transform: scale(1.06); }

/* --- Cart drawer --- */
.drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    z-index: 60; animation: fadeIn .3s ease;
}
.drawer {
    position: fixed; top: 0; right: 0; height: 100vh;
    width: 100%; max-width: 440px; background: var(--ivory);
    z-index: 61; box-shadow: -20px 0 40px rgba(0,0,0,.15);
    animation: slideIn .3s ease;
    display: flex; flex-direction: column;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideIn { from { transform: translateX(100%) } to { transform: translateX(0) } }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px) }
    to   { opacity: 1; transform: translateY(0) }
}
.fade-in-up { animation: fadeInUp .6s ease both; }

/* --- Modal --- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.6);
    z-index: 70; display: flex; align-items: center; justify-content: center;
    padding: 1rem; animation: fadeIn .3s ease;
}
.modal-body {
    background: var(--ivory); width: 100%; max-width: 720px;
    max-height: 90vh; overflow-y: auto;
    animation: fadeInUp .4s ease;
}

/* --- Toast --- */
.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--onyx); color: var(--ivory);
    padding: .9rem 1.5rem; z-index: 90;
    box-shadow: 0 10px 30px rgba(0,0,0,.2); letter-spacing: 1px;
    font-size: .85rem; animation: fadeInUp .3s ease;
}
.toast.success { background: #2f7d4f; }
.toast.error   { background: #a83232; }

/* --- Placeholder SVG frascos --- */
.bottle-svg { width: 60%; height: 80%; }

/* --- Scrollbar sutil --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d5c8b0; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* --- Utils --- */
.max-w-container { max-width: 1280px; margin: 0 auto; }