/**
 * Product Page Design Fixes
 * Consolidated from design-audit-cross-product.md (2026-03-30)
 *
 * Replaces scattered !important color overrides with CSS custom properties.
 * Loaded only on is_product() pages, after xts-child-style.
 */

/* =================================================================
   COLOR SYSTEM — 3 levels replace 5+ ad-hoc values
   ================================================================= */
body.single-product {
    --amg-text-primary: #1a1a1a;
    --amg-text-secondary: #4b5563;
    --amg-text-muted: #9ca3af;
    --amg-accent: #ffba00;
    --amg-accent-light: #fffbeb;
    --amg-red: #ef4444;
}

/* =================================================================
   [1.2] TEXT COLOR CONSOLIDATION
   Replace 5+ ad-hoc colors with 3-level system
   ================================================================= */

/* Primary text: meta labels */
.single-product .product_meta .xts-label {
    color: var(--amg-text-primary);
}

/* Secondary text: SKU code, sub-labels */
.single-product .summary .amg-sku-display {
    display: block !important;
    margin: 0 !important;
    padding: 0 14px 16px 20px !important;
    font-size: 13px !important;
    color: var(--amg-text-muted) !important;
}

/* Muted text: old price (del), inactive elements */
.single-product .summary > .price del,
.single-product .summary > .price del .woocommerce-Price-amount,
.single-product .woocommerce-variation-price del,
.single-product .woocommerce-variation-price del .woocommerce-Price-amount,
.single-product .summary p.custom-price .regular-price,
.single-product .summary p.custom-price .regular-price .woocommerce-Price-amount,
.single-product .summary p.custom-price .regular-price bdi {
    color: var(--amg-text-muted);
}

/* =================================================================
   [1.2 BUG FIX] Simple non-discount price missing styles
   p.custom-price > .woocommerce-Price-amount has no matching rule
   ================================================================= */
.single-product .summary p.custom-price > .woocommerce-Price-amount,
.single-product .summary p.custom-price > span > .woocommerce-Price-amount {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--amg-text-primary) !important;
}

/* =================================================================
   [1.1] H1 FONT-WEIGHT — fallback for non-wrapped titles
   .amg-title-card > .entry-title already has weight 800 via inline.
   ================================================================= */
.single-product h1.product_title {
    font-weight: 700;
    color: var(--amg-text-primary);
}

/* =================================================================
   [2.1] SWATCH ACTIVE/INACTIVE CONTRAST
   Text swatches: amber background tint + amber border
   Color swatches: enhanced checkmark visibility
   ================================================================= */

/* Active text swatch — amber tint instead of bare border */
.single-product .xts-single-product-swatches .xts-variation-swatch.xts-active:not(.xts-with-bg) {
    background-color: var(--amg-accent-light);
    box-shadow: 0 0 0 2px var(--amg-accent) inset;
}

/* Active color swatch — ensure checkmark is visible */
.single-product .xts-single-product-swatches .xts-variation-swatch.xts-active.xts-with-bg::before {
    opacity: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 14px;
}

/* =================================================================
   [1.3] TAB ACTIVE/INACTIVE CONTRAST
   Active: bold weight + amber underline + dark text
   Inactive: muted color (clear hierarchy)
   ================================================================= */

/* Inactive tabs — muted */
.single-product .xts-nav-product-tabs.xts-style-underline > li > a {
    color: var(--amg-text-muted);
    transition: color 0.2s ease;
}

/* Active + hover — primary color, bold */
.single-product .xts-nav-product-tabs.xts-style-underline > li.active > a,
.single-product .xts-nav-product-tabs.xts-style-underline > li:hover > a {
    color: var(--amg-text-primary);
    font-weight: 600;
}

/* Active underline — thicker + amber */
.single-product .xts-nav-product-tabs.xts-style-underline > li.active > a .xts-nav-text::after {
    height: 2px;
    background-color: var(--amg-accent);
}

