/* AfghanZone Public Product Detail Final Polish v1.0.0
   UI-only final compatibility layer.
   Fixes the mobile duplicate action row / cart overflow caused by the premium V2 override,
   and tightens the desktop + mobile Product Detail presentation.
   No product, cart, WhatsApp, review, rating, inventory, seller-routing, or backend logic changes. */

:root {
    --az-pdfp-orange: #f97316;
    --az-pdfp-orange-deep: #c95209;
    --az-pdfp-green: #079669;
    --az-pdfp-green-deep: #057654;
    --az-pdfp-ink: #172033;
    --az-pdfp-muted: #667085;
    --az-pdfp-line: #e7ebf0;
    --az-pdfp-soft: #f8fafc;
    --az-pdfp-warm: #fff8ef;
    --az-pdfp-shadow: 0 18px 48px rgba(15, 23, 42, .075);
}

/* -----------------------------
   Desktop / tablet detail shell
   ----------------------------- */

.product-detail-page .detail-main {
    overflow: visible !important;
}

.product-detail-page .detail-product-grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr) !important;
    gap: 22px !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-color: var(--az-pdfp-line) !important;
    box-shadow: var(--az-pdfp-shadow) !important;
}

.product-detail-page .detail-gallery {
    align-self: start !important;
}

.product-detail-page .detail-info-card {
    align-self: start !important;
    border-top: 3px solid var(--az-pdfp-orange) !important;
}

.product-detail-page .detail-info-card h1 {
    text-wrap: balance;
}

.product-detail-page .detail-public-rating {
    max-width: 100% !important;
}

/* Never allow a rating badge to float over the product image/gallery. */
.product-detail-page .detail-gallery .detail-public-rating,
.product-detail-page .detail-gallery .az-detail-rating,
.product-detail-page .detail-main-image .detail-public-rating,
.product-detail-page .detail-main-image .az-detail-rating {
    display: none !important;
}

/* Seller/status/price blocks read as one coherent purchase panel. */
.product-detail-page .cmp-detail-seller {
    border-color: #e7ebef !important;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
}

.product-detail-page .detail-status-row {
    align-items: center !important;
}

.product-detail-page .detail-price-panel {
    box-shadow: inset 0 0 0 1px rgba(249,115,22,.025) !important;
}

