/* ───────────── Meus Presentes 3D — Storefront ───────────── */
:root {
    --mp-plum: #4a1d4f;
    --mp-plum-2: #6d2a72;
    --mp-rose: #e8669a;
    --mp-rose-soft: #f7d6e4;
    --mp-gold: #c8973f;
    --mp-gold-light: #e7c989;
    --mp-ink: #2c2230;
    --mp-muted: #7a6d80;
    --mp-bg: #fdfbfc;
    --mp-card: #ffffff;
    --mp-line: #efe7ef;
    --mp-success: #1f9d63;
    --mp-radius: 16px;
    --mp-shadow: 0 10px 30px rgba(74, 29, 79, 0.08);
    --mp-shadow-hover: 0 18px 44px rgba(74, 29, 79, 0.16);
    --mp-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body {
    font-family: var(--mp-font);
    color: var(--mp-ink);
    background: var(--mp-bg);
    margin: 0;
    line-height: 1.6;
}
a { color: var(--mp-plum-2); text-decoration: none; }
a:hover { color: var(--mp-rose); }
img { max-width: 100%; }

/* Announcement bar */
.mp-announce {
    background: linear-gradient(90deg, var(--mp-plum), var(--mp-plum-2));
    color: #fff;
    text-align: center;
    font-size: .85rem;
    letter-spacing: .3px;
    padding: .55rem 1rem;
}

/* Header */
.mp-header {
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--mp-line);
    position: sticky; top: 0; z-index: 1030;
}
.mp-header .navbar-brand { font-weight: 700; font-size: 1.35rem; color: var(--mp-plum); letter-spacing: -.5px; }
.mp-header .navbar-brand span { color: var(--mp-rose); }
.mp-header .navbar-nav { gap: .9rem; }
.mp-header .nav-link { color: var(--mp-ink); font-weight: 500; font-size: .95rem; padding-left: .85rem; padding-right: .85rem; }
.mp-header .nav-link:hover { color: var(--mp-rose); }
@media (max-width: 991px) {
    .mp-header .navbar-nav { gap: .2rem; }
    .mp-header .nav-link { padding-left: .5rem; padding-right: .5rem; }
}
.mp-icon-btn {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--mp-plum); background: transparent; border: none; position: relative;
    transition: background .2s;
}
.mp-icon-btn:hover { background: var(--mp-rose-soft); color: var(--mp-plum); }
.mp-cart-badge {
    position: absolute; top: 2px; right: 2px;
    background: var(--mp-rose); color: #fff; border-radius: 999px;
    font-size: .65rem; min-width: 18px; height: 18px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center; font-weight: 600;
}

