/* ============================================================
   Product details page design upgrade — additive, scoped to
   existing markup classes, same approach as home-upgrade.css.

   NOTE: pushed into @stack('css'), which renders BEFORE
   style.css/main.css/responsive.css in the shared master layout.
   Any property style.css also sets on the same selector needs
   !important here or style.css (loaded later) wins on equal
   specificity. Only redeclared properties carry !important.

   Does not touch: Owl Carousel classes/behaviour, the zoomsl
   image-zoom plugin, or any JS-bound selectors (.indicator-item,
   .minus/.plus, .selector-item_radio, #exampleModal, etc.).
   ============================================================ */

:root {
    --upg-red: #e02020;
    --upg-red-dark: #b71919;
    --upg-ink: #1f2937;
    --upg-muted: #6b7280;
    --upg-line: #edf0f2;
    --upg-radius: 16px;
    --upg-radius-sm: 10px;
    --upg-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
    --upg-shadow-hover: 0 10px 20px rgba(16, 24, 40, .08), 0 22px 44px rgba(16, 24, 40, .10);
}

/* ---------- Page shell ---------- */
.product-section {
    background: #fff;
    border-radius: var(--upg-radius);
    box-shadow: var(--upg-shadow);
    padding: 28px 24px !important;
    margin-top: 14px !important;
    margin-bottom: 18px !important;
}

.homeproduct.main-details-page {
    margin-top: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

section.pro_details_area {
    background: transparent !important;
    padding: 0 0 25px !important;
}

section.related-product-section {
    background: #fff;
    border-radius: var(--upg-radius);
    box-shadow: var(--upg-shadow);
    padding: 22px 20px !important;
    margin-top: 18px !important;
    margin-bottom: 18px !important;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    margin-bottom: 10px;
}

.breadcrumb ul li a,
.breadcrumb ul li span {
    color: var(--upg-muted) !important;
    font-size: 13.5px !important;
}

.breadcrumb ul li a:hover {
    color: var(--upg-red) !important;
}

/* ---------- Gallery ---------- */
.details_slider {
    border: none !important;
    border-radius: var(--upg-radius) !important;
    box-shadow: var(--upg-shadow);
    background: #fafafa;
}

.dimage_item img {
    border-radius: var(--upg-radius);
}

.indicator-item {
    border: 1px solid var(--upg-line) !important;
    border-radius: var(--upg-radius-sm) !important;
    transition: .2s ease;
    cursor: pointer;
}

.indicator-item:hover {
    border-color: var(--upg-red) !important;
}

.product-details-discount-badge span.sale-badge-text {
    background: linear-gradient(135deg, var(--upg-red), var(--upg-red-dark)) !important;
    box-shadow: 0 4px 10px rgba(224, 32, 32, .35);
}

/* ---------- Right column ---------- */
.product-cart .name {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--upg-ink);
    line-height: 1.3;
}

.details-price {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--upg-red) !important;
}

.details-price del {
    color: #b6bac1 !important;
    font-weight: 500;
    margin-right: 4px;
}

.details-ratting-wrapper i {
    color: #f5a623 !important;
}

.all-reviews-button {
    text-decoration: none !important;
    color: var(--upg-red);
    font-weight: 600;
    font-size: 13px;
    border: 1px solid var(--upg-line);
    border-radius: 999px;
    padding: 3px 12px;
}

.all-reviews-button:hover {
    background: #fdecec;
}

.product-code p {
    background: var(--upg-ink) !important;
    border-right-color: #fff !important;
    border-radius: 4px 0 0 4px;
    font-weight: 600;
    font-size: 13px;
}

/* ---------- Color / size selectors ---------- */
.color_inner .selector .selector-item label {
    width: 34px !important;
    height: 34px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 1px var(--upg-line);
}

.color_inner .selector-item input[type="radio"]:checked + label {
    box-shadow: 0 0 0 2px var(--upg-red);
}

.selector-item_label {
    border-radius: 999px !important;
    border: 1px solid var(--upg-line) !important;
    padding: 4px 14px !important;
    font-weight: 600 !important;
}

