/* ============================================================
   STIL VIZUAL — ales din Admin > Teme > "Stil vizual".

   Totul sta sub html[data-stil="..."], deci pe "standard" fisierul nu
   schimba nimic. Culorile vin din tokenii temei (var(--primary) etc.);
   aici e doar FORMA: banda de sus, antetul, banner-ul, titlurile, cardurile.

   GOTCHA: blocul inline #pbMarketplaceFinal din frontend.php scrie multe
   reguli cu !important (ascunde .header-top, aplatizeaza cardurile, coloreaza
   butonul). Regulile de aici incep cu html[data-stil] — mai specifice — si
   au !important exact unde il are si blocul.
============================================================ */

/* ─────────────────────────────────────────────────────────────
   PARTY POP — rosu / galben / albastru / verde, titluri groase,
   carduri albe cu eticheta colorata si buton verde "Adauga in cos".
   ───────────────────────────────────────────────────────────── */
html[data-stil="party_pop"] {
    --pp-red: var(--primary, #e5232a);
    --pp-yellow: var(--gold, #ffd21e);
    --pp-blue: var(--accent, #1c6fe0);
    --pp-green: var(--accent2, #1fa34a);
    --pp-purple: #7b3fe4;
    --pp-ink: var(--text, #1b1b2f);
    --pp-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --pp-body: 'Nunito', system-ui, sans-serif;
}

html[data-stil="party_pop"] body {
    font-family: var(--pp-body);
}

/* ── Banda galbena de sus (livrare / telefon / email) ── */
html[data-stil="party_pop"] .header-top {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: var(--pp-yellow) !important;
    color: var(--pp-ink) !important;
    font-family: var(--pp-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 7px 16px;
    text-align: center;
    border: 0 !important;
}
html[data-stil="party_pop"] .header-top::before,
html[data-stil="party_pop"] .header-top::after {
    content: "\2605";            /* stea */
    color: var(--pp-red);
    font-size: 13px;
    margin: 0 8px;
}
html[data-stil="party_pop"] .header-top a {
    color: var(--pp-ink) !important;
    text-decoration: none;
}

/* ── Antet alb + meniu cu litere groase ── */
html[data-stil="party_pop"] .site-header {
    background: #fff !important;
    box-shadow: 0 3px 0 var(--pp-yellow), 0 6px 18px rgba(27, 27, 47, .08) !important;
}
html[data-stil="party_pop"] .header-nav {
    border-top: 1px solid var(--border, #e6e9f4) !important;
}
html[data-stil="party_pop"] .nav-menu li a {
    font-family: var(--pp-display) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 14px;
}
html[data-stil="party_pop"] .nav-menu li a:hover,
html[data-stil="party_pop"] .nav-menu li a.active {
    box-shadow: inset 0 -3px 0 var(--pp-red);
}
html[data-stil="party_pop"] .nav-menu li a[data-nav="home"],
html[data-stil="party_pop"] .nav-menu li a[data-nav="home"].active {
    background: var(--pp-red) !important;
    color: #fff !important;
    border-radius: 999px !important;
    height: 34px !important;
    align-self: center;
    padding: 0 18px !important;
}

/* ── Banner (slider) ──
   Fundal rosu cu confetti in spatele pozelor: se vede la margini si cat
   se incarca poza. Textul scris din admin primeste contur gros, ca in
   afisele de petrecere. */
html[data-stil="party_pop"] .hero-slider {
    background-color: var(--pp-red) !important;
    background-image:
        radial-gradient(circle at 8% 18%, var(--pp-yellow) 0 5px, transparent 6px),
        radial-gradient(circle at 92% 12%, #fff 0 4px, transparent 5px),
        radial-gradient(circle at 15% 82%, var(--pp-blue) 0 6px, transparent 7px),
        radial-gradient(circle at 85% 78%, var(--pp-green) 0 5px, transparent 6px),
        radial-gradient(circle at 50% 8%, var(--pp-yellow) 0 4px, transparent 5px),
        radial-gradient(circle at 60% 92%, #fff 0 4px, transparent 5px) !important;
    border-radius: var(--radius-xl, 22px) !important;
    box-shadow: 0 8px 0 rgba(27, 27, 47, .08) !important;
    overflow: hidden;
}
html[data-stil="party_pop"] .hero-title {
    font-family: var(--pp-display) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: .01em;
    text-shadow:
        3px 3px 0 var(--pp-ink),
        -1px -1px 0 var(--pp-ink),
        1px -1px 0 var(--pp-ink),
        -1px 1px 0 var(--pp-ink),
        0 8px 18px rgba(0, 0, 0, .25);
}
html[data-stil="party_pop"] .hero-subtitle {
    font-family: var(--pp-body);
    font-weight: 800;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
html[data-stil="party_pop"] .hero-btn {
    background: var(--pp-yellow) !important;
    color: var(--pp-ink) !important;
    font-family: var(--pp-display) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    box-shadow: 0 5px 0 #c99f00, 0 10px 20px rgba(0, 0, 0, .2) !important;
    transition: transform .12s ease, box-shadow .12s ease;
}
html[data-stil="party_pop"] .hero-btn:hover {
    transform: translateY(2px);
    box-shadow: 0 3px 0 #c99f00, 0 6px 14px rgba(0, 0, 0, .2) !important;
}
html[data-stil="party_pop"] .hero-dot.active {
    background: var(--pp-yellow) !important;
}

/* ── Titlurile de sectiune: groase, majuscule, umbra galbena decalata ── */
html[data-stil="party_pop"] .section-title {
    font-family: var(--pp-display) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    color: var(--pp-red) !important;
    letter-spacing: .01em;
    text-shadow: 2px 2px 0 var(--pp-yellow);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
html[data-stil="party_pop"] .section-title::before,
html[data-stil="party_pop"] .section-title::after {
    content: "\2605";
    font-size: .6em;
    text-shadow: none;
}
html[data-stil="party_pop"] .section-title::before { color: var(--pp-blue); }
html[data-stil="party_pop"] .section-title::after  { color: var(--pp-green); }

/* ── Cardurile de produs ── */
html[data-stil="party_pop"] .product-card {
    background: #fff !important;
    border: 2px solid var(--border, #e6e9f4) !important;
    border-radius: var(--radius-lg, 16px) !important;
    box-shadow: 0 3px 0 var(--border, #e6e9f4) !important;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
html[data-stil="party_pop"] .product-card:hover {
    transform: translateY(-4px);
    border-color: var(--pp-color, var(--pp-red)) !important;
    box-shadow: 0 6px 0 var(--pp-color, var(--pp-red)), 0 14px 28px rgba(27, 27, 47, .12) !important;
}
/* Culoarea fiecarui card, pe rand: rosu, galben, albastru, verde, mov — ca etichetele din model. */
html[data-stil="party_pop"] .product-card:nth-child(5n+1) { --pp-color: var(--pp-red);    --pp-on: #fff; }
html[data-stil="party_pop"] .product-card:nth-child(5n+2) { --pp-color: #e6a800;          --pp-on: #fff; }
html[data-stil="party_pop"] .product-card:nth-child(5n+3) { --pp-color: var(--pp-blue);   --pp-on: #fff; }
html[data-stil="party_pop"] .product-card:nth-child(5n+4) { --pp-color: var(--pp-green);  --pp-on: #fff; }
html[data-stil="party_pop"] .product-card:nth-child(5n+5) { --pp-color: var(--pp-purple); --pp-on: #fff; }

html[data-stil="party_pop"] .product-info {
    text-align: center;
}
html[data-stil="party_pop"] .product-cat {
    display: inline-block;
    background: var(--pp-color, var(--pp-red));
    color: var(--pp-on, #fff) !important;
    font-family: var(--pp-display);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 10px;
    margin: 0 auto 6px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html[data-stil="party_pop"] .product-name {
    font-family: var(--pp-display) !important;
    font-weight: 800 !important;
    text-align: center;
    justify-content: center;
}
html[data-stil="party_pop"] .product-name a {
    color: var(--pp-ink) !important;
}
html[data-stil="party_pop"] .product-price,
html[data-stil="party_pop"] .product-price-currency {
    color: var(--pp-color, var(--pp-red)) !important;
    font-family: var(--pp-display);
    font-weight: 800;
}
html[data-stil="party_pop"] .product-price {
    font-size: 22px;
}
html[data-stil="party_pop"] .product-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px;
}
html[data-stil="party_pop"] .product-add-btn {
    width: 100% !important;
    background: var(--pp-green) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-family: var(--pp-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    box-shadow: 0 4px 0 #157a36 !important;
    transition: transform .12s ease, box-shadow .12s ease;
}
html[data-stil="party_pop"] .product-add-btn:not(:disabled):hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #157a36 !important;
}
html[data-stil="party_pop"] .product-add-icon {
    background: transparent !important;
}
html[data-stil="party_pop"] .product-add-text {
    display: inline !important;
}
html[data-stil="party_pop"] .product-badge {
    background: var(--pp-yellow) !important;
    color: var(--pp-ink) !important;
    font-family: var(--pp-display);
    font-weight: 800;
    border-radius: 999px !important;
}

/* Butoanele principale din restul site-ului (cos, checkout) in acelasi ton. */
html[data-stil="party_pop"] .btn-add-cart,
html[data-stil="party_pop"] .btn-primary {
    font-family: var(--pp-display);
    font-weight: 800;
    letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
    html[data-stil="party_pop"] .product-card,
    html[data-stil="party_pop"] .product-add-btn,
    html[data-stil="party_pop"] .hero-btn {
        transition: none;
    }
    html[data-stil="party_pop"] .product-card:hover {
        transform: none;
    }
}