/**
 * Truthforge Nuclear — Single Product Mobile Responsiveness Pass
 * Scope: body.single-product ONLY. Locked pages are untouched.
 *
 * Fixes:
 *   1. Horizontal overflow from 100vw bleed on tf-atc-row
 *   2. Uneven section spacing / rhythm
 *   3. Breadcrumb cramping
 *   4. Product title sizing
 *   5. Buy box stacking + button sizing
 *   6. Trust box spacing
 *   7. Accordion spacing
 *   8. Cross-sell heading/card spacing
 *   9. Footer transition gap
 *  10. Touch-safe tap targets throughout
 *
 * Breakpoints tested: 320px | 375px | 480px | 768px
 */

/* ============================================================
   0. MOBILE OVERFLOW KILL — body.single-product scope
   ============================================================ */
body.single-product {
    overflow-x: hidden;
    max-width: 100vw;
}

body.single-product *,
body.single-product *::before,
body.single-product *::after {
    box-sizing: border-box;
}

/* ============================================================
   1. TOP-LEVEL GRID — collapse cleanly on mobile
   ============================================================ */
@media (max-width: 1100px) {
    body.single-product .product-top-grid-nuclear {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        border-bottom: 1px solid var(--nuclear-border);
    }
}

/* ============================================================
   2. GALLERY COLUMN — stack above content, no overflow
   ============================================================ */
