/**
 * LV Peptides — single-product.css
 *
 * Product Detail Page (PDP) styles:
 *   - Two-column layout reinforcement
 *   - Image aspect ratio consistency
 *   - WooCommerce tab styling (navy active indicator, gray content background)
 *
 * Enqueued conditionally on single product pages via is_product().
 *
 * @see Requirements: 6.7, 6.8
 */

/* ==========================================================================
   PDP — WooCommerce Tabs
   ========================================================================== */

/* Tabs wrapper */
.lv-pdp-tabs .woocommerce-tabs {
    margin-top: var(--space-8);
}

/* Tab navigation list */
.lv-pdp-tabs .woocommerce-tabs ul.tabs {
    list-style: none;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid rgba(10, 37, 64, 0.1);
    background: transparent;
}

.lv-pdp-tabs .woocommerce-tabs ul.tabs::before,
.lv-pdp-tabs .woocommerce-tabs ul.tabs::after {
    display: none;
}

/* Individual tab items */
.lv-pdp-tabs .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    position: relative;
}

.lv-pdp-tabs .woocommerce-tabs ul.tabs li::before,
.lv-pdp-tabs .woocommerce-tabs ul.tabs li::after {
    display: none;
}

/* Tab links */
.lv-pdp-tabs .woocommerce-tabs ul.tabs li a {
    display: block;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--lv-navy);
    opacity: 0.6;
    text-decoration: none;
    padding: var(--space-3) var(--space-6);
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    background: transparent;
}

.lv-pdp-tabs .woocommerce-tabs ul.tabs li a:hover {
    opacity: 0.85;
    color: var(--lv-navy);
}

/* Active tab — navy indicator */
.lv-pdp-tabs .woocommerce-tabs ul.tabs li.active {
    background: transparent;
    border: none;
}

.lv-pdp-tabs .woocommerce-tabs ul.tabs li.active a {
    color: var(--lv-navy);
    opacity: 1;
    font-weight: 600;
    border-bottom-color: var(--lv-navy);
}

/* Tab content area — gray background */
.lv-pdp-tabs .woocommerce-tabs .woocommerce-Tabs-panel,
.lv-pdp-tabs .woocommerce-tabs .panel {
    background-color: var(--lv-gray);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: var(--space-6) var(--space-8);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--lv-navy);
    line-height: 1.7;
    margin: 0;
    border: none;
    box-shadow: none;
}

.lv-pdp-tabs .woocommerce-tabs .woocommerce-Tabs-panel h2,
.lv-pdp-tabs .woocommerce-tabs .panel h2 {
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--lv-navy);
    margin: 0 0 var(--space-4);
}

.lv-pdp-tabs .woocommerce-tabs .woocommerce-Tabs-panel p,
.lv-pdp-tabs .woocommerce-tabs .panel p {
    margin: 0 0 var(--space-3);
}

/* Additional Information table styling */
.lv-pdp-tabs .woocommerce-tabs .shop_attributes {
    width: 100%;
    border-collapse: collapse;
}

.lv-pdp-tabs .woocommerce-tabs .shop_attributes th,
.lv-pdp-tabs .woocommerce-tabs .shop_attributes td {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(10, 37, 64, 0.08);
    text-align: left;
}

.lv-pdp-tabs .woocommerce-tabs .shop_attributes th {
    font-weight: 600;
    color: var(--lv-navy);
    width: 35%;
}

.lv-pdp-tabs .woocommerce-tabs .shop_attributes td {
    color: var(--lv-navy);
    opacity: 0.85;
}

/* ==========================================================================
   PDP — Pep-Pedia Link (Research Tab)
   ========================================================================== */
.lv-pep-pedia-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--lv-teal);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--lv-teal);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lv-pep-pedia-link:hover,
.lv-pep-pedia-link:focus {
    background-color: var(--lv-teal);
    color: var(--lv-white);
}

.lv-pep-pedia-link .lv-external-icon {
    font-size: 1.1em;
    line-height: 1;
}

/* ==========================================================================
   PDP — Related Products & Upsells
   ========================================================================== */
.lv-pdp-tabs .related.products,
.lv-pdp-tabs .upsells.products {
    margin-top: var(--space-12);
}

.lv-pdp-tabs .related.products > h2,
.lv-pdp-tabs .upsells.products > h2 {
    font-family: var(--font-family);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--lv-navy);
    margin-bottom: var(--space-6);
}

/* ==========================================================================
   Responsive — Tablet (768–1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .lv-pdp-tabs .woocommerce-tabs .woocommerce-Tabs-panel,
    .lv-pdp-tabs .woocommerce-tabs .panel {
        padding: var(--space-6);
    }
}

/* ==========================================================================
   Responsive — Mobile (< 768px)
   ========================================================================== */
@media (max-width: 767px) {
    .lv-pdp-tabs .woocommerce-tabs ul.tabs {
        flex-wrap: wrap;
    }

    .lv-pdp-tabs .woocommerce-tabs ul.tabs li a {
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-sm);
    }

    .lv-pdp-tabs .woocommerce-tabs .woocommerce-Tabs-panel,
    .lv-pdp-tabs .woocommerce-tabs .panel {
        padding: var(--space-4);
    }

    .lv-pep-pedia-link {
        width: 100%;
        justify-content: center;
    }
}