/* AfghanZone Public Product Detail Premium V2 v1.0.0
   Additive presentation layer for desktop + mobile product details.
   No inventory, order, seller-routing, WhatsApp, review, rating, or backend logic changes. */

:root {
    --az-pdv2-orange: #f97316;
    --az-pdv2-orange-deep: #dd5f08;
    --az-pdv2-green: #087a55;
    --az-pdv2-ink: #172033;
    --az-pdv2-muted: #667085;
    --az-pdv2-line: #e6e9ef;
    --az-pdv2-soft: #f7f8fb;
    --az-pdv2-warm: #fff8ef;
    --az-pdv2-card-shadow: 0 16px 42px rgba(15, 23, 42, .075);
}

/* Keep the full-screen product view polished, calm and visually separated from the catalog. */
.product-detail-page {
    background:
        radial-gradient(circle at 88% 4%, rgba(249, 115, 22, .07), transparent 30%),
        radial-gradient(circle at 8% 24%, rgba(8, 122, 85, .045), transparent 28%),
        #f6f7f9 !important;
}

.product-detail-page .detail-header {
    min-height: 64px;
    border-bottom: 1px solid rgba(229, 231, 235, .9) !important;
    background: rgba(255,255,255,.93) !important;
    box-shadow: 0 5px 22px rgba(15,23,42,.035);
    backdrop-filter: blur(18px) saturate(150%);
}

.product-detail-page .detail-header-inner {
    min-height: 64px !important;
}

.product-detail-page .detail-header .market-brand strong {
    color: var(--az-pdv2-ink);
    letter-spacing: -.2px;
}

.product-detail-page .detail-header .market-brand small {
    color: var(--az-pdv2-orange);
    font-weight: 850;
    letter-spacing: 1.2px;
}

.product-detail-page #close-product-details.secondary-button {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid #dfe4eb;
    border-radius: 12px;
    background: #fff;
    color: #344054;
    box-shadow: 0 2px 7px rgba(15,23,42,.035);
}

.product-detail-page #close-product-details.secondary-button:hover {
    border-color: #fdba74;
    color: #c75a0b;
    background: #fffaf5;
}

.product-detail-page .detail-main {
    width: min(100% - 32px, 1480px) !important;
    padding-top: 16px !important;
    padding-bottom: 72px !important;
}

.product-detail-page .breadcrumb {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px !important;
    padding: 7px 10px;
    overflow: hidden;
    border: 1px solid #e8ebf0;
    border-radius: 10px;
    background: rgba(255,255,255,.72);
    color: #7b8492;
    white-space: nowrap;
}

.product-detail-page .breadcrumb button,
.product-detail-page .breadcrumb span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-detail-page .detail-product-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.03fr) minmax(390px, .97fr) !important;
    align-items: start !important;
    gap: 20px !important;
}

.product-detail-page .detail-gallery,
.product-detail-page .detail-info-card,
.product-detail-page .detail-description-card,
.product-detail-page .az-public-reviews-panel {
    border: 1px solid var(--az-pdv2-line) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: var(--az-pdv2-card-shadow) !important;
}

.product-detail-page .detail-gallery {
    /* __KZ_PRODUCT_PUBLIC_CONTENT_FIX_V100__: keep the gallery in normal document
       flow so full details and customer reviews can never slide underneath it. */
    position: static !important;
    top: auto !important;
    padding: 12px !important;
    overflow: hidden;
}

.product-detail-page .detail-main-image {
    width: 100% !important;
    min-height: 0 !important;
    max-height: 560px !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    border: 1px solid #edf0f4 !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, #fbfcfd 0%, #f6f7f9 100%) !important;
}

.product-detail-page .detail-main-image img {
    width: 100% !important;
    height: 100% !important;
    padding: 8px !important;
    object-fit: contain !important;
    border-radius: 14px;
    background: #fff !important;
}

.product-detail-page .zoom-badge {
    left: 10px !important;
    bottom: 10px !important;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px !important;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 9px !important;
    background: rgba(23,32,51,.82) !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.12);
    backdrop-filter: blur(8px);
}

.product-detail-page .detail-thumbnails {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(58px, 68px)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding: 1px;
    overflow-x: auto;
}

.product-detail-page .detail-thumbnail {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    padding: 3px !important;
    border: 1px solid #dfe4eb !important;
    border-radius: 10px !important;
    background: #fff !important;
}

.product-detail-page .detail-thumbnail.is-active {
    border-color: var(--az-pdv2-orange) !important;
    box-shadow: 0 0 0 2px rgba(249,115,22,.10) !important;
}

