.product-info-box {

    background:#1e293b;

    color:white;

    padding:10px 15px;

    border-radius:10px;

    font-weight:700;

    font-family:monospace;

}


.item-tag {

    display:inline-block;

    background:#334155;

    color:white;

    padding:6px 12px;

    border-radius:20px;

    margin:4px;

}



.group-tag {

    display:inline-block;

    background:#0284c7;

    color:white;

    padding:6px 12px;

    border-radius:20px;

    margin:4px;

}

.detail-header{

    background:var(--card-color);

    border:1px solid var(--border-color);

    border-radius:18px;

    padding:20px;

    margin-bottom:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.shop-subtitle{

    color:var(--text-color);

    opacity:.65;

    font-size:.9rem;

}

.price-box{

    border-radius:18px;

    padding:25px;

    border:1px solid var(--border-color);

    background:var(--card-color);

    color:var(--text-color);

}
.price-box .text-success{

    color:#22c55e !important;

}
.product-name-box,
.product-name-box p{

    color:var(--text-color);

    font-weight:600;

}
.back-btn{

    border-radius:12px;

    padding:10px 20px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:6px;

}


@media(max-width:768px){


.detail-header{

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}



.back-btn{

    width:100%;

    justify-content:center;

}



.product-info-box{

    width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

}



.product-gallery{

    justify-content:center;

}







}

.btn-game-secondary{

    background:var(--card-color);

    color:var(--text-color);

    border:1px solid var(--border-color);

}


.btn-game-secondary:hover{

    opacity:.8;

}


.detail-header h2{

    margin:0;

    font-weight:700;

}


.detail-header small{

    opacity:.7;

}


.back-btn{

    white-space:nowrap;

}

/* ==========================
   DETAIL ACTION BUTTON
========================== */


.action-btn{

    border:none;

    border-radius:12px;

    padding:10px 18px;

    font-weight:700;

    display:inline-flex;

    align-items:center;

    gap:6px;

    text-decoration:none;

    transition:.2s;

    cursor:pointer;

}


.action-btn:hover{

    transform:translateY(-2px);

}



/* Edit */

.edit-btn{

    background:#f59e0b;

    color:white;

}



.edit-btn:hover{

    background:#d97706;

    color:white;

}



/* Delete */

.delete-btn{

    background:#ef4444;

    color:white;

}



.delete-btn:hover{

    background:#dc2626;

}

.detail-actions{

    display:flex;

    gap:10px;

    align-items:center;

}

.detail-actions form{

    margin:0;

}


@media(max-width:768px){

    .detail-header{

        flex-direction:column;

        align-items:stretch;

        gap:15px;

    }


    .detail-actions{

        flex-wrap:wrap;

    }


    .action-btn,
    .back-btn{

        flex:1;

        justify-content:center;

    }

}



.edit-container{

    max-width:700px;

}



.edit-header{

    background:var(--card-color);

    border:1px solid var(--border-color);

    border-radius:18px;

    padding:20px;

    margin-bottom:20px;

}



.edit-card{

    background:var(--card-color);

    border:1px solid var(--border-color);

    border-radius:18px;

    padding:25px;

}



.edit-field{

    margin-bottom:20px;

}



.edit-field label{

    display:block;

    font-weight:700;

    margin-bottom:8px;

    color:var(--text-color);

}



.edit-input{

    width:100%;

    padding:12px 15px;

    border-radius:12px;

    border:1px solid var(--border-color);

    background:var(--bg-color);

    color:var(--text-color);

}



.edit-actions{

    display:flex;

    gap:12px;

    justify-content:flex-end;

}



.edit-save-btn,
.edit-cancel-btn{

    border:none;

    border-radius:12px;

    padding:11px 22px;

    font-weight:700;

    cursor:pointer;

}



.edit-save-btn{

    background:#22c55e;

    color:white;

}



.edit-cancel-btn{

    background:var(--card-color);

    color:var(--text-color);

    border:1px solid var(--border-color);

}



.edit-save-btn:hover,
.edit-cancel-btn:hover{

    transform:translateY(-2px);

}



@media(max-width:768px){

    .edit-actions{

        flex-direction:column;

    }


    .edit-save-btn,
    .edit-cancel-btn{

        width:100%;

    }

}


.danger-zone{

background:rgba(239,68,68,.1);

border:1px solid #ef4444;

border-radius:18px;

padding:20px;

margin-top:20px;

}