/* Buttons */
.btn-mp {
    background: linear-gradient(95deg, var(--mp-plum), var(--mp-plum-2));
    color: #fff; border: none; border-radius: 999px;
    padding: .7rem 1.6rem; font-weight: 600; letter-spacing: .2px;
    box-shadow: 0 8px 20px rgba(74,29,79,.22); transition: transform .15s, box-shadow .15s;
}
.btn-mp:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(74,29,79,.3); }
.btn-mp-rose { background: linear-gradient(95deg, var(--mp-rose), #d8568b); box-shadow: 0 8px 20px rgba(232,102,154,.3); }
.btn-mp-outline {
    background: transparent; color: var(--mp-plum); border: 1.5px solid var(--mp-plum);
    border-radius: 999px; padding: .65rem 1.4rem; font-weight: 600; transition: all .15s;
}
.btn-mp-outline:hover { background: var(--mp-plum); color: #fff; }

/* Hero */
.mp-hero {
    background: radial-gradient(120% 120% at 80% 0%, var(--mp-rose-soft) 0%, #fff 45%),
                linear-gradient(180deg, #fff 0%, var(--mp-bg) 100%);
    padding: 4rem 0 3rem;
    overflow: hidden;
}
.mp-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; line-height: 1.1; color: var(--mp-plum); }
.mp-hero h1 em { font-style: normal; color: var(--mp-rose); }
.mp-hero p { color: var(--mp-muted); font-size: 1.1rem; max-width: 30rem; }
.mp-hero-card {
    border-radius: 24px; box-shadow: var(--mp-shadow-hover); overflow: hidden;
    background: #fff; transform: rotate(-1.5deg);
}
.mp-badge-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; border: 1px solid var(--mp-line); border-radius: 999px;
    padding: .4rem .9rem; font-size: .82rem; font-weight: 500; color: var(--mp-plum);
    box-shadow: var(--mp-shadow);
}

/* Section heading */
.mp-section { padding: 3.5rem 0; }
.mp-section-title { text-align: center; margin-bottom: 2.2rem; }
.mp-section-title h2 { font-weight: 700; color: var(--mp-plum); font-size: 1.9rem; }
.mp-section-title p { color: var(--mp-muted); }
.mp-section-title::after {
    content: ''; display: block; width: 64px; height: 4px; margin: .8rem auto 0;
    background: linear-gradient(90deg, var(--mp-rose), var(--mp-gold)); border-radius: 999px;
}

/* Product card */
.mp-card {
    background: var(--mp-card); border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius); overflow: hidden; height: 100%;
    display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s;
    position: relative;
}
.mp-card:hover { transform: translateY(-6px); box-shadow: var(--mp-shadow-hover); }
.mp-card-media { position: relative; aspect-ratio: 1/1; background: #f6f1f6; overflow: hidden; }
.mp-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mp-card:hover .mp-card-media img { transform: scale(1.05); }
.mp-card-tag {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: var(--mp-plum); color: #fff; font-size: .7rem; font-weight: 600;
    padding: .25rem .6rem; border-radius: 999px; letter-spacing: .3px;
}
.mp-card-tag.free { background: var(--mp-success); }
.mp-card-off {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    background: var(--mp-rose); color: #fff; font-size: .72rem; font-weight: 700;
    padding: .25rem .55rem; border-radius: 8px;
}
.mp-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.mp-card-title { font-size: .98rem; font-weight: 600; color: var(--mp-ink); margin: 0 0 .5rem; line-height: 1.35; }
.mp-card-title a { color: inherit; }
.mp-price-now { font-size: 1.25rem; font-weight: 700; color: var(--mp-plum); }
.mp-price-old { font-size: .85rem; color: var(--mp-muted); text-decoration: line-through; margin-left: .35rem; }
.mp-price-install { font-size: .78rem; color: var(--mp-muted); }
.mp-swatches { display: flex; gap: .3rem; margin: .55rem 0; }
.mp-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--mp-line); }
.mp-card-actions { margin-top: auto; padding-top: .8rem; }

/* Product detail */
.mp-gallery-main { border-radius: var(--mp-radius); overflow: hidden; border: 1px solid var(--mp-line); background: #f6f1f6; aspect-ratio: 1/1; }
.mp-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.mp-thumb { border-radius: 12px; overflow: hidden; border: 2px solid transparent; cursor: pointer; aspect-ratio: 1/1; background: #f6f1f6; }
.mp-thumb.active, .mp-thumb:hover { border-color: var(--mp-rose); }
.mp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mp-detail h1 { font-size: 1.7rem; font-weight: 700; color: var(--mp-plum); }
.mp-detail-price { font-size: 2rem; font-weight: 700; color: var(--mp-plum); }
.mp-option-group { margin-bottom: 1.1rem; }
.mp-option-group > label { font-weight: 600; font-size: .9rem; display: block; margin-bottom: .5rem; }
.mp-swatch-btn {
    width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff;
    box-shadow: 0 0 0 1.5px var(--mp-line); cursor: pointer; transition: transform .12s;
}
.mp-swatch-btn.selected { box-shadow: 0 0 0 2px var(--mp-rose); transform: scale(1.08); }
.mp-pill-btn {
    border: 1.5px solid var(--mp-line); background: #fff; border-radius: 999px;
    padding: .4rem 1rem; font-size: .88rem; cursor: pointer; transition: all .12s;
}
.mp-pill-btn.selected { border-color: var(--mp-plum); background: var(--mp-plum); color: #fff; }
.mp-trust { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.2rem; }
.mp-trust span { font-size: .82rem; color: var(--mp-muted); display: inline-flex; align-items: center; gap: .35rem; }

/* Qty */
.mp-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--mp-line); border-radius: 999px; overflow: hidden; }
.mp-qty button { border: none; background: #fff; width: 38px; height: 42px; font-size: 1.2rem; color: var(--mp-plum); cursor: pointer; }
.mp-qty input { border: none; width: 46px; text-align: center; font-weight: 600; }

/* Forms */
.form-control, .form-select { border-radius: 12px; border: 1.5px solid var(--mp-line); padding: .65rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--mp-rose); box-shadow: 0 0 0 .2rem rgba(232,102,154,.15); }

/* Footer */
.mp-footer { background: var(--mp-plum); color: #e9dcec; padding: 3rem 0 1.5rem; margin-top: 3rem; }
.mp-footer h5 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.mp-footer a { color: #e9dcec; font-size: .9rem; display: block; padding: .2rem 0; }
.mp-footer a:hover { color: var(--mp-gold-light); }
.mp-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.2rem; font-size: .82rem; color: #c9b6cd; }

/* Cart */
.mp-cart-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--mp-line); }
.mp-cart-thumb { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: #f6f1f6; }
.mp-summary { background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-radius); padding: 1.4rem; box-shadow: var(--mp-shadow); }

/* Breadcrumb */
.mp-breadcrumb { font-size: .82rem; color: var(--mp-muted); padding: 1rem 0; }
.mp-breadcrumb a { color: var(--mp-muted); }

/* Empty state */
.mp-empty { text-align: center; padding: 4rem 1rem; color: var(--mp-muted); }

/* Toast */
.mp-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 2000;
    background: var(--mp-plum); color: #fff; padding: .9rem 1.3rem; border-radius: 12px;
    box-shadow: var(--mp-shadow-hover); opacity: 0; transform: translateY(20px);
    transition: all .3s; max-width: 340px;
}
.mp-toast.show { opacity: 1; transform: translateY(0); }
.mp-toast.error { background: #b3324c; }

@media (max-width: 768px) {
    .mp-hero { padding: 2.5rem 0; }
    .mp-hero-card { transform: none; margin-top: 1.5rem; }
}