/* ==========================================================================
   OPRANIC - Single Product Page (PDP)
   --------------------------------------------------------------------------
   Laddas via opranic_conditional_styles() på is_product().

   Innehåll:
     1. PDP typografi (.single-product H2/H3)
     2. Single product layout (gallery, summary, attribut)
     3. PDP pris-styling
     4. PDP lager/ETA-rad (#opr-meta-inline)
     5. PDP variations (Swatches) - label + val på samma rad
     6. PDP qty + cart-knapp
     7. Premium-features (bockad lista)
     8. Dölj överflödig variationsdata
     9. PDP spacing compact mode (S70/V70)
    10. Where to Buy / Installers (.opr-wtb__*)
    11. Produktflikar - Enhetlig flikdesign (vc_tta + summary-flikar)
    12. PDP mobil + sticky tabs
    13. Lipscore-rating-wrapper CLS-fix
    14. Fluid Checkout cart-knapp mobil
    15. Elfsight-i-WC-kort (relaterade produkter)

   Källor:
     - additional-css block 1, 6, 7, 15 (PDP typografi, WTB, vc_tta mobil)
     - style.css sek 5b, 8b, 9-PDP-Layout, 9-Tabs-Unified (utan .wc-tabs),
       9-Fluid-Cart-Btn, 9-Elfsight

   Version: 2026-04-30 (refactor v2.5 - skapad ny)
   ========================================================================== */

/* ==========================================================================
   1. PDP TYPOGRAFI (H2/H3 i tabs och summary)
   ========================================================================== */

/* H2 (Desktop: 24px) */
.single-product .woocommerce-Tabs-panel h2,
.single-product .entry-summary h2,
.single-product h2.vcex-heading,
.single-product .vcex-heading h2 {
    font-size: 24px !important;
    line-height: 1.3;
    font-weight: 600;
    margin: 1em 0 0.45em !important;
}

/* Finjustering av orange linje för vcex-heading */
.single-product h2.vcex-heading::before {
    height: 3px;
    width: 40px;
    background: var(--color-brand-orange);
    margin-top: 22px;
    margin-bottom: 10px;
}

/* H3 (Desktop: 20px) */
.single-product .entry-summary h3,
.single-product .woocommerce-Tabs-panel h3,
.single-product .wpb_text_column .wpb_wrapper h3,
.single-product h3.vcex-heading,
.single-product .vcex-heading h3,
.single-product .theme-heading h3 {
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    margin: 0.9em 0 0.4em !important;
}

/* Mobil typografi PDP */
@media (max-width: 480px) {
    .single-product .woocommerce-Tabs-panel h2,
    .single-product .entry-summary h2,
    .single-product h2.vcex-heading,
    .single-product .vcex-heading h2 {
        font-size: 22px !important;
    }
    .single-product .woocommerce-Tabs-panel h3,
    .single-product .entry-summary h3,
    .single-product h3.vcex-heading,
    .single-product .vcex-heading h3 {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   2. SINGLE PRODUCT LAYOUT
   ========================================================================== */

.single-product div.product .product_title.entry-title {
    font-size: var(--wpex-text-4xl);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.2px;
}

.woocommerce-product-details__short-description {
    color: var(--color-text-light);
}

.product_meta {
    display: flex;
    gap: 15px;
}
.product_meta .t-label {
    display: none;
}

.woocommerce .quantity input[type=number] {
    min-height: 50px;
}

.woocommerce .product .summary .single_add_to_cart_button,
.woocommerce .product .summary .added_to_cart {
    min-width: 296px;
}

/* Produktgalleri - thumbnails */
.woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100%;
    max-width: 110px;
    height: auto;
    aspect-ratio: 13 / 15;
    object-fit: cover;
}
.woocommerce-product-gallery .flex-control-thumbs li,
.woocommerce-product-gallery .flex-control-thumbs li::before {
    width: auto;
    aspect-ratio: auto;
    content: none;
}

/* Produktattribut-tabell */
.wc-tab table th,
.wc-tab table td {
    border: none;
    background: var(--color-text-white);
    padding: 13px;
}
.woocommerce .shop_attributes th {
    width: 220px;
}

/* Mobil rubriker - PDP */
@media (max-width: 768px) {
    .single-product .woocommerce div.product .product_title.entry-title,
    .single-product .entry-title {
        font-size: clamp(22px, 6vw, 30px) !important;
        line-height: 1.2 !important;
        margin-top: 0.25rem;
        margin-bottom: 0.75rem;
    }

    .woocommerce .product .summary .single_add_to_cart_button,
    .woocommerce .product .summary .added_to_cart {
        min-width: 196px;
    }
}

/* Stora skärmar - attribut i 2 kolumner */
@media screen and (min-width: 1200px) {
    .woocommerce-product-attributes.shop_attributes .woocommerce-product-attributes-item {
        float: left;
        width: 50%;
        padding-right: 10px;
    }
}

/* ==========================================================================
   3. PDP PRIS-STYLING
   ========================================================================== */

body.single-product .summary .price,
body.single-product .summary .price *,
body.single-product .summary .price .orange {
    color: var(--color-brand-dark) !important;
}

body.single-product .summary .price {
    font-size: 24px !important;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 10px !important;
}

body.single-product .summary .price del {
    opacity: 0.6;
    font-weight: 400;
}

body.single-product .summary .price ins {
    text-decoration: none;
    font-weight: 600;
    background: none;
}

/* ==========================================================================
   4. PDP LAGER / ETA-RAD
   ========================================================================== */

#opr-meta-inline {
    margin: 8px 0 4px;
}
#opr-meta-inline .opr-stock-eta {
    font-size: .95rem;
}
#opr-meta-inline.status-in-stock .opr-stock-eta strong {
    color: #1b7f2a;
}
#opr-meta-inline.status-backorder .opr-stock-eta strong {
    color: #a56800;
}
#opr-meta-inline.status-oos .opr-stock-eta strong {
    color: #a30000;
}