.selector-item_radio:checked + .selector-item_label,
.selector-item_label:hover {
    background-color: var(--upg-ink) !important;
    border-color: var(--upg-ink) !important;
    color: #fff !important;
}

.pro_brand p,
.pro_unig label {
    color: var(--upg-muted);
    font-weight: 600 !important;
    font-size: 13.5px;
}

/* ---------- Quantity + buttons ---------- */
.qty-cart .quantity {
    border: 1px solid var(--upg-line) !important;
    border-radius: 999px !important;
    overflow: hidden;
}

.quantity .minus,
.quantity .plus {
    border-color: var(--upg-line) !important;
    color: var(--upg-ink);
}

.add_cart_btn {
    background-color: var(--upg-ink) !important;
    border-color: var(--upg-ink) !important;
    border-radius: 999px !important;
    font-weight: 600;
}

.add_cart_btn:hover,
.add_cart_btn:active {
    background-color: var(--upg-red) !important;
    border-color: var(--upg-red) !important;
}

.order_now_btn {
    background-color: var(--upg-red) !important;
    border-color: var(--upg-red) !important;
    border-radius: 999px !important;
    font-weight: 600;
}

.order_now_btn:hover,
.order_now_btn:active {
    background-color: var(--upg-red-dark) !important;
    border-color: var(--upg-red-dark) !important;
}

/* the call / whatsapp buttons use bootstrap .btn-success by default */
a.call_now_btn.btn-success {
    background-color: #fff !important;
    border: 1.5px solid var(--upg-line) !important;
    color: var(--upg-ink) !important;
    border-radius: 999px !important;
    font-weight: 600;
    transition: .2s ease;
}

a.call_now_btn.btn-success:hover {
    border-color: var(--upg-red) !important;
    color: var(--upg-red) !important;
}

.del_charge_area .alert.alert-info {
    background: #f7f8fa !important;
    border: 1px solid var(--upg-line) !important;
    border-radius: var(--upg-radius-sm) !important;
    color: var(--upg-ink) !important;
}

.flext_area i {
    color: var(--upg-red);
}

/* ---------- Description tab nav ---------- */
.description-nav-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.desc-nav-ul li a {
    box-shadow: none !important;
    border: 1px solid var(--upg-line) !important;
    border-radius: 999px !important;
    font-weight: 600;
    color: var(--upg-ink);
}

.desc-nav-ul li.active a,
.desc-nav-ul li:hover a {
    background-color: var(--upg-ink) !important;
    color: #fff !important;
}

.description {
    background: #fff !important;
    padding: 24px !important;
    border-radius: var(--upg-radius);
    box-shadow: var(--upg-shadow);
    margin-top: 18px !important;
}

.description h2 {
    border-bottom: 1px solid var(--upg-line) !important;
}

.details-action-box {
    background-color: #fff !important;
    border-radius: var(--upg-radius) !important;
    box-shadow: var(--upg-shadow);
    padding: 24px !important;
}

.details-action-box .section-head {
    border-bottom: 1px solid var(--upg-line) !important;
}

.details-action-box .section-head .action .details-action-btn {
    background: var(--upg-ink) !important;
    border-color: var(--upg-ink) !important;
    border-radius: 999px !important;
}

.details-action-box .section-head .action .details-action-btn:hover {
    background: var(--upg-red) !important;
    border-color: var(--upg-red) !important;
}

.review-card {
    background: #f7f8fa !important;
    border-radius: var(--upg-radius-sm) !important;
}

.details-action-box .empty-content i {
    background-color: #fdecec !important;
    color: var(--upg-red) !important;
}

/* ---------- Related products section header ---------- */
.related-title {
    margin-bottom: 18px !important;
    padding-left: 14px;
    position: relative;
}

.related-title h5 {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: var(--upg-ink);
}

.related-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 5px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--upg-red), var(--upg-red-dark));
}

/* ---------- Responsive tuning ---------- */
@media (max-width: 767px) {
    .product-section,
    .description,
    .details-action-box,
    section.related-product-section {
        padding: 16px !important;
        border-radius: 12px;
    }

    .product-cart .name {
        font-size: 19px !important;
    }

    .details-price {
        font-size: 21px !important;
    }
}