.product-detail-page .detail-info-card {
    position: relative;
    overflow: hidden;
    padding: 24px !important;
    border-top: 3px solid var(--az-pdv2-orange) !important;
}

.product-detail-page .detail-info-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    width: 180px;
    height: 180px;
    border-radius: 0 0 0 100%;
    background: radial-gradient(circle at top right, rgba(249,115,22,.08), transparent 68%);
    pointer-events: none;
}

.product-detail-page .detail-top-meta,
.product-detail-page .detail-info-card h1,
.product-detail-page .detail-brand-category,
.product-detail-page .detail-public-rating,
.product-detail-page .cmp-detail-seller,
.product-detail-page .detail-status-row,
.product-detail-page .detail-price-panel,
.product-detail-page .detail-summary,
.product-detail-page .detail-market-facts,
.product-detail-page .quantity-order-row,
.product-detail-page .detail-assurance {
    position: relative;
    z-index: 1;
}

.product-detail-page .detail-top-meta {
    min-height: 34px;
}

.product-detail-page .detail-code {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px !important;
    border: 1px solid #e5e9ef;
    border-radius: 8px !important;
    background: #f7f9fb !important;
    color: #667085 !important;
    font-size: 9px !important;
}

.product-detail-page .share-button {
    width: 34px;
    height: 34px;
    border: 1px solid #e5e9ef;
    border-radius: 10px;
    background: #fff;
    color: #667085;
}

.product-detail-page .share-button:hover {
    border-color: #fdba74;
    color: var(--az-pdv2-orange-deep);
    background: #fffaf5;
}

.product-detail-page .detail-info-card h1 {
    margin: 12px 0 5px !important;
    color: var(--az-pdv2-ink) !important;
    font-size: clamp(24px, 2.25vw, 34px) !important;
    font-weight: 900;
    line-height: 1.28 !important;
    letter-spacing: -.35px;
}

.product-detail-page .detail-brand-category {
    margin: 0 0 8px !important;
    color: #7a8492 !important;
    font-size: 10px !important;
}

/* Prominent but compact authoritative rating, never over the product image. */
.product-detail-page .detail-info-card .detail-public-rating.az-detail-rating {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-height: 34px !important;
    margin: 3px 0 10px !important;
    padding: 6px 10px !important;
    overflow: visible !important;
    border: 1px solid #f1d49b !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #fffdf8 0%, #fff6e5 100%) !important;
    box-shadow: 0 4px 12px rgba(245,158,11,.08) !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

.product-detail-page .detail-info-card .az-detail-rating .az-public-rating-stars--detail {
    font-size: 16px !important;
}

.product-detail-page .detail-info-card .az-detail-rating > small {
    font-size: 11px !important;
}

.product-detail-page .cmp-detail-seller {
    margin: 8px 0 10px !important;
    padding: 9px 10px !important;
    border: 1px solid #e6e9ef !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #fbfcfd 0%, #f8fafc 100%) !important;
    box-shadow: none !important;
}

.product-detail-page .detail-status-row {
    gap: 6px !important;
    margin: 9px 0 0 !important;
}

.product-detail-page .detail-status-row .stock-badge {
    min-height: 28px;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
}

.product-detail-page .detail-price-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
    gap: 8px !important;
    margin: 12px 0 10px !important;
    padding: 8px !important;
    border: 1px solid #f4d9be !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #fff8f0 0%, #fffdfb 70%) !important;
}

.product-detail-page .detail-price-panel > div {
    min-width: 0;
    padding: 11px 12px !important;
    border: 1px solid rgba(249,115,22,.11);
    border-radius: 10px;
    background: rgba(255,255,255,.88);
}

.product-detail-page .detail-price-panel small {
    display: block;
    margin-bottom: 4px;
    color: #93603f !important;
    font-size: 8px !important;
    font-weight: 850;
}

.product-detail-page .detail-price-panel strong {
    display: block;
    overflow: hidden;
    color: var(--az-pdv2-green) !important;
    font-size: clamp(22px, 2vw, 30px) !important;
    font-weight: 950;
    line-height: 1.1 !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.product-detail-page .detail-price-panel > div + div strong {
    color: var(--az-pdv2-orange-deep) !important;
    font-size: clamp(17px, 1.6vw, 23px) !important;
}

.product-detail-page .detail-summary {
    margin: 9px 0 !important;
    color: #667085 !important;
    font-size: 10px !important;
    line-height: 1.75 !important;
}

.product-detail-page .detail-market-facts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 9px 0 11px !important;
}