#opr-desc-inline {
    margin: 6px 0 0;
    font-size: .95rem;
}

/* ==========================================================================
   5. PDP VARIATIONS (Swatches)
   ========================================================================== */

body.single-product .variations_form .variations {
    width: 100%;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
    border-spacing: 0 !important;
}

body.single-product .variations_form .variations tr {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    padding-top: 0 !important;
    padding-bottom: 6px !important;
}

.single-product .variations .label {
    width: auto;
    min-width: 105px;
    margin: 0 !important;
    padding: 0;
    vertical-align: middle;
    font-weight: 600;
}

.single-product .variations td,
.single-product .variations .value {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}

/* Mobil: stapla under 540px */
@media (max-width: 540px) {
    body.single-product .variations_form .variations tr {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px !important;
    }
    .single-product .variations .label {
        min-width: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   6. PDP QTY + CART-KNAPP
   ========================================================================== */

.woocommerce-variation-add-to-cart.variations_button {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
}

.wpex-woocommerce-product-qty-btn-wrapper {
    gap: 8px !important;
}

.woocommerce .quantity input[type=number] {
    min-height: 44px !important;
}

.single-product .single_add_to_cart_button {
    margin-left: 16px !important;
}

@media (max-width: 540px) {
    .wpex-woocommerce-product-qty-btn-wrapper { gap: 6px !important; }
    .single-product .single_add_to_cart_button { margin-left: 0 !important; }
}

/* ==========================================================================
   7. PREMIUM-FEATURES (bockad lista)
   ========================================================================== */

.premium-features {
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 16px !important;
    margin-bottom: 25px;
}
.premium-features li {
    padding-left: 28px !important;
    position: relative;
    margin-bottom: 12px !important;
    line-height: 1.5;
}
.premium-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-brand-orange) !important;
    font-weight: bold;
    font-size: 20px;
}

/* ==========================================================================
   8. DÖLJ ÖVERFLÖDIG VARIATIONSDATA
   ========================================================================== */

.single-product .variations_form .reset_variations {
    display: none !important;
}

body.single-product .summary .single_variation .price,
body.single-product .summary #opr-variant-brief,
body.single-product .summary .single_variation .woocommerce-variation-description,
body.single-product .summary .single_variation .stock,
body.single-product .summary .woocommerce-variation-availability {
    display: none !important;
}