@media (max-width: 1100px) {
    body.single-product .product-gallery-column {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Main WooCommerce gallery wrapper */
    body.single-product .woocommerce-product-gallery {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.single-product .woocommerce div.product div.images.woocommerce-product-gallery {
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Main image wrapper — no border-radius on mobile for full-bleed */
    body.single-product .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background: #000 !important;
        width: 100% !important;
    }

    /* Limit the height of the product gallery main image to fit the viewport */
    body.single-product .woocommerce-product-gallery__image img {
        max-height: 45vh !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    /* Thumbnails — horizontal strip, scroll-friendly */
    body.single-product .woocommerce div.product div.images .flex-control-thumbs {
        padding: 12px 16px !important;
        margin: 0 !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.single-product .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
        display: none !important;
    }

    body.single-product .woocommerce div.product div.images .flex-control-thumbs li {
        flex: 0 0 64px !important;
        width: 64px !important;
    }

    body.single-product .woocommerce div.product div.images .flex-control-thumbs li img {
        width: 64px !important;
        height: 64px !important;
    }
}

/* Disable scan/hover on touch — gallery is static on mobile */
@media (hover: none) and (pointer: coarse) {
    body.single-product .woocommerce-product-gallery__image img {
        transform: none !important;
        transition: none !important;
        filter: none !important;
    }
}

/* ============================================================
   3. INFO COLUMN — contained, padded, no overflow
   ============================================================ */
@media (max-width: 1100px) {
    body.single-product .product-info-column-nuclear {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px var(--tf-container-px-mobile) var(--tf-mobile-space-xl) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
}

@media (max-width: 480px) {
    body.single-product .product-info-column-nuclear {
        padding: 10px var(--tf-container-px-small) var(--tf-section-padding-v-small) !important;
    }
}

/* ============================================================
   4. BREADCRUMBS — readable, not cramped, left-aligned
   ============================================================ */
@media (max-width: 1100px) {
    body.single-product .tf-product-info-breadcrumbs-nuclear {
        margin-bottom: 8px !important;
    }

    body.single-product .shop-breadcrumbs-nuclear {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto 8px !important;
        padding: 0 16px !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
    }
    body.single-product .shop-breadcrumbs-nuclear::-webkit-scrollbar {
        display: none !important;
    }

    body.single-product .breadcrumb-link-muted,
    body.single-product .breadcrumb-separator,
    body.single-product .breadcrumb-current {
        font-size: 10px !important;
        display: inline-block !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    body.single-product .breadcrumb-current {
        max-width: 110px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 375px) {
    body.single-product .breadcrumb-current {
        max-width: 80px !important;
    }
}


/* ============================================================
   5. COLLECTION LABEL — purple eyebrow
   ============================================================ */
@media (max-width: 1100px) {
    html body.single-product .tf-product-cat-label {
        margin-bottom: 12px !important;
        font-size: 10px !important;
        letter-spacing: 0.2em !important;
        text-align: center !important;
        display: block !important;
    }
}

/* ============================================================
   6. PRODUCT TITLE — strong, not oversized, wraps cleanly
   ============================================================ */
@media (max-width: 1100px) {
    /* Adjusted to center-align to match shop page */
    html body.single-product h1.product_title.entry-title,
    html body.single-product h1.product_title {
        font-size: var(--tf-font-h1-mobile) !important;
        line-height: var(--tf-lh-heading) !important;
        text-align: center !important;
        margin-bottom: var(--tf-mobile-space-md) !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ============================================================
   7. PRICE + SOLD ROW — aligned, not centered
   ============================================================ */
@media (max-width: 1100px) {
    /* Adjusted to center-align to match shop page */
    html body.single-product .price-sold-row-nuclear {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important;
        margin-bottom: 12px !important;
        flex-wrap: wrap !important;
    }

    html body.single-product .sold-count-badge-nuclear {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }
}

/* ============================================================
   8. SHORT DESCRIPTION — compact, readable
   ============================================================ */
@media (max-width: 1100px) {
    html body.single-product .tf-nuclear-short-description {
        font-size: 13px !important;
        line-height: 1.65 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }
}

/* ============================================================
   9. VARIATIONS — swatches/sizes tap-friendly
   ============================================================ */
@media (max-width: 1100px) {
    body.single-product .variations_form {
        margin-bottom: 0 !important;
    }

    body.single-product .variations tr {
        margin-bottom: 12px !important;
    }


    /* Size/color swatch items — minimum 44px tap target */
    body.single-product .variations .value .variable-item {
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    body.single-product .variations .value .variable-items-wrapper {
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* ============================================================
   10. BUY BOX — clean stacked layout, no horizontal bleed
   ============================================================ */
@media (max-width: 1100px) {
    /* CRITICAL: Kill the screen-bleed hack from sw-nuclear-overrides.css ln 830-838 */
    body.single-product .tf-atc-row,
    body.single-product .tf-buy-box-container-lockdown .tf-atc-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* All buy box children: full width */
    body.single-product .tf-atc-row > *,
    body.single-product .tf-buy-box-container-lockdown .tf-atc-row > * {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
    }

    /* Quantity control — full width, contained */
    body.single-product .tf-buy-box-container-lockdown .tf-atc-row .quantity {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 4px !important;
    }

    /* ATC button — full width, 48px to match global mobile ATC rule, standard radius */
    body.single-product .tf-buy-box-container-lockdown .tf-atc-row .single_add_to_cart_button,
    body.single-product #primary div.product form.cart .single_add_to_cart_button {
        width: 100% !important;
        flex: none !important;
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 4px !important; /* Not 0 — keep nuclear radius on single product */
        margin: 0 !important;
        font-size: 14px !important;
    }

    /* Wishlist button (TI Wishlist plugin) — stays a compact icon button, not full width */
    html body.single-product .tf-buy-box-container-lockdown .tinv-wraper a.tinvwl_add_to_wishlist_button {
        width: 44px !important;
        height: 44px !important;
        border-radius: 4px !important;
    }

    /* WhatsApp row — full width */
    body.single-product .tf-whatsapp-btn,
    body.single-product #tf-whatsapp-order-btn {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 4px !important;
        height: 48px !important;
        min-height: 48px !important;
    }

    /* WhatsApp row wrapper — no overflow */
    body.single-product .tf-whatsapp-row {
        width: 100% !important;
        margin-top: 8px !important;
    }
}

/* ============================================================
   11. TRUST/SERVICE BOX — tight, not too loose
   ============================================================ */
@media (max-width: 1100px) {
    body.single-product .tf-trust-badges-box-nuclear {
        margin: 20px 0 !important;
        padding-top: 20px !important;
        gap: 14px !important;
    }

    body.single-product .tf-trust-badges-box-nuclear .trust-badge-item {
        gap: 10px !important;
    }

    body.single-product .tf-trust-badges-box-nuclear span {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    body.single-product .tf-trust-badges-box-nuclear .trust-icon {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================================
   12. ACCORDIONS — consistent row height, tappable
   ============================================================ */
@media (max-width: 1100px) {
    body.single-product .product-details-accordion-wrapper {
        margin-top: 24px !important;
    }

    body.single-product .tf-accordion-header {
        padding: 16px 0 !important;
        min-height: 52px !important; /* Safe tap target */
        font-size: 11px !important;
        letter-spacing: 0.12em !important;
    }

    body.single-product .tf-accordion-inner {
        font-size: 13px !important;
        line-height: 1.65 !important;
        padding-bottom: 16px !important;
    }
}

/* ============================================================
   13. CROSS-SELL SECTION — Absolute Parity with /shop
   ============================================================ */
@media (max-width: 1100px) {
    html body.single-product .shop-products-section-total-grid {
        margin: 0 !important;
        padding: var(--tf-section-padding-v-mobile) 0 !important; /* Unified Section Padding, side padding handled by global rule */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: #000 !important;
    }

    /* Heading wrapper: Match Shop Header Centering */
    html body.single-product .shop-products-section-total-grid .tf-grid-heading-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: 32px !important;
        padding: 0 !important;
    }

    html body.single-product .shop-products-section-total-grid .tf-grid-heading-wrapper > div {
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* Section Heading — Bold, Centered, Oswald Italic */
    html body.single-product .tf-related-heading {
        font-family: 'Oswald', sans-serif !important;
        font-weight: 900 !important;
        font-style: italic !important;
        font-size: 32px !important;
        line-height: 1.0 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        margin-bottom: 8px !important;
        color: #fff !important;
    }

    /* Subtitle */
    html body.single-product .grid-subtitle {
        font-size: 11px !important;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.4) !important;
        margin-bottom: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
    }

    /* "SEE EVERYTHING →" link */
    html body.single-product .tf-view-all-link-nuke {
        margin: 0 auto !important;
        display: inline-block !important;
        text-align: center !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.1em !important;
        padding: 8px 16px !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 4px !important;
        text-transform: uppercase !important;
    }

    /* Product card grid — ABSOLUTE 1-COLUMN STACK */
    html body.single-product .shop-products-section-total-grid .grid-container-parity {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--tf-mobile-space-xl) !important; /* 32px Master Gap */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

@media (max-width: 768px) {
    html body.single-product .shop-products-section-total-grid .grid-container-parity {
        grid-template-columns: 1fr !important;
        gap: var(--tf-mobile-space-xl) !important; /* 32px Master Gap */
    }
}

/* ============================================================
   14. FOOTER TRANSITION — max 48px gap, no black void
   ============================================================ */
@media (max-width: 1100px) {
    body.single-product .shop-products-section-total-grid {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* The woocommerce wrapper that contains everything */
    body.single-product .woocommerce.single-product {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* The product div itself */
    body.single-product #primary,
    body.single-product .content-area {
        padding-bottom: 48px !important;
    }

    /* Footer sits immediately after — no phantom gap */
    body.single-product .tf-site-footer {
        margin-top: 0 !important;
    }
}

/* ============================================================
   15. PRODUCT-LEVEL ANCHOR PADDING FIX
       Scope: single product only — override global 50px anchor
   ============================================================ */
@media (max-width: 768px) {
    body.single-product #primary,
    body.single-product .tf-shop-hero-section {
        padding-top: 0 !important; /* Gallery bleeds to top, info column has own padding */
    }
}

/* ============================================================
   16. HORIZONTAL OVERFLOW GUARD — all direct children
   ============================================================ */
body.single-product .product-info-column-nuclear > *,
body.single-product .tf-buy-box-container-lockdown,
body.single-product .tf-buy-box-container-lockdown > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================================
   17. 320px EDGE CASE HARDENING
   ============================================================ */
@media (max-width: 375px) {
    body.single-product .product-info-column-nuclear {
        padding-left: var(--tf-container-px-small) !important;
        padding-right: var(--tf-container-px-small) !important;
    }

    body.single-product .shop-products-section-total-grid {
        padding-left: var(--tf-container-px-small) !important;
        padding-right: var(--tf-container-px-small) !important;
    }

    body.single-product .tf-related-heading {
        font-size: var(--tf-font-h3-mobile) !important;
    }

    body.single-product .variations .value .variable-item {
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 12px !important;
    }
}

/* ============================================================
   18. 768px TABLET — two-column BUY BOX (qty + ATC inline)
   ============================================================ */
@media (min-width: 600px) and (max-width: 1100px) {
    body.single-product .tf-buy-box-container-lockdown .tf-atc-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    body.single-product .tf-buy-box-container-lockdown .tf-atc-row .quantity {
        width: 130px !important;
        flex: 0 0 130px !important;
        max-width: 130px !important;
    }

    body.single-product .tf-buy-box-container-lockdown .tf-atc-row .single_add_to_cart_button {
        flex: 1 1 0 !important;
        width: auto !important;
    }
}

/* ============================================================
   19. PRODUCT CARD WIDTH GUARD — cross-sells only on single product
   ============================================================ */
@media (max-width: 1100px) {
    body.single-product .shop-products-section-total-grid .nuclear-product-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.single-product .shop-products-section-total-grid .card-image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.single-product .shop-products-section-total-grid .card-main-image {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* Card footer: stretch for ATC width; text centering applied separately */
    body.single-product .shop-products-section-total-grid .card-footer-nuclear {
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.single-product .shop-products-section-total-grid .card-product-title,
    body.single-product .shop-products-section-total-grid .card-price-row-nuclear {
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ============================================================
   20. CARD META LINE — prevent horizontal text overflow
   ============================================================ */
html body.single-product .shop-products-section-total-grid .card-meta-line {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    letter-spacing: 0.1em !important;
    font-size: 10px !important;
    text-align: center !important;
    margin-bottom: 12px !important;
}

/* ============================================================
   21. CARD CENTERING FIX — Match Shop Card Aesthetic
   ============================================================ */
@media (max-width: 1100px) {
    html body.single-product .shop-products-section-total-grid .nuclear-product-card {
        text-align: center !important;
        margin-bottom: 0 !important;
        background: transparent !important;
    }

    html body.single-product .shop-products-section-total-grid .card-product-title {
        font-family: 'Oswald', sans-serif !important;
        font-weight: 700 !important;
        font-style: italic !important;
        text-transform: uppercase !important;
        text-align: center !important;
        font-size: 18px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
        color: #fff !important;
        display: block !important;
        width: 100% !important;
    }

    html body.single-product .shop-products-section-total-grid .card-price-row-nuclear {
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: var(--tf-mobile-space-md) !important;
    }

    html body.single-product .shop-products-section-total-grid .card-price-value {
        font-size: 16px !important;
        font-weight: 900 !important;
        color: #fff !important;
    }
}

/* ============================================================
   22. CROSS-SELL HEADING — no clip, wraps on all screens
       "MORE FROM DISCIPLINE WEAR" at 42px clips on any screen
       below ~600px because of italic + uppercase + no word-break.
   ============================================================ */
@media (max-width: 767px) {
    body.single-product .tf-related-heading {
        font-size: var(--tf-font-h2-mobile) !important;
        line-height: var(--tf-lh-heading) !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* Prevent the italic purple span from overflowing */
    body.single-product .tf-related-heading .purple-text {
        display: inline !important;
        word-break: break-word !important;
    }
}

@media (max-width: 480px) {
    body.single-product .tf-related-heading {
        font-size: 22px !important;
    }
}

@media (max-width: 375px) {
    body.single-product .tf-related-heading {
        font-size: 20px !important;
    }
}

/* ============================================================
   23. CROSS-SELL SECTION PADDING — absolute container lock
       Prevents any inherited padding from causing right-side clip.
   ============================================================ */
@media (max-width: 767px) {
    body.single-product .shop-products-section-total-grid {
        padding-left: var(--tf-container-px-mobile) !important;
        padding-right: var(--tf-container-px-mobile) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* The heading wrapper must not exceed container */
    body.single-product .tf-grid-heading-wrapper {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 375px) {
    body.single-product .shop-products-section-total-grid {
        padding-left: var(--tf-container-px-small) !important;
        padding-right: var(--tf-container-px-small) !important;
    }
}

/* ============================================================
   24. MOBILE SIZING & ALIGNMENT STABILITY (320px-768px PDP Fixes)
   ============================================================ */
@media (max-width: 768px) {
    /* Override primary margin pull-up to prevent switcher overlap */
    body.single-product #primary {
        margin-top: 0 !important;
    }

    /* Sticky header alignment with WordPress Admin Bar */
    .admin-bar .site-header {
        top: 46px !important;
    }

    /* Currency selector styling: own row below header, tabs centered */
    body.single-product .tf-country-switcher {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 12px 16px !important;
        background: #000 !important;
        margin: 0 !important;
        border-bottom: 1px solid var(--nuclear-border) !important;
        font-size: 11px !important;
        letter-spacing: .05em !important;
        text-transform: uppercase !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.single-product .tf-country-switcher__option {
        padding: 6px 12px !important;
        border: 1px solid rgba(255,255,255,.2) !important;
        border-radius: var(--tf-radius-md, 4px) !important;
        color: rgba(255,255,255,.6) !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }
    body.single-product .tf-country-switcher__option.active {
        background: var(--tf-brand-primary, #9333ea) !important;
        color: #fff !important;
        border-color: transparent !important;
    }

    /* Prevent any gallery/grid horizontal overflow */
    body.single-product .woocommerce-product-gallery,
    body.single-product .product-gallery-column,
    body.single-product .product-top-grid-nuclear {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Mobile styles for custom thumbnails */
    body.single-product .tf-product-related-images-container {
        padding: 12px 16px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.single-product .tf-product-thumbnails-list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        gap: 10px !important;
    }

    body.single-product .tf-product-thumbnail-item {
        width: 70px !important;
        height: 70px !important;
        flex: 0 0 70px !important;
    }
}