.product-detail-page .detail-market-facts article {
    min-width: 0;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 9px 8px !important;
    border: 1px solid #e8ebef;
    border-radius: 10px !important;
    background: #fafbfc !important;
}

.product-detail-page .detail-market-facts small {
    color: #98a2b3 !important;
    font-size: 7.5px !important;
}

.product-detail-page .detail-market-facts b {
    margin-top: 3px;
    overflow: hidden;
    color: #344054 !important;
    font-size: 9px !important;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-detail-page .quantity-order-row {
    display: grid !important;
    grid-template-columns: minmax(118px, .8fr) repeat(3, minmax(96px, 1fr)) !important;
    align-items: stretch !important;
    gap: 7px !important;
    margin-top: 10px !important;
    padding: 8px !important;
    border: 1px solid #e6e9ef !important;
    border-radius: 13px !important;
    background: #fafbfc !important;
}

.product-detail-page .quantity-order-row .quantity-control,
.product-detail-page .quantity-order-row > button {
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
}

.product-detail-page .quantity-order-row > button {
    border-radius: 10px !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

.product-detail-page .detail-assurance {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

.product-detail-page .detail-assurance > div {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px !important;
    border: 1px solid #edf0f4;
    border-radius: 9px !important;
    background: #fbfcfd !important;
    color: #667085 !important;
    font-size: 7.8px !important;
}

.product-detail-page .detail-assurance i {
    color: var(--az-pdv2-orange);
}

.product-detail-page .detail-description-card {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr) !important;
    gap: 22px !important;
    padding: 22px !important;
}

.product-detail-page .detail-description-card h2 {
    margin: 0 0 9px !important;
    color: var(--az-pdv2-ink) !important;
    font-size: 17px !important;
}

.product-detail-page .detail-description-card p {
    margin: 0;
    color: #667085 !important;
    font-size: 10.5px !important;
    line-height: 1.95 !important;
}

.product-detail-page .specification-table {
    overflow: hidden;
    border: 1px solid #e7eaf0 !important;
    border-radius: 11px !important;
    background: #fff;
}

.product-detail-page .detail-specifications-block {
    grid-column: 1 / -1;
    min-width: 0;
}

.product-detail-page .detail-feature-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-detail-page .detail-feature-list li {
    position: relative;
    padding-inline-start: 20px;
    color: #344054;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.7;
}

.product-detail-page .detail-feature-list li::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    color: #059669;
    font-weight: 950;
}

.product-detail-page .detail-features-empty {
    margin: 0 !important;
    color: #98a2b3 !important;
    font-size: 9.5px !important;
}

.product-detail-page .specification-table td {
    padding: 9px 10px !important;
    font-size: 9px !important;
}

.product-detail-page .public-product-reviews-host {
    grid-column: 1 / -1 !important;
    min-width: 0;
    scroll-margin-top: 86px;
}

.product-detail-page .az-public-reviews-panel {
    overflow: hidden !important;
}

.product-detail-page .az-public-reviews-heading {
    background: linear-gradient(180deg, #fff 0%, #fffaf4 100%) !important;
}

.product-detail-page .related-section {
    margin-top: 22px !important;
    padding-top: 2px;
}

/* Tablet: keep the page rich but avoid a squeezed two-column hero. */
@media (max-width: 1120px) {
    .product-detail-page .detail-product-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .product-detail-page .detail-gallery {
        position: static !important;
        top: auto !important;
    }
    .product-detail-page .detail-main-image {
        max-height: 600px !important;
    }
    .product-detail-page .detail-description-card {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile: clean one-column hero, compact facts, protected existing bottom actions. */
@media (max-width: 760px) {
    .product-detail-page .detail-header {
        min-height: 54px;
    }
    .product-detail-page .detail-header-inner {
        min-height: 54px !important;
        gap: 8px !important;
    }
    .product-detail-page .detail-header .market-brand small {
        display: none;
    }
    .product-detail-page #close-product-details.secondary-button {
        min-height: 38px;
        padding-inline: 10px;
        font-size: 9px;
    }
    .product-detail-page .detail-main {
        width: min(100% - 16px, 760px) !important;
        padding-top: 8px !important;
        padding-bottom: 34px !important;
    }
    .product-detail-page .breadcrumb {
        min-height: 30px;
        margin-bottom: 7px !important;
        padding: 5px 7px;
        font-size: 8px;
    }
    .product-detail-page .detail-product-grid {
        gap: 9px !important;
    }
    .product-detail-page .detail-gallery,
    .product-detail-page .detail-info-card,
    .product-detail-page .detail-description-card,
    .product-detail-page .az-public-reviews-panel {
        border-radius: 14px !important;
        box-shadow: 0 7px 22px rgba(15,23,42,.055) !important;
    }
    .product-detail-page .detail-gallery {
        padding: 7px !important;
    }
    .product-detail-page .detail-main-image {
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1 / .83 !important;
        border-radius: 11px !important;
    }
    .product-detail-page .detail-main-image img {
        padding: 4px !important;
        border-radius: 10px;
    }
    .product-detail-page .zoom-badge {
        min-height: 26px;
        left: 7px !important;
        bottom: 7px !important;
        padding-inline: 7px !important;
        font-size: 7px !important;
    }
    .product-detail-page .detail-thumbnails {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin-top: 6px !important;
    }
    .product-detail-page .detail-thumbnail {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        min-width: 0 !important;
    }
    .product-detail-page .detail-info-card {
        padding: 12px !important;
        border-top-width: 2px !important;
    }
    .product-detail-page .detail-info-card::before {
        width: 100px;
        height: 100px;
    }
    .product-detail-page .detail-info-card h1 {
        margin-top: 8px !important;
        font-size: 19px !important;
        line-height: 1.32 !important;
    }
    .product-detail-page .detail-brand-category {
        margin-bottom: 5px !important;
        font-size: 8px !important;
    }
    .product-detail-page .detail-info-card .detail-public-rating.az-detail-rating {
        min-height: 31px !important;
        margin: 2px 0 7px !important;
        padding: 5px 8px !important;
    }
    .product-detail-page .detail-info-card .az-detail-rating .az-public-rating-stars--detail {
        font-size: 14px !important;
    }
    .product-detail-page .detail-price-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin: 8px 0 !important;
        padding: 5px !important;
        border-radius: 10px !important;
    }
    .product-detail-page .detail-price-panel > div {
        padding: 8px 7px !important;
        border-radius: 8px !important;
    }
    .product-detail-page .detail-price-panel strong {
        font-size: 17px !important;
    }
    .product-detail-page .detail-price-panel > div + div strong {
        font-size: 14px !important;
    }
    .product-detail-page .detail-market-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin: 7px 0 !important;
    }
    .product-detail-page .detail-market-facts article {
        min-height: 52px;
        padding: 6px 5px !important;
        border-radius: 8px !important;
    }
    .product-detail-page .detail-market-facts small {
        font-size: 6.6px !important;
    }
    .product-detail-page .detail-market-facts b {
        font-size: 7.8px !important;
    }
    /* Existing mobile action behavior from Phase 3 remains authoritative. */
    .product-detail-page .quantity-order-row {
        margin-top: 7px !important;
        padding: 6px !important;
        gap: 5px !important;
    }
    .product-detail-page .detail-assurance {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin-top: 7px !important;
    }
    .product-detail-page .detail-assurance > div {
        min-height: 32px;
        padding: 5px 6px !important;
        font-size: 6.9px !important;
    }
    .product-detail-page .detail-description-card {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 13px !important;
    }
    .product-detail-page .detail-description-card h2 {
        font-size: 15px !important;
    }
    .product-detail-page .detail-description-card p {
        font-size: 9.5px !important;
        line-height: 1.85 !important;
    }
    .product-detail-page .specification-table td {
        padding: 7px !important;
        font-size: 8px !important;
    }
    .product-detail-page .public-product-reviews-host {
        scroll-margin-top: 62px;
    }
}

@media (max-width: 390px) {
    .product-detail-page .detail-main {
        width: min(100% - 12px, 390px) !important;
    }
    .product-detail-page .detail-main-image {
        aspect-ratio: 1 / .88 !important;
    }
    .product-detail-page .detail-info-card {
        padding: 10px !important;
    }
    .product-detail-page .detail-info-card h1 {
        font-size: 17px !important;
    }
}

html[data-theme="dark"] .product-detail-page {
    background: #0f172a !important;
}
html[data-theme="dark"] .product-detail-page .detail-gallery,
html[data-theme="dark"] .product-detail-page .detail-info-card,
html[data-theme="dark"] .product-detail-page .detail-description-card,
html[data-theme="dark"] .product-detail-page .az-public-reviews-panel {
    border-color: #334155 !important;
    background: #111827 !important;
}
html[data-theme="dark"] .product-detail-page .detail-info-card h1,
html[data-theme="dark"] .product-detail-page .detail-description-card h2 {
    color: #f8fafc !important;
}