/* =========================================================
   Product Page
   Modern Image Zoom
   ========================================================= */

.product-page-wrap {
    width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 15px;
}

/* =========================================================
   Main Image Area
   ========================================================= */

.picZoomer {
    position: relative;
    width: 100%;
    max-width: 100%;
}

/*
 * این wrapper برخلاف picZoomer قدیمی اندازه ثابت ندارد.
 * اندازه آن بر اساس خود تصویر تعیین می‌شود.
 */
.picZoomer-pic-wp {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* تصویر اصلی */
.product-main-image,
.picZoomer-pic {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    border-radius: 12px;
    cursor: crosshair;
    user-select: none;
    -webkit-user-drag: none;
}

/* =========================================================
   Modern Zoom Lens
   ========================================================= */

.modern-zoom-lens {
    position: absolute;
    display: none;
    width: 120px;
    height: 120px;

    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.95);

    background: rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 4px 15px rgba(0, 0, 0, 0.20);

    pointer-events: none;
    z-index: 1000;
}

/* =========================================================
   Modern Zoom Panel
   ========================================================= */

.modern-zoom-panel {
    position: fixed;

    width: 360px;
    height: 360px;

    display: none;

    background: #fff;

    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.22),
        0 3px 8px rgba(0, 0, 0, 0.10);

    z-index: 99999;

    pointer-events: none;
}

/*
 * تصویر بزرگ‌شده داخل پنجره Zoom
 */
.modern-zoom-image {
    position: absolute;

    display: block;

    max-width: none !important;
    max-height: none !important;

    width: auto;
    height: auto;

    pointer-events: none;
    user-select: none;

    -webkit-user-drag: none;
}

/* =========================================================
   Zoom panel small header
   ========================================================= */

.modern-zoom-panel::before {
    content: "Zoom";

    position: absolute;

    top: 8px;
    left: 8px;

    z-index: 2;

    padding: 3px 8px;

    border-radius: 5px;

    background: rgba(0, 0, 0, 0.45);

    color: #fff;

    font-size: 11px;
    line-height: 1.4;

    pointer-events: none;

    opacity: 0.65;
}

/* =========================================================
   Product thumbnails
   ========================================================= */

.foroshgah-carousel-img {
    cursor: pointer;

    height: 70px;
    width: 100%;

    object-fit: cover;

    border-radius: 8px;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.foroshgah-carousel-img:hover {
    transform: translateY(-2px);

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.15);
}

.foroshgah-img-carousel p {
    font-size: 0.75rem;
    text-align: center;
    margin-top: 4px;
    color: #64748b;
}

/* =========================================================
   Other Product Page Elements
   ========================================================= */

.verified-images {
    width: 36px;
    height: auto;
}

.pTitle {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.storeTitle {
    margin: 0 0.25rem 0 0;
    color: #64748b;
}

.mainPrice .price {
    font-weight: 700;
    margin: 0 0.35rem;
}

.starIcon {
    color: #f59e0b;
}

.addCartButton,
.addCartButton-joziat {
    display: block;
    width: 100%;
}

.mahsol-desc {
    line-height: 1.8;
}

.commentCon .no-comment-image {
    max-width: 180px;
    display: block;
    margin: 1rem auto 0;
}

/* =========================================================
   Modal
   ========================================================= */

.modal.show.d-block {
    background: rgba(0, 0, 0, 0.45);
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 991.98px) {

    /*
     * در تبلت و موبایل پنجره شناور Zoom حذف می‌شود.
     * تصویر اصلی همچنان کاملاً قابل مشاهده است.
     */
    .modern-zoom-panel,
    .modern-zoom-lens {
        display: none !important;
    }

    .product-main-image,
    .picZoomer-pic {
        cursor: default;
    }
}

@media (max-width: 767.98px) {

    .product-page-wrap .pe-5,
    .product-page-wrap .ps-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .product-main-image,
    .picZoomer-pic {
        max-height: 350px;
    }

    .foroshgah-carousel-img {
        height: 65px;
    }
}