/* Dolda variationselement ska inte lämna luft */
.single-product .single_variation_wrap,
.single-product .single_variation {
    margin: 0 !important;
    padding: 0 !important;
}
.single-product .single_variation .woocommerce-variation-price,
.single-product .single_variation .woocommerce-variation-description,
.single-product .single_variation .woocommerce-variation-availability {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   9. WHERE TO BUY / INSTALLERS (.opr-wtb__*)
   --------------------------------------------------------------------------
   Källa: additional-css block 6
   ========================================================================== */

.opr-wtb {
    padding: 4px 0;
}

.opr-wtb__intro,
.opr-wtb__none {
    font-size: 13px;
    color: #7C7C7C;
    line-height: 1.5;
    margin: 0 0 12px;
}

.opr-wtb__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.opr-wtb__partner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    text-decoration: none;
    color: #262626;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.opr-wtb__partner:hover {
    background: #FAFAFA;
    border-color: #EE9305;
}

.opr-wtb__logo-wrap {
    flex-shrink: 0;
    width: 80px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid #E8E8E8;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px 8px;
}

.opr-wtb__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.opr-wtb__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.opr-wtb__name {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
}

.opr-wtb__cta {
    font-size: 12px;
    color: #7C7C7C;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opr-wtb__arrow {
    color: #CCCCCC;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.opr-wtb__partner:hover .opr-wtb__arrow {
    color: #EE9305;
}

.opr-wtb__disclaimer {
    font-size: 11px;
    color: #AAAAAA;
    line-height: 1.5;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #F0F0F0;
}
/* ==========================================================================
   11. PRODUKTFLIKAR - Enhetlig flikdesign (vc_tta + summary-flikar)
   --------------------------------------------------------------------------
   ⚠️ .wc-tabs-blocket BORTTAGET (D4) - vc_tta har ersatt WC-standardflikar.
   Sek 9-Tabs-Unified från style.css men utan .wc-tabs (DEAD CODE).
   ========================================================================== */

:root {
    --op-mobile-header: 64px;
    --pdp-tabs-gutter-m: 16px;
}

/* WPBakery-flikar (vc_tta) - allmänt */

.vc_tta.vc_general .vc_tta-tabs-container::before {
    display: none;
}

.vc_tta.vc_general .vc_tta-tabs-list {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--color-border-main) !important;
}

.vc_tta.vc_general .vc_tta-tab > a {
    background: transparent !important;
    color: var(--color-text-light) !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
}

.vc_tta.vc_general .vc_tta-tab.vc_active > a,
.vc_tta.vc_general .vc_tta-tab > a[aria-selected="true"] {
    background: transparent !important;
    color: var(--color-brand-orange) !important;
    font-weight: 500 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: relative !important;
}

.vc_tta.vc_general .vc_tta-tab.vc_active > a::after,
.vc_tta.vc_general .vc_tta-tab > a[aria-selected="true"]::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 4px !important;
    right: 4px !important;
    height: 3px !important;
    background: var(--color-brand-orange) !important;
    border-radius: 3px 3px 0 0 !important;
}

.vc_tta.vc_general .vc_tta-tab:not(.vc_active) > a:hover,
.vc_tta.vc_general .vc_tta-tab:not(.vc_active) > a:focus {
    background: transparent !important;
    color: var(--color-brand-dark) !important;
    border-bottom-color: var(--color-border-main) !important;
}

.vc_tta .vc_tta-panels,
.vc_tta .vc_tta-panel,
.vc_tta .vc_tta-panels-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.vc_tta .vc_tta-panel-body {
    background: transparent !important;
    padding: 14px 0 8px !important;
}

.vc_tta .vc_tta-title-text {
    color: inherit;
}

/* Summary-flikar (under Add to Cart) - kompakt */

.single-product .summary .vc_tta.vc_general .vc_tta-tabs-list {
    margin-top: 12px !important;
}

.single-product .summary .vc_tta.vc_general .vc_tta-tab > a {
    padding: 8px 14px !important;
    font-size: 12px !important;
}

.single-product .summary .vc_tta .vc_tta-panel-body {
    padding: 10px 0 4px !important;
}

/* ==========================================================================
   12. PDP MOBIL + STICKY TABS
   ========================================================================== */