.product-detail-page .detail-market-facts article {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

/* Desktop purchase controls: DOM contains exactly 3 children.
   Previous V2 defined four tracks and created a dead/empty column. */
.product-detail-page .quantity-order-row {
    display: grid !important;
    grid-template-columns: minmax(112px, .78fr) minmax(138px, 1fr) minmax(166px, 1.18fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    padding: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e8ebef !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #fbfcfd 0%, #f8fafc 100%) !important;
}

.product-detail-page .quantity-order-row > *,
.product-detail-page .quantity-order-row .quantity-control,
.product-detail-page .quantity-order-row > button {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.product-detail-page .quantity-order-row .quantity-control {
    min-height: 44px !important;
    height: 44px !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    overflow: hidden !important;
    border: 1px solid #dfe5eb !important;
    border-radius: 11px !important;
    background: #fff !important;
}

.product-detail-page .quantity-order-row .quantity-control button {
    min-width: 0 !important;
    border: 0 !important;
    background: #f8fafc !important;
    color: #475467 !important;
    font-size: 16px !important;
    font-weight: 850 !important;
}

.product-detail-page .quantity-order-row .quantity-control input {
    min-width: 0 !important;
    padding: 0 3px !important;
    background: #fff !important;
    color: var(--az-pdfp-ink) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.product-detail-page .quantity-order-row > button {
    min-height: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 11px !important;
    overflow: hidden !important;
    border-radius: 11px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.product-detail-page .quantity-order-row .detail-cart-button {
    border: 1px solid #fed7aa !important;
    background: linear-gradient(180deg, #fffaf4 0%, #fff2e5 100%) !important;
    color: var(--az-pdfp-orange-deep) !important;
}

.product-detail-page .quantity-order-row .detail-whatsapp-button {
    border: 1px solid rgba(5,150,105,.18) !important;
    background: linear-gradient(135deg, var(--az-pdfp-green) 0%, var(--az-pdfp-green-deep) 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(5,150,105,.13) !important;
}

.product-detail-page .quantity-order-row > button:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.product-detail-page .detail-description-card {
    overflow: hidden !important;
}

.product-detail-page .public-product-reviews-host {
    min-width: 0 !important;
}

/* -----------------------------
   Tablet
   ----------------------------- */

@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;
    }

    .product-detail-page .quantity-order-row {
        grid-template-columns: minmax(112px, .72fr) minmax(150px, 1fr) minmax(175px, 1.15fr) !important;
    }
}

/* -----------------------------
   Mobile
   ----------------------------- */

@media (max-width: 760px) {
    /* Root-cause correction:
       base home.css intentionally hides the desktop action row on mobile.
       public-product-detail-premium-v2.css re-enabled it with display:grid!important.
       Restore the intended single mobile action surface. */
    .product-detail-page .quantity-order-row {
        display: none !important;
    }

    .product-detail-page .detail-main {
        width: min(100% - 14px, 760px) !important;
        padding-bottom: 18px !important;
    }

    .product-detail-page .detail-product-grid {
        gap: 10px !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: 16px !important;
        box-shadow: 0 8px 24px rgba(15,23,42,.055) !important;
    }

    .product-detail-page .detail-info-card {
        overflow: hidden !important;
        padding: 13px !important;
    }

    .product-detail-page .detail-info-card h1 {
        margin-top: 8px !important;
        font-size: clamp(18px, 5.1vw, 22px) !important;
    }

    .product-detail-page .detail-info-card .detail-public-rating.az-detail-rating {
        width: max-content !important;
        max-width: 100% !important;
        min-height: 32px !important;
        padding: 5px 9px !important;
        gap: 7px !important;
    }

    .product-detail-page .cmp-detail-seller {
        margin-block: 7px !important;
        padding: 8px 9px !important;
    }

    .product-detail-page .detail-status-row {
        gap: 5px !important;
        margin-top: 7px !important;
    }

    .product-detail-page .detail-status-row .stock-badge {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .product-detail-page .detail-price-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 6px !important;
    }

    .product-detail-page .detail-price-panel > div {
        min-width: 0 !important;
    }

    .product-detail-page .detail-price-panel strong {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .product-detail-page .detail-market-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .product-detail-page .detail-market-facts article {
        min-width: 0 !important;
    }

    /* The one authoritative mobile purchase action bar. */
    .product-detail-page + .mobile-product-action,
    .product-detail-page .mobile-product-action,
    #mobile-product-action {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(92px, .9fr) 48px minmax(128px, 1.28fr) !important;
        align-items: stretch !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden !important;
        border-top: 1px solid rgba(148,163,184,.24) !important;
        background: rgba(255,255,255,.965) !important;
        box-shadow: 0 -10px 30px rgba(15,23,42,.08) !important;
        backdrop-filter: blur(16px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
    }

    #mobile-product-action > *,
    #mobile-product-action .quantity-control,
    #mobile-product-action > button {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    #mobile-product-action .quantity-control {
        height: 46px !important;
        min-height: 46px !important;
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
        overflow: hidden !important;
        border: 1px solid #dfe5eb !important;
        border-radius: 12px !important;
        background: #fff !important;
    }

    #mobile-product-action .quantity-control button {
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: #f8fafc !important;
        color: #344054 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    #mobile-product-action .quantity-control input {
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 2px !important;
        border: 0 !important;
        outline: 0 !important;
        background: #fff !important;
        color: var(--az-pdfp-ink) !important;
        text-align: center !important;
        font-size: 11px !important;
        font-weight: 900 !important;
    }

    #mobile-product-action > button {
        height: 46px !important;
        min-height: 46px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 0 8px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    #mobile-product-action .mobile-cart-add {
        width: auto !important;
        min-width: 0 !important;
        border: 1px solid #fed7aa !important;
        background: linear-gradient(180deg, #fffaf4 0%, #fff1e2 100%) !important;
        color: var(--az-pdfp-orange-deep) !important;
        transform: none !important;
        translate: none !important;
        inset: auto !important;
    }

    #mobile-product-action > button:last-child {
        border: 1px solid rgba(5,150,105,.18) !important;
        background: linear-gradient(135deg, var(--az-pdfp-green) 0%, var(--az-pdfp-green-deep) 100%) !important;
        color: #fff !important;
        box-shadow: 0 7px 18px rgba(5,150,105,.13) !important;
    }

    #mobile-product-action > button:disabled {
        opacity: .5 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 390px) {
    #mobile-product-action {
        grid-template-columns: minmax(82px, .86fr) 44px minmax(112px, 1.24fr) !important;
        gap: 6px !important;
        padding-inline: 7px !important;
    }

    #mobile-product-action .quantity-control {
        grid-template-columns: 29px minmax(0, 1fr) 29px !important;
    }

    #mobile-product-action > button {
        padding-inline: 5px !important;
        font-size: 8px !important;
    }
}

