/* ============================================================
   PDP mobile purchase card (2026-10-02) - /produk/{slug}, < 768px.
   Title, meta row, dark price card, delivery card and trust pills.
   Desktop is untouched: every rule lives inside the media query.
   Selectors are prefixed with .pdp-shopee .purchase-card so they
   outrank the page's own inline <style> rules in products/show.php.
   ============================================================ */

@media (max-width: 767.98px) {
    /* ---------- Chips above the title ---------- */
    .pdp-shopee .purchase-card .pdp-badge-row {
        gap: 6px;
        margin-bottom: 10px;
    }

    .pdp-shopee .purchase-card .pdp-category-chip-mobile {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border: 1px solid #fde68a;
        border-radius: 999px;
        background: #fef9c3;
        color: #854d0e;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .pdp-shopee .purchase-card .pdp-label-badge {
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 0.72rem;
        font-weight: 700;
    }

    /* ---------- Title: sentence case reads far better than
       shouting all-caps on long product names at phone width ---------- */
    .pdp-shopee .purchase-card .product-detail-title {
        margin-bottom: 8px !important;
        font-family: var(--font-family);
        font-size: 1.28rem;
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: -0.015em;
        text-transform: none;
        color: #0f172a;
    }

    /* ---------- Rating / terjual meta row ---------- */
    .pdp-shopee .purchase-card .pdp-shp-meta-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        padding-bottom: 14px;
        margin-bottom: 14px;
        border-bottom: 1px dashed #e5e7eb;
        font-size: 0.8rem;
    }

    .pdp-shopee .purchase-card .pdp-shp-rating-num {
        padding: 2px 8px;
        border-radius: 999px;
        background: #fff7cc;
        color: #854d0e;
        font-weight: 800;
        text-decoration: none;
    }

    .pdp-shopee .purchase-card .pdp-shp-stars {
        font-size: 0.72rem;
        letter-spacing: 1px;
    }

    .pdp-shopee .purchase-card .pdp-shp-meta-sep {
        width: 3px;
        height: 3px;
        margin: 0 2px;
        border: 0;
        border-radius: 50%;
        background: #cbd5e1;
    }

    .pdp-shopee .purchase-card .pdp-shp-meta-link {
        color: #0f172a;
        font-weight: 800;
        text-decoration: none;
    }

    .pdp-shopee .purchase-card .pdp-shp-meta-text {
        color: #64748b;
    }

    .pdp-shopee .purchase-card .pdp-shp-report {
        margin-left: auto;
        padding: 2px 8px;
        border-radius: 999px;
        background: #f4f5f7;
        color: #94a3b8;
        font-size: 0.72rem;
        text-decoration: none;
    }

    /* ---------- Price: dark card, yellow price ---------- */
    .pdp-shopee .purchase-card .pdp-shp-price-box {
        position: relative;
        overflow: hidden;
        align-items: center;
        gap: 4px 10px;
        margin-bottom: 14px;
        padding: 14px 16px 16px;
        border-radius: 18px;
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        box-shadow: 0 16px 32px -18px rgba(15, 23, 42, 0.6);
    }

    .pdp-shopee .purchase-card .pdp-shp-price-box::before {
        content: 'Harga';
        flex: 0 0 100%;
        color: #94a3b8;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .pdp-shopee .purchase-card .pdp-shp-price-box::after {
        content: '';
        position: absolute;
        top: -60px;
        right: -40px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(255, 235, 0, 0.22), transparent);
        pointer-events: none;
    }

    .pdp-shopee .purchase-card .pdp-shp-price-current {
        color: #ffeb00;
        font-size: 1.85rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .pdp-shopee .purchase-card .pdp-shp-price-original {
        color: #94a3b8;
        font-size: 0.85rem;
        text-decoration: line-through;
        text-decoration-color: rgba(248, 113, 113, 0.8);
    }

    .pdp-shopee .purchase-card .pdp-shp-price-badge {
        padding: 2px 8px;
        border-radius: 999px;
        background: #ffeb00;
        color: #0f172a;
        font-size: 0.72rem;
        font-weight: 800;
    }

    /* ---------- Short description ---------- */
    .pdp-shopee .purchase-card .product-short-desc {
        color: #475569 !important;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* ---------- Delivery: compact info card ---------- */
    .pdp-shopee .purchase-card .pdp-shp-ship-section {
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
        margin: 0 0 14px;
        padding: 12px 14px;
        border: 1px solid #eef0f3;
        border-radius: 16px;
        background: #f8fafc;
    }

    .pdp-shopee .purchase-card .pdp-shp-ship-title {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        color: #94a3b8;
        font-family: var(--font-family);
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .pdp-shopee .purchase-card .pdp-shp-ship-row {
        display: contents;
    }

    .pdp-shopee .purchase-card .pdp-shp-ship-row i {
        grid-column: 1;
        grid-row: 1 / span 3;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        margin: 0;
        border-radius: 12px;
        background: #ffeb00;
        color: #0f172a;
        font-size: 1.1rem;
    }

    .pdp-shopee .purchase-card .pdp-shp-ship-value {
        grid-column: 2;
        color: #0f172a;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .pdp-shopee .purchase-card .pdp-shp-ship-note {
        grid-column: 2;
        margin: 0;
        padding: 0;
        color: #64748b;
        font-size: 0.76rem;
    }

    .pdp-shopee .purchase-card .pdp-shp-ship-note strong {
        color: #047857;
    }

    /* ---------- Trust pills ---------- */
    .pdp-shopee .purchase-card .pdp-trust-guarantee,
    .pdp-shopee .purchase-card .pdp-trust-hot {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        width: fit-content;
        margin: 0 6px 8px 0 !important;
        padding: 6px 12px !important;
        border-radius: 999px;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        vertical-align: middle;
    }

    .pdp-shopee .purchase-card .pdp-trust-guarantee {
        background: #ecfdf5 !important;
        border: 1px solid #a7f3d0;
        color: #047857 !important;
    }

    .pdp-shopee .purchase-card .pdp-trust-hot {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #dc2626 !important;
    }

    .pdp-shopee .purchase-card .pdp-trust-hot .bi-fire {
        animation: pdp-flame 1.4s ease-in-out infinite;
        transform-origin: 50% 100%;
    }

    /* Trim the stacked bottom spacing (pill margin + form mb-3 + card
       padding) that left a ~70px hole above Deskripsi */
    .pdp-shopee .purchase-card #addToCartForm {
        margin-bottom: 0 !important;
    }

    .pdp-shopee .purchase-card #addToCartForm > .pdp-trust-hot,
    .pdp-shopee .purchase-card #addToCartForm > .pdp-trust-guarantee:last-of-type {
        margin-bottom: 0 !important;
    }

    .pdp-shopee .purchase-card {
        padding-bottom: 0.9rem;
    }

    @keyframes pdp-flame {
        0%, 100% { transform: scale(1) rotate(0); }
        50% { transform: scale(1.18) rotate(-6deg); }
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .pdp-shopee .purchase-card .pdp-trust-hot .bi-fire {
        animation: none;
    }
}