.detail-card {
    background: linear-gradient(135deg, #ffffff 0%, #fdfcfb 40%, #f9fafb 100%);
}

/* ribbon & image */
.ribbon {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ef4444;
    color: #fff;
    font-weight: 600;
    font-size: .75rem;
    padding: .35rem .6rem;
    border-radius: .375rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.img-frame {
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
}

.thumb {
    width: 86px;
    height: 86px;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    object-fit: cover;
}

/* price box */
.price-box {
    padding: .9rem 1rem;
    border-radius: 1rem;
    background: radial-gradient(circle at top left, #fef3c7, #f9fafb 40%, #f9fafb 100%);
    border: 1px solid #fde68a;
}

.current-price {
    font-size: 1.9rem;
    font-weight: 800;
    color: #dc2626;
}

.original-price {
    font-size: 1rem;
    color: #9ca3af;
    text-decoration: line-through;
}

.discount-pill {
    padding: 0.15rem .6rem;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: .75rem;
    font-weight: 700;
}

/* info */
.info-label {
    display: inline-block;
    min-width: 92px;
    font-weight: 600;
    color: #111827;
}

/* quantity */
.qty-control {
    display: inline-flex;
    align-items: center;
    border-radius: .75rem;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background: #f9fafb;
}

.qty-btn {
    padding: .35rem .8rem;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    cursor: pointer;
    color: #4b5563;
    transition: background .16s ease, color .16s ease;
}

    .qty-btn:hover {
        background: #e5e7eb;
        color: #111827;
    }

.qty-input {
    width: 60px;
    text-align: center;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    border-top: none;
    border-bottom: none;
    padding: .35rem 0;
    outline: none;
    background: transparent;
}

    .qty-input::-webkit-inner-spin-button,
    .qty-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.qty-input {
    -moz-appearance: textfield;
}

.smooth {
    transition: all .2s ease;
}

/* buttons */
.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .75rem 1.1rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(248, 113, 22, .45);
    transform: translateY(0);
    transition: all .18s ease;
}

    .btn-primary:hover {
        box-shadow: 0 14px 30px rgba(234, 88, 12, .55);
        transform: translateY(-1px);
        background: linear-gradient(135deg, #fb923c, #ea580c);
    }

    .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 6px 18px rgba(234, 88, 12, .45);
    }

    .btn-primary .btn-subtext {
        font-weight: 500;
        font-size: .7rem;
        opacity: .9;
        border-left: 1px solid rgba(255, 255, 255, .25);
        padding-left: .55rem;
    }

    .btn-primary .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .16);
        border-radius: 999px;
        padding: .2rem .4rem;
    }

/* outline button */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.1rem;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: all .18s ease;
}

    .btn-outline:hover {
        border-color: #f97316;
        color: #b45309;
        background: #fff7ed;
        box-shadow: 0 6px 16px rgba(248, 113, 22, .15);
    }

    .btn-outline .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

/* ghost buttons */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #4b5563;
    cursor: pointer;
    transition: all .16s ease;
}

    .btn-ghost:hover {
        background: #e5e7eb;
        color: #111827;
    }

/* star size */
.star {
    width: 18px;
    height: 18px;
}