/* Hidden outside the mobile breakpoint; preserve the base desktop behavior. */
@media (min-width: 761px) {
    #mobile-product-action {
        display: none !important;
    }
}

/* Dark mode compatibility */
html[data-theme="dark"] #mobile-product-action {
    border-top-color: #334155 !important;
    background: rgba(15,23,42,.97) !important;
}
html[data-theme="dark"] #mobile-product-action .quantity-control,
html[data-theme="dark"] #mobile-product-action .quantity-control input {
    border-color: #334155 !important;
    background: #111827 !important;
    color: #f8fafc !important;
}

/* __KZ_PRODUCT_GALLERY_LOCK_V106__
   Desktop root-cause fix:
   - gallery + purchase/info stay inside one top hero containing block
   - full details/specifications/reviews begin AFTER that hero
   - sticky gallery is therefore bounded by the hero and cannot descend beside lower content */
@media (min-width: 1121px) {
    .product-detail-page .detail-product-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 20px !important;
    }

    .product-detail-page .detail-hero-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr) !important;
        align-items: start !important;
        gap: 22px !important;
        min-width: 0 !important;
    }

    .product-detail-page .detail-hero-grid > .detail-gallery {
        position: sticky !important;
        top: 80px !important;
        align-self: start !important;
        z-index: 1 !important;
        min-width: 0 !important;
    }

    .product-detail-page .detail-hero-grid > .detail-info-card {
        align-self: start !important;
        min-width: 0 !important;
    }

    .product-detail-page .detail-description-card,
    .product-detail-page .public-product-reviews-host {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 1120px) {
    .product-detail-page .detail-hero-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        min-width: 0 !important;
    }

    .product-detail-page .detail-hero-grid > .detail-gallery {
        position: static !important;
        top: auto !important;
    }
}

/* __KZ_MOBILE_FEATURE_CHECK_INPUT_STABILITY_V100__
   Mobile-only public-page fixes:
   1) Features always render with the same green checkmark style as desktop.
   2) Editable fields use >=16px computed font size on mobile so iOS does not auto-zoom
      when Search / quantity / order/customer fields receive focus.
   Desktop layout and desktop typography are untouched. */
@media (max-width: 760px) {
    .product-detail-page .detail-feature-list {
        display: grid !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .product-detail-page .detail-feature-list > li {
        position: relative !important;
        margin: 0 !important;
        padding-inline-start: 22px !important;
        list-style: none !important;
    }

    .product-detail-page .detail-feature-list > li::marker {
        content: '' !important;
        font-size: 0 !important;
    }

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

    body.az-home-v2 input[type="search"],
    body.az-home-v2 input[type="text"],
    body.az-home-v2 input[type="tel"],
    body.az-home-v2 input[type="email"],
    body.az-home-v2 input[type="number"],
    body.az-home-v2 input[type="password"],
    body.az-home-v2 input[type="date"],
    body.az-home-v2 input[type="time"],
    body.az-home-v2 input[type="url"],
    body.az-home-v2 input:not([type]),
    body.az-home-v2 textarea,
    body.az-home-v2 select {
        font-size: 16px !important;
    }

    html {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}