/* ==================================================
   store/pages/product-details.css — Product details page.
   ==================================================
   .product-specs, .quantity-box, .new-price/.old-price and
   .product-image used to be declared BOTH here and in style.css.
   The shared versions now live in components/; what remains below
   is only what this page overrides or owns outright.
   ================================================== */

/* ── Product Specs Box ────────────────────────────
   Kept here (not in components/) because .product-specs only
   appears on this page, and this page's card-coloured version is
   the one that was actually winning before the split. */
.product-specs {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--section-border) !important;
    color: var(--text-color) !important;
    border-radius: 10px !important;
    transition: background-color var(--dur-slow) ease;
}

.spec-label {
    font-weight: 600;
    color: var(--text-color) !important;
}

.spec-value {
    color: var(--muted-text) !important;
}

/* ── Product Description ────────────────────────── */
.product-description {
    color: var(--muted-text) !important;
    line-height: 1.7;
    font-size: 0.97rem;
}

/* ── Quantity Box — page override ─────────────────
   components/quantity-box.css sets the shared 38px stepper; the
   details page runs it slightly larger. Only the deltas are here. */
.quantity-box .btn {
    width: 40px;
    height: 40px;
}

.quantity-input {
    width: 60px !important;
    height: 40px !important;
}

/* ── Static Style Replacements ─────────────────── */
.badge-zindex { z-index: 5; }
.rating-stars-yellow { color: #f59e0b; font-size: 1.1rem; }
.reviews-count-text { color: var(--muted-text); }
.old-price-sub { color: var(--muted-text); }
.qty-input-md { width: 70px !important; }
.no-reviews-text { color: var(--muted-text); }
.review-stars-yellow { color: #f59e0b; }
.review-date-text { color: var(--muted-text); }

/* ── Main Product Image + Hover Zoom ─────────────── */
.zoom-wrapper {
    overflow: hidden;
    border-radius: var(--radius-lg, 12px);
}

.product-detail-main-img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: transform 0.35s ease;
}

@media (hover: hover) {
    .zoom-wrapper:hover .product-detail-main-img {
        transform: scale(1.15);
    }
}

/* ==================================================
   Responsive — layout
   ==================================================
   Two blocks here used to be keyed on `#product-details`, and **no
   element with that id exists** — not in this page's view, not in any
   view in the project. The ids on the details page are main-content,
   productMainImg, discountBadge, colorSwatches and so on. So the rule
   that was meant to cap the photograph at 260px on a phone had never
   once run, and the column-stacking rule beside it was redundant
   anyway: Bootstrap's own col-lg-6 stacks below 992px unaided.

   Rewritten against the elements that are actually there. --- */
@media (max-width: 575px) {
    /* The photograph is 400px tall by default. On a phone that is the
       whole screen before a price or a colour is visible. `contain`
       rather than `cover` because a phone in a 260px box is a tall
       object and cropping it removes the product. */
    .product-detail-main-img {
        max-height: 260px;
        object-fit: contain;
    }
    .product-specs {
        padding: 12px !important;
    }
    .product-description {
        font-size: 0.9rem;
    }
}

/* ==================================================
   Responsive — Qty/Add-to-Cart row
   #addCartBtn keeps Bootstrap's px-5 (3rem each side) from the
   view, which is fine at desktop sizes but forces "Add To Cart"
   onto two lines at <=375px, doubling the button's height. Reclaim
   space here instead of touching the view's utility classes.
   ================================================== */
@media (max-width: 575px) {
    #qtyCartBlock .d-flex.gap-2,
    #notifyBlock .d-flex.gap-2 {
        flex-wrap: nowrap;
    }
    #addCartBtn {
        flex: 1 1 auto;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        white-space: nowrap;
    }
    #wishBtn {
        flex: 0 0 auto;
    }
}

@media (max-width: 375px) {
    #addCartBtn {
        font-size: 1rem !important;
    }
}