@media (max-width: 768px) {
    /* Visa flikar, inte accordion */
    .vc_tta.vc_general .vc_tta-accordion {
        display: none !important;
    }
    .vc_tta.vc_general .vc_tta-tabs-container {
        display: block !important;
    }

    /* Sticky under header */
    .single-product .vc_tta.vc_general .vc_tta-tabs-container {
        position: -webkit-sticky;
        position: sticky !important;
        top: var(--op-mobile-header) !important;
        z-index: 999;
        background: #fff !important;
        padding: 6px 0 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }

    /* Overflow-fix för sticky */
    .single-product .vc_row,
    .single-product .vc_column_container,
    .single-product .vc_column-inner,
    .single-product .site-content,
    .single-product .content-area,
    .single-product .vc_tta,
    .single-product .vc_tta-panels-container {
        overflow: visible !important;
    }

    /* Horisontell scroll */
    .vc_tta.vc_general .vc_tta-tabs-list {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }
    .vc_tta.vc_general .vc_tta-tabs-list::-webkit-scrollbar {
        display: none;
    }

    /* Flikar mobil */
    .vc_tta.vc_general .vc_tta-tab > a {
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* PDP sidomarginaler */
    .single-product .vc_tta.vc_general .vc_tta-tabs-container {
        padding-left: var(--pdp-tabs-gutter-m) !important;
        padding-right: var(--pdp-tabs-gutter-m) !important;
    }
    .single-product .vc_tta.vc_general .vc_tta-panels {
        padding-left: var(--pdp-tabs-gutter-m) !important;
        padding-right: var(--pdp-tabs-gutter-m) !important;
    }

    .vc_tta.vc_general .vc_tta-panels {
        margin-top: .25rem !important;
    }

    /* Orange streck begränsat till flik-bredden på mobil */
    .vc_tta.vc_general .vc_tta-tab.vc_active > a::after,
    .vc_tta.vc_general .vc_tta-tab > a[aria-selected="true"]::after {
        left: 4px !important;
        right: 4px !important;
        width: auto !important;
    }
}

/* ==========================================================================
   13. LIPSCORE-RATING-WRAPPER CLS-FIX (single product)
   ========================================================================== */

.single-product .lipscore-rating-wrapper,
.single-product .lipscore-rating-small {
    display: block;
    min-height: 22px;
}

/* ==========================================================================
   14. FLUID CHECKOUT CART-KNAPP MOBIL
   --------------------------------------------------------------------------
   Mini-cart visas på produktsidor när användaren lagt något i varukorgen.
   ⚠️ Skuld: kommentaren i style.css säger Fast Cart är borttagen. Verifiera.
   ========================================================================== */

@media (max-width: 768px) {
    #wfc-open-cart-button {
        top: 45px !important;
        right: 60px !important;
    }
}

/* ==========================================================================
   15. ELFSIGHT I WC-PRODUKTKORT (relaterade produkter)
   --------------------------------------------------------------------------
   Wrapper-CSS för Elfsight-widget i relaterade-produkter-grid.
   ========================================================================== */

.woocommerce ul.products li.product .opr-elfsight-in-card {
    display: block;
    margin-top: 6px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.woocommerce ul.products li.product .opr-elfsight-in-card > div,
.woocommerce ul.products li.product .opr-elfsight-in-card [class^="elfsight-app"],
.woocommerce ul.products li.product .opr-elfsight-in-card .eapps-widget {
    display: block !important;
    max-width: 100% !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
}

.woocommerce ul.products li.product .opr-elfsight-in-card iframe {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
}

.woocommerce ul.products li.product [class^="elfsight-app"] {
    display: block;
    margin: 0;
    text-align: left;
    max-width: 100%;
}

@media (max-width: 768px) {
    .woocommerce ul.products li.product .opr-elfsight-in-card {
        display: block;
        margin-top: 6px;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    .woocommerce ul.products li.product .opr-elfsight-in-card > div,
    .woocommerce ul.products li.product .opr-elfsight-in-card [class^="elfsight-app"],
    .woocommerce ul.products li.product .opr-elfsight-in-card .eapps-widget {
        display: block !important;
        max-width: 100% !important;
        width: auto !important;
        margin: 0 !important;
        text-align: left !important;
    }
    .woocommerce ul.products li.product .opr-elfsight-in-card iframe {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
    }
    .woocommerce ul.products li.product [class^="elfsight-app"] {
        display: block;
        margin: 0;
        text-align: left;
        max-width: 100%;
    }
}

/* === SLUT på opr-product ================================================= */