/* ======================================================
   BASE
====================================================== */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f5f5f5;
    color: #222;
}

h1, h2, h3, h4, h5 {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.5px;
}

/* ======================================================
   NAVBAR
====================================================== */

.navbar {
    background-color: #0f0f0f;
}

    .navbar .nav-link {
        color: #ffffff;
        font-weight: 300;
    }

        .navbar .nav-link:hover {
            color: #c9a24d;
        }

.navbar-brand {
    color: #ffffff;
}

/* ======================================================
   BUTTONS
====================================================== */

.btn-gold {
    background-color: #c9a24d;
    color: #0f0f0f;
    border: none;
}

    .btn-gold:hover {
        background-color: #b8933f;
        color: #0f0f0f;
    }

.btn-outline-gold {
    border: 1px solid #c9a24d;
    color: #c9a24d;
    background: transparent;
}

    .btn-outline-gold:hover {
        background: #c9a24d;
        color: #0f0f0f;
    }

/* ======================================================
   PRODUCT CARD
====================================================== */

.product-card {
    background: #ffffff;
    border: none;
    transition: box-shadow .3s ease;
}

    .product-card:hover {
        box-shadow: 0 15px 40px rgba(0,0,0,.08);
    }

.product-title {
    font-size: 1.05rem;
    font-family: 'Playfair Display', serif;
}

.product-price {
    color: #c9a24d;
    font-weight: 500;
    font-size: 1.1rem;
}

/* ======================================================
   PRODUCT THUMBNAIL (JEWELRY)
====================================================== */

.product-thumb-wrapper {
    position: relative;
    height: 240px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* immagine COMPLETA, NON tagliata */
.product-thumb {
    max-height: 85%;
    max-width: 85%;
    object-fit: contain;
    cursor: pointer;
    transition: opacity .25s ease;
}

.product-thumb-wrapper:hover .product-thumb {
    opacity: 0.92;
}


/* ======================================================
   ZOOM OVERLAY (LIGHT LUXURY)
====================================================== */

.zoom-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(15, 15, 15, 0.45), rgba(15, 15, 15, 0.0) 60% );
    color: #ffffff;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.product-thumb-wrapper:hover .zoom-overlay {
    opacity: 1;
}

/* ======================================================
   CATEGORY BADGE
====================================================== */

.badge-category {
    border: 1px solid #c9a24d;
    color: #c9a24d;
    background: transparent;
    font-weight: 400;
    font-size: 0.75rem;
}

/* ======================================================
   FILTER BAR
====================================================== */

.filter-card {
    background: #ffffff;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

/* ======================================================
   CART BADGE (NAVBAR)
====================================================== */

.cart-badge {
    position: absolute;
    top: -6px;
    right: -12px;
    background: #c9a24d;
    color: #0f0f0f;
    font-size: 0.7rem;
    padding: 3px 7px;
    border-radius: 50%;
    font-weight: 500;
}

/* blocca hover sotto modal */
body.modal-open .product-thumb {
    pointer-events: none;
}

/* ======================================================
   CART & CHECKOUT
====================================================== */

table {
    background: #ffffff;
}

    table th {
        font-weight: 500;
        color: #444;
    }

    table td {
        vertical-align: middle;
    }

/* ======================================================
   LOGIN PAGE
====================================================== */

.login-page {
    background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
}

/* ======================================================
   FOOTER
====================================================== */

footer {
    background: #0f0f0f;
    color: #aaa;
    font-size: 0.85rem;
}

.old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 0.85rem;
}

.discounted-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: #a68c53; /* oro */
}

/* ===========================
   IMAGE ZOOM
=========================== */

.image-zoom-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #f8f8f8;
}

.image-zoom {
    position: relative;
    width: 100%;
    padding-top: 125%; /* verticale */
    background-repeat: no-repeat;
    background-size: 200%;
    background-position: center;
    cursor: zoom-in;
}

    .image-zoom img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: opacity 0.2s ease;
    }

    .image-zoom:hover img {
        opacity: 0;
    }

/* ===========================
   DESCRIZIONE LUNGA
=========================== */

.product-description {
    line-height: 1.8;
    font-size: 1rem;
    color: #444;
}

    .product-description p {
        white-space: normal;
    }

/* ===========================
   TITOLI & PREZZI
=========================== */

.product-detail-title {
    font-weight: 500;
    letter-spacing: 0.03em;
}

.old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9rem;
}

.discounted-price {
    color: #a68c53;
    font-weight: 600;
}

.product-image-container {
    display: flex;
    gap: 20px;
}

/* THUMBNAIL FISSA */
.product-thumb {
    width: 400px;
    height: 400px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #e0e0e0;
    cursor: zoom-in;
}

/* ZOOM BOX */
/* ===========================
   PRODUCT IMAGE – SAFE VERSION
=========================== */

.product-image-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* THUMBNAIL */
.product-thumb-wrapper {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.product-thumb-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-thumb {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    display: block;
}

.zoom-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: linear-gradient( to top, rgba(15, 15, 15, 0.45), rgba(15, 15, 15, 0.0) 60% );
    opacity: 0;
    transition: opacity .3s ease;
}

.product-thumb-wrapper:hover .zoom-overlay {
    opacity: 1;
}

.product-thumb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 🔴 RIDIMENSIONA SEMPRE */
}

/* ZOOM BOX */
.product-zoom-box {
    width: 400px;
    height: 400px;
    border: 1px solid #e0e0e0;
    background-repeat: no-repeat;
    background-size: 200%;
    background-position: center;
    display: none;
}

/* MOSTRA ZOOM QUANDO PASSI SULLA THUMB */
.product-image-container:hover .product-zoom-box {
    display: block;
}

/* ===========================
   PRODUCT DETAIL – INDEX
=========================== */

.product-detail-thumb-wrapper {
    width: 400px;
    height: 400px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail-thumb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ===========================
   PRODUCT CARD – INDEX
=========================== */

.product-card {
    background: #ffffff;
    border: none;
    height: 100%;
}

/* contenitore immagine */
.product-card-image {
    height: 240px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

    /* immagine */
    .product-card-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
    }

/* Sidebar filtri */
.filter-sidebar {
    border: none;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Tree categorie */
.category-tree {
    font-size: 0.95rem;
}

.tree-category {
    margin-bottom: 6px;
}

.tree-item {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
}

    .tree-item:hover {
        background: #f5f5f5;
        color: #000;
    }

    .tree-item.active {
        background: rgba(201, 166, 70, 0.15);
        color: #c9a646;
        font-weight: 600;
    }

    .tree-item.root {
        margin-bottom: 8px;
        font-weight: 500;
    }

    .tree-item.category {
        font-weight: 500;
    }

    .tree-item.subcategory {
        padding-left: 26px;
        font-size: 0.92rem;
    }

.sub-tree {
    margin-left: 6px;
    margin-top: 2px;
}

.toggle-btn {
    width: 18px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: #888;
}

    .toggle-btn:hover {
        color: #c9a646;
    }

.toggle-placeholder {
    width: 18px;
    display: inline-block;
}

/* Responsive mobile */
@media (max-width: 991px) {
    .category-tree {
        max-height: 250px;
        overflow-y: auto;
    }
}
.tree-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
}

.toggle-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .toggle-btn:hover {
        background: #f3f3f3;
    }

.toggle-icon {
    font-size: 12px;
    color: #777;
    transition: transform 0.15s ease;
}

.toggle-btn:hover .toggle-icon {
    color: #c9a646; /* gold theme */
}

.toggle-placeholder {
    width: 26px;
    height: 26px;
    display: inline-block;
}

.tree-item.category {
    flex: 1;
    padding: 6px 8px;
    border-radius: 8px;
}