/* Product details page polish (loaded after the page's own styles). */

/* Long product names stay readable instead of filling the screen */
#prod-name {
    font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.35rem) !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1rem !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

/* Price on one line on phones */
#prod-price {
    font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem) !important;
    white-space: nowrap;
    line-height: 1 !important;
}

/* Small labels were 8–9px; lift them to a readable size */
.product-shadow .text-\[8px\],
.product-shadow .text-\[9px\] { font-size: 10px !important; }
#rev-stats-label { font-size: 11px !important; letter-spacing: .14em !important; }

/* Breadcrumb row wraps neatly next to the badge on phones */
.product-shadow nav { flex-wrap: wrap; row-gap: 4px; }
.product-shadow nav + span { flex-shrink: 0; }

/* Condition badge on the main image */
#pd-cond-badge { background: #0f172a; letter-spacing: .16em; }
#pd-cond-badge.is-new { background: #008a00; }
#pd-cond-badge.is-refurb { background: #0369a1; }

/* Gallery: thumbnails get a clear active state and stay tappable */
#thumb-grid .thumbnail { border-color: #e2e8f0; transition: border-color .2s, transform .2s, box-shadow .2s; }
#thumb-grid .thumbnail:hover { transform: translateY(-2px); }
#thumb-grid .thumbnail.active { border-color: #008a00 !important; box-shadow: 0 8px 20px -10px rgba(0,138,0,.6); }
#main-image { transition: opacity .2s ease, transform 1s ease !important; }

/* Keep the gallery in view while reading a long description (tall desktop screens only) */
.product-shadow { overflow: clip !important; }
@media (min-width: 1024px) and (min-height: 860px) {
    .product-shadow > .grid > div:first-child {
        position: sticky;
        top: 140px;
        align-self: start;
    }
}

/* Description: comfortable reading width and spacing */
#prod-desc, .product-shadow .prose {
    max-width: 68ch;
    color: #475569;
    line-height: 1.75;
}

/* Buttons: visible keyboard focus */
#buy-btn:focus-visible,
.product-shadow button:focus-visible,
#thumb-grid .thumbnail:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0,138,0,.25) !important;
}
#buy-btn:disabled { cursor: not-allowed; filter: grayscale(.4); }

/* Phones: lighter padding so content gets the width */
@media (max-width: 640px) {
    .product-shadow { border-radius: 1.5rem !important; }
    .product-shadow > .grid > div { padding-left: 16px !important; padding-right: 16px !important; }
    .product-shadow .rounded-3xl.p-8 { padding: 20px !important; }
    #floating-buy-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    #main-image, #thumb-grid .thumbnail { transition: none !important; }
}

/* Was-price stays on one line next to the price */
#prod-orig { white-space: nowrap; font-size: clamp(1rem, .9rem + .5vw, 1.25rem) !important; }
#prod-orig:empty { display: none; }
#pd-disc { letter-spacing: .08em; }