﻿/* =========================================================
   PRODUCT CUSTOMIZE — Pages/Product/Customize.cshtml
   Scope: body.page-product-customize
   ========================================================= */

body.page-product-customize {
    background: radial-gradient(900px 420px at 18% 10%, rgba(110,15,26,.08), transparent 60%), radial-gradient(720px 360px at 85% 0%, rgba(110,15,26,.06), transparent 62%), linear-gradient(180deg, #ffffff 0%, #fbf7f8 55%, #ffffff 100%);
    color: #1c1c1f;
}

.page-product-customize .customize-shell {
    padding-top: .5rem;
}

.page-product-customize .customize-media {
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 18px;
    min-height: 320px;
    padding: .75rem;
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

.page-product-customize .customize-img {
    max-height: 420px;
    object-fit: contain;
    border-radius: 14px;
    background: transparent;
    transform: scale(1.02);
    transition: transform .22s ease;
}

@media (hover:hover) {
    .page-product-customize .customize-media:hover .customize-img {
        transform: scale(1.05);
    }
}

.page-product-customize .customize-title {
    font-weight: 900;
    letter-spacing: -0.2px;
    line-height: 1.1;
}

.page-product-customize .customize-price {
    color: var(--brand);
}

.page-product-customize .customize-badge {
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(0,0,0,.08);
    color: rgba(0,0,0,.65);
    border-radius: 999px;
    padding: .4rem .7rem;
}

.page-product-customize .customize-backlink {
    color: rgba(0,0,0,.65);
}

    .page-product-customize .customize-backlink:hover {
        color: rgba(110,15,26,.95);
    }

.page-product-customize .customize-form .form-control,
.page-product-customize .customize-form .form-select {
    border-radius: 14px;
}

@media (max-width: 575.98px) {
    .page-product-customize .customize-media {
        border-radius: 16px;
        padding: .6rem;
    }

    .page-product-customize .customize-img {
        border-radius: 12px;
    }
}


.product-reassurance {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.product-reassurance-chip {
    display: inline-flex;
    align-items: center;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(110, 15, 26, 0.06);
    border: 1px solid rgba(110, 15, 26, 0.14);
    color: var(--brand);
    font-size: .78rem;
    font-weight: 600;
}