/* =================================================================
   [3.1] SOLD-OUT MOBILE CTA — disabled state
   ================================================================= */
.amg-mobile-buy-bar.amg-buy-bar--out-of-stock {
    justify-content: center;
}

.amg-buy-btn.amg-buy-btn--disabled {
    background: #d1d5db;
    color: #6b7280;
    pointer-events: none;
    opacity: 0.8;
    cursor: default;
    flex: 1;
}

/* =================================================================
   [4.1] SIMPLE PRODUCT: reduce gap where swatches would be
   On variable products, swatches fill the space between stock-row
   and the buy button. Simple products have no swatches, so the
   combined padding of price-card bottom + stock-row + form.cart top
   creates a visible empty gap. Tighten these for .product-type-simple.
   ================================================================= */

/* Price container: reduce bottom padding (no swatches follow) */
.product-type-simple .summary p.custom-price {
    padding-bottom: 4px !important;
}

/* Stock-actions-row: tighter bottom padding on simple products */
.product-type-simple .xts-single-product-summary > p.custom-price + .amg-stock-actions-row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* form.cart (buy button only): reduce top/bottom padding */
.product-type-simple .xts-single-product-summary form.cart:not(.variations_form) {
    padding-top: 8px !important;
    padding-bottom: 14px !important;
}

/* =================================================================
   [1.55] VARIABLE PRODUCT: tighten form.cart internal spacing
   ================================================================= */
.single-product .xts-single-product-summary form.cart.variations_form {
    padding-bottom: 12px !important;
}
.single-product .xts-single-product-summary form.cart table.variations {
    margin-bottom: 8px !important;
}

/* =================================================================
   [1.6] OUT-OF-STOCK: price+stock card has no form.cart to close it
   Give the stock-actions-row bottom border-radius + proper padding.
   Extra .single-product for specificity over style.css !important.
   ================================================================= */
.single-product .outofstock .xts-single-product-summary > p.custom-price + .amg-stock-actions-row {
    border-radius: 0 0 12px 12px !important;
    padding-bottom: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* OOS: hide empty delivery/trust card (contains only empty <p>) */
.single-product .outofstock .xts-single-product-summary > .xts-after-add-to-cart {
    display: none !important;
}

/* =================================================================
   [2.2] MOBILE VARIANT SELECTOR ORDER
   On mobile: swatches first → price second → stock/actions last.
   Desktop order (set in functions.php inline CSS) puts price first
   (order:1) and swatches second (order:2), which works for desktop
   side-by-side layout but breaks mobile where users need to pick
   a variant before seeing the CTA.
   ================================================================= */
@media (max-width: 767px) {
    .single-product .summary .variations_form table.variations {
        order: 1 !important;
    }
    .single-product .summary .variations_form .single_variation_wrap {
        order: 2 !important;
    }
    .single-product .summary .variations_form .amg-stock-actions-row {
        order: 3 !important;
    }
}

/* =================================================================
   [2.3] SUBSCRIPTION BLOCKS + BUY BUTTON LAYOUT
   When subscription plans exist, the variation price area contains
   tall subscription blocks. Force it to take full width so the
   buy button wraps below instead of floating beside them.
   ================================================================= */
@media (min-width: 992px) {
    .single-product .single_variation_wrap .woocommerce-variation:has(.has-subscription-plans) {
        flex: 0 0 100% !important;
    }
}

/* =================================================================
   [5.1] RED COLOR CONSOLIDATION
   Parent theme uses #f3543d (warm orange-red) for subscription sale
   prices. Override to use --amg-red (#ef4444) for consistency.
   ================================================================= */
.single-product.sale .ywcrbp_sale_price .woocommerce-Price-amount,
.single-product.sale .sale-price .woocommerce-Price-amount {
    color: var(--amg-red);
}

/* =================================================================
   [6.0] PRICE LAYOUT — migrated from parent theme style.css
   Old price + badge on first row (inline), new price on second row.
   ================================================================= */

/* Old price (del): inline, small, muted, struck-through */
.single-product .woocommerce-variation-price del,
.single-product .summary > .price del {
    display: inline !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    margin-right: 0 !important;
}

/* Price-amount inside del must stay inline */
.single-product .woocommerce-variation-price del .woocommerce-Price-amount,
.single-product .summary > .price del .woocommerce-Price-amount {
    display: inline !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

/* Discount badge — inline next to old price */
.single-product .summary .amg-discount-badge,
.single-product .woocommerce-variation-price .amg-discount-badge,
.single-product .summary .price .amg-discount-badge,
.woocommerce-variation-price .price .amg-discount-badge,
span.amg-discount-badge {
    position: static !important;
    float: none !important;
    display: inline-block !important;
    vertical-align: middle;
    margin: 0 0 0 6px;
    padding: 3px 8px;
    background: var(--amg-red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    line-height: 1.2;
    white-space: nowrap;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none !important;
}

/* Discount badge on catalog cards */
.products .product .price .amg-discount-badge {
    font-size: 11px;
    padding: 2px 6px;
    margin-left: 4px;
    vertical-align: middle;
}

/* New price (ins): block on its own row */
.single-product .woocommerce-variation-price ins,
.single-product .summary > .price ins {
    display: block !important;
    text-decoration: none !important;
    background: none !important;
    margin-top: 4px !important;
}

/* New price amount — large, bold, primary */
.single-product .woocommerce-variation-price ins .woocommerce-Price-amount,
.single-product .summary > .price ins .woocommerce-Price-amount {
    color: var(--amg-text-primary) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

/* Hide screen-reader-text in variation prices */
.single-product .woocommerce-variation-price .screen-reader-text {
    display: none !important;
}

/* Non-discount regular price (variation + summary) */
.single-product .woocommerce-variation-price > .price > .woocommerce-Price-amount,
.single-product .summary > .price > .woocommerce-Price-amount {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--amg-text-primary) !important;
}

/* =================================================================
   [6.1] PRICE MOBILE OVERRIDES
   ================================================================= */
@media (max-width: 768px) {
    .single-product .summary p.stock {
        font-size: 12px;
        padding: 0;
    }

    /* Smaller new price on mobile */
    .single-product .woocommerce-variation-price ins .woocommerce-Price-amount,
    .single-product .summary > .price ins .woocommerce-Price-amount {
        font-size: 24px;
    }

    /* Smaller old price on mobile */
    .single-product .woocommerce-variation-price del,
    .single-product .summary > .price del {
        font-size: 14px;
    }

    /* Smaller discount badge on mobile */
    .single-product .amg-discount-badge,
    .woocommerce-variation-price .amg-discount-badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    /* Hide desktop buy button on mobile (mobile sticky bar replaces it) */
    .single-product .summary form.cart .single_add_to_cart_button {
        display: none !important;
    }

    /* Hide quantity on mobile too */
    .single-product .summary form.cart .quantity {
        display: none !important;
    }

    /* Mobile sticky buy bar: bold text */
    .amg-mobile-buy-bar .amg-buy-btn {
        font-size: 20px;
        font-weight: 700;
    }
}

/* =================================================================
   MIGRATED from inline CSS (functions.php amg_critical_product_styles)
   These rules are NOT above-the-fold / NOT CLS-critical.
   ================================================================= */

/* Rating — below title in title card */
.single-product .summary .woocommerce-product-rating {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 8px 20px !important;
}

/* Pipe separator between reviews and Q&A */
.single-product .summary .cr-qna-separator {
    color: #ccc !important;
    margin: 0 2px !important;
}

/* Brand logo — absolute, does not affect text flow */
.single-product .amg-title-card .xts-single-product-brands {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    z-index: 1 !important;
}
.single-product .amg-title-card .xts-single-product-brands .xts-label {
    display: none !important;
}
.single-product .amg-title-card .xts-single-product-brands img {
    max-width: 70px !important;
    display: block !important;
}

/* After-add-to-cart block gap */
.single-product .xts-single-product-summary > .xts-after-add-to-cart {
    margin-top: 12px !important;
}

/* Trust separator inside wrapper card */
.single-product .xts-after-add-to-cart .trust-block {
    border-top: 1px solid #f0f0f0 !important;
    padding-top: 14px !important;
    margin-top: 14px !important;
}

/* Empty elements inside after-add-to-cart */
.single-product .xts-after-add-to-cart > p:empty {
    display: none !important;
    margin: 0 !important;
}

/* Variation description under swatches */
.single-product .amg-variation-desc {
    margin: 10px 0 15px 0;
    padding: 12px 15px;
    background: #f8f9fa;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
}
.single-product .amg-variation-desc p {
    margin: 0;
}

/* Variation availability — reduce spacing from child style.css */
.single-product .summary .woocommerce-variation-availability {
    padding: 4px 0 !important;
    margin-bottom: 0 !important;
}

/* Mobile overrides for below-fold elements */
@media (max-width: 768px) {
    .single-product .outofstock .xts-single-product-summary > p.custom-price + .amg-stock-actions-row {
        border-radius: 0 0 10px 10px !important;
        padding-bottom: 12px !important;
    }
    .single-product .summary .woocommerce-product-rating {
        padding: 8px 14px !important;
    }
    .single-product .xts-after-add-to-cart .trust-block {
        padding-top: 10px !important;
        margin-top: 10px !important;
    }
}

/* =================================================================
   DESKTOP CTA: disabled state for sold-out variable products
   WooCommerce adds .disabled class but CSS only styled
   .wc-variation-is-unavailable — this covers all .disabled states.
   ================================================================= */
.single-product .single_add_to_cart_button.disabled {
    opacity: 0.4 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* =================================================================
   [7.0] DESCRIPTION TAB — heading sizes
   Product descriptions often contain full pharmaceutical instructions
   with H1 (duplicate of product title) + H2/H3/H4 section headings.
   Global heading sizes (H1: 42px, H3: 26px) are far too large inside
   a tab panel, especially on mobile. These overrides keep headings
   compact and proportional to the body text.
   ================================================================= */

/* H1 in description = duplicate product title — hide it */
.woocommerce-Tabs-panel--description h1 {
    display: none;
}

/* H2: section heading */
.woocommerce-Tabs-panel--description h2 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    margin: 20px 0 8px;
}

/* H3: sub-section heading */
.woocommerce-Tabs-panel--description h3 {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    margin: 16px 0 6px;
}

/* H4: minor heading */
.woocommerce-Tabs-panel--description h4 {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    margin: 12px 0 4px;
}

/* First heading in description: no top margin */
.woocommerce-Tabs-panel--description > h2:first-child,
.woocommerce-Tabs-panel--description > h3:first-child,
.woocommerce-Tabs-panel--description > h4:first-child {
    margin-top: 0;
}

@media (max-width: 767px) {
    .woocommerce-Tabs-panel--description h2 {
        font-size: 18px;
        margin: 16px 0 6px;
    }
    .woocommerce-Tabs-panel--description h3 {
        font-size: 16px;
        margin: 14px 0 4px;
    }
    .woocommerce-Tabs-panel--description h4 {
        font-size: 14px;
        margin: 10px 0 4px;
    }
}

/* =================================================================
   OUT-OF-STOCK POPUP: Clerk.io alternatives overlay
   Shows on page load (2s delay) for sold-out products.
   Pattern matches existing popups (cashback, subscription).
   ================================================================= */
.amg-oos-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.amg-oos-popup {
    background: #fff;
    border-radius: 12px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.amg-oos-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amg-oos-popup-close:hover {
    color: #333;
}

.amg-oos-popup-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.amg-oos-popup-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px 0;
}

@media (max-width: 767px) {
    .amg-oos-popup {
        padding: 16px;
        border-radius: 10px;
    }
    .amg-oos-popup-title {
        font-size: 16px;
        padding-right: 32px;
    }
}