/*
 * FRADEVO DESIGN SYSTEM
 * Version: 0.1.0
 * Scope: WooCommerce product pages + FRADEVO components
 */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
    /* Base */
    --fradevo-bg-page: #ffffff;
    --fradevo-bg-soft: #f7f8fa;
    --fradevo-bg-soft-2: #f2f4f7;

    /* Highlight backgrounds */
    --fradevo-bg-advice: #f3f8ff;
    --fradevo-bg-compare: #f4f8f4;
    --fradevo-bg-warning: #fff8e8;

    /* Text */
    --fradevo-text-main: #1f2937;
    --fradevo-text-secondary: #667085;
    --fradevo-text-muted: #98a2b3;

    /* Borders */
    --fradevo-border: #e4e7ec;
    --fradevo-border-strong: #d0d5dd;

    /* Radius */
    --fradevo-radius-sm: 8px;
    --fradevo-radius-md: 12px;
    --fradevo-radius-lg: 16px;

    /* Spacing */
    --fradevo-space-1: 4px;
    --fradevo-space-2: 8px;
    --fradevo-space-3: 12px;
    --fradevo-space-4: 16px;
    --fradevo-space-5: 20px;
    --fradevo-space-6: 24px;
    --fradevo-space-8: 32px;
    --fradevo-space-10: 40px;

    /* Typography */
    --fradevo-font-xs: 13px;
    --fradevo-font-sm: 14px;
    --fradevo-font-base: 16px;
    --fradevo-font-lg: 18px;
    --fradevo-font-xl: 22px;
    --fradevo-font-2xl: 28px;

    --fradevo-line-base: 1.6;
    --fradevo-line-heading: 1.25;

    /* Shadow */
    --fradevo-shadow-soft:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 4px 12px rgba(16, 24, 40, 0.05);
}


/* =========================================================
   2. GENERAL PRODUCT PAGE
   ========================================================= */

.single-product .site-main {
    background: var(--fradevo-bg-page);
}

.single-product div.product {
    color: var(--fradevo-text-main);
}

.single-product div.product p,
.single-product div.product li {
    line-height: var(--fradevo-line-base);
}

.single-product div.product .product_title {
    margin-bottom: var(--fradevo-space-4);
    line-height: var(--fradevo-line-heading);
}


/* =========================================================
   3. PRODUCT IMAGE + SUMMARY
   ========================================================= */

@media (min-width: 922px) {

    .single-product div.product .woocommerce-product-gallery {
        width: 38%;
    }

    .single-product div.product .summary {
        width: 58%;
    }
}

.single-product div.product .summary > * + * {
    margin-top: var(--fradevo-space-4);
}


/* =========================================================
   4. STANDARD FRADEVO CONTENT BLOCK
   ========================================================= */

.fradevo-block {
    box-sizing: border-box;
    width: 100%;
    margin: var(--fradevo-space-6) 0;
    padding: var(--fradevo-space-5);
    border: 1px solid var(--fradevo-border);
    border-radius: var(--fradevo-radius-md);
    background: var(--fradevo-bg-soft);
}

.fradevo-block > :first-child {
    margin-top: 0;
}

.fradevo-block > :last-child {
    margin-bottom: 0;
}


/* =========================================================
   5. CONSEIL FRADEVO
   ========================================================= */

.fradevo-conseil {
    box-sizing: border-box;
    width: 100%;
    margin: var(--fradevo-space-6) 0;
    padding: var(--fradevo-space-5);
    background: var(--fradevo-bg-advice);
    border: 1px solid #d7e7fb;
    border-radius: var(--fradevo-radius-md);
}

.fradevo-conseil h2,
.fradevo-conseil h3,
.fradevo-conseil h4 {
    margin-top: 0;
    margin-bottom: var(--fradevo-space-3);
    font-size: var(--fradevo-font-lg);
    line-height: var(--fradevo-line-heading);
}

.fradevo-conseil p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   6. PRICE COMPARISON
   ========================================================= */

.fradevo-compare,
.fradevo-compare-offers {
    box-sizing: border-box;
    width: 100%;
    margin: var(--fradevo-space-6) 0;
    padding: var(--fradevo-space-5);
    background: var(--fradevo-bg-compare);
    border: 1px solid #dce9dc;
    border-radius: var(--fradevo-radius-md);
}

.fradevo-compare h2,
.fradevo-compare h3,
.fradevo-compare-offers h2,
.fradevo-compare-offers h3 {
    margin-top: 0;
    margin-bottom: var(--fradevo-space-4);
    font-size: var(--fradevo-font-lg);
}


/* =========================================================
   7. WARNING / IMPORTANT INFORMATION
   ========================================================= */

.fradevo-warning {
    box-sizing: border-box;
    width: 100%;
    margin: var(--fradevo-space-6) 0;
    padding: var(--fradevo-space-5);
    background: var(--fradevo-bg-warning);
    border: 1px solid #f2dfac;
    border-radius: var(--fradevo-radius-md);
}


/* =========================================================
   8. PRODUCT META / SMALL TEXT
   ========================================================= */

.single-product .product_meta {
    margin-top: var(--fradevo-space-6);
    padding-top: var(--fradevo-space-4);
    border-top: 1px solid var(--fradevo-border);
    font-size: var(--fradevo-font-sm);
    color: var(--fradevo-text-secondary);
}


/* =========================================================
   9. BUTTONS
   ========================================================= */

.single-product .single_add_to_cart_button,
.fradevo-block .button,
.fradevo-compare .button,
.fradevo-compare-offers .button {
    min-height: 44px;
    padding: 11px 20px;
    border-radius: var(--fradevo-radius-sm);
    font-size: var(--fradevo-font-base);
    font-weight: 600;
    line-height: 1.3;
}


/* =========================================================
   10. TABLES / OFFER ROWS
   ========================================================= */

.fradevo-compare table,
.fradevo-compare-offers table {
    width: 100%;
    border-collapse: collapse;
}

.fradevo-compare td,
.fradevo-compare th,
.fradevo-compare-offers td,
.fradevo-compare-offers th {
    padding: var(--fradevo-space-3);
    border-bottom: 1px solid var(--fradevo-border);
    vertical-align: middle;
}

.fradevo-compare tr:last-child td,
.fradevo-compare-offers tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   11. CONTENT SPACING
   ========================================================= */

.single-product .woocommerce-product-details__short-description {
    margin-bottom: var(--fradevo-space-5);
}

.single-product .woocommerce-tabs {
    margin-top: var(--fradevo-space-8);
}

.single-product .woocommerce-tabs .panel > * + * {
    margin-top: var(--fradevo-space-4);
}


/* =========================================================
   12. MOBILE
   ========================================================= */

@media (max-width: 921px) {

    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .summary {
        width: 100%;
    }

    .single-product div.product .summary {
        margin-top: var(--fradevo-space-6);
    }

    .fradevo-block,
    .fradevo-conseil,
    .fradevo-compare,
    .fradevo-compare-offers,
    .fradevo-warning {
        margin-top: var(--fradevo-space-5);
        margin-bottom: var(--fradevo-space-5);
        padding: var(--fradevo-space-4);
        border-radius: var(--fradevo-radius-sm);
    }
}


/* =========================================================
   13. SMALL MOBILE
   ========================================================= */

@media (max-width: 544px) {

    :root {
        --fradevo-font-base: 15px;
        --fradevo-font-lg: 17px;
        --fradevo-font-xl: 20px;
        --fradevo-font-2xl: 24px;
    }

    .single-product div.product .product_title {
        line-height: 1.2;
    }

    .single-product .single_add_to_cart_button,
    .fradevo-block .button,
    .fradevo-compare .button,
    .fradevo-compare-offers .button {
        width: 100%;
        min-height: 46px;
    }
}

/* =========================================================
   14. COMPARE OFFER ROWS
   ========================================================= */

/* FRADEVO COMPARE OFFER ROWS v0.1 */

.fradevo-compare-offers {
    clear: both;
}

.fradevo-offer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fradevo-space-3);
    flex-wrap: wrap;
    padding: var(--fradevo-space-3) 0;
    border-bottom: 1px solid var(--fradevo-border);
}

.fradevo-offer-row:last-of-type {
    border-bottom: 0;
}

.fradevo-offer-merchant {
    min-width: 140px;
}

.fradevo-offer-price {
    margin-top: var(--fradevo-space-1);
    font-size: var(--fradevo-font-lg);
    font-weight: 700;
    color: var(--fradevo-text-main);
}

.fradevo-compare-note {
    margin: var(--fradevo-space-3) 0 0;
    font-size: var(--fradevo-font-sm);
    line-height: 1.5;
    color: var(--fradevo-text-secondary);
}

@media (max-width: 544px) {

    .fradevo-offer-row {
        align-items: stretch;
    }

    .fradevo-offer-merchant {
        width: 100%;
    }

    .fradevo-offer-row .button {
        width: 100%;
    }
}



/* =========================================================
   15. PRIME BADGE
   ========================================================= */

/* FRADEVO PRIME BADGE v0.4.1 */

.fradevo-prime-badge {
    display: inline-block;
    margin-left: var(--fradevo-space-1);
    padding: 2px 7px;
    border: 1px solid var(--fradevo-border);
    border-radius: 999px;
    background: var(--fradevo-bg-soft-2);
    color: var(--fradevo-text-secondary);
    font-size: var(--fradevo-font-xs);
    font-weight: 600;
    line-height: 1.4;
}

/* =========================================================
   16. CONSEIL FRADEVO — FINAL
   ========================================================= */

/* FRADEVO CONSEIL FINAL v0.4.2 */

.single-product .fradevo-conseil {
    box-sizing: border-box;
    width: 100%;
    margin: 28px 0 32px;
    padding: 20px 24px;

    background: #f5f9ff;

    border: 1px solid #d9e6f5;
    border-left: 3px solid #5f8fc9 !important;

    border-radius: 12px;

    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.03),
        0 4px 12px rgba(16, 24, 40, 0.04);
}

.single-product .fradevo-conseil h2,
.single-product .fradevo-conseil h3,
.single-product .fradevo-conseil h4 {
    margin: 0 0 10px;

    color: #356da8 !important;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.single-product .fradevo-conseil p {
    margin: 0;

    color: var(--fradevo-text-main);

    font-size: 16px;
    line-height: 1.65;
}

.single-product .fradevo-conseil p + p {
    margin-top: 10px;
}


/* =========================================================
   17. PRODUCT CONTENT RHYTHM
   ========================================================= */

.single-product .woocommerce-product-details__short-description {
    margin-bottom: 20px;
}

.single-product .summary > .fradevo-conseil,
.single-product .summary > .fradevo-block,
.single-product .summary > .fradevo-compare-offers {
    margin-top: 28px;
    margin-bottom: 28px;
}


/* =========================================================
   18. MOBILE REFINEMENTS
   ========================================================= */

@media (max-width: 544px) {

    .single-product .fradevo-conseil {
        margin: 22px 0 24px;
        padding: 16px 18px;

        border-left-width: 3px !important;
        border-radius: 10px;
    }

    .single-product .fradevo-conseil h2,
    .single-product .fradevo-conseil h3,
    .single-product .fradevo-conseil h4 {
        margin-bottom: 8px;

        font-size: 18px;
        line-height: 1.3;
    }

    .single-product .fradevo-conseil p {
        font-size: 15px;
        line-height: 1.6;
    }

    .single-product .fradevo-compare-offers,
    .single-product .fradevo-block,
    .single-product .fradevo-warning {
        padding: 16px 18px;
    }

    .single-product .fradevo-offer-row {
        gap: 10px;
    }
}

/* =========================================================
   16. RELATED / UPSELL PRODUCT CARDS
   ========================================================= */

/* FRADEVO RELATED PRODUCTS v0.4.2 */

.single-product .related.products,
.single-product .upsells.products {
    margin-top: var(--fradevo-space-8);
}

.single-product .related.products > h2,
.single-product .upsells.products > h2 {
    margin-bottom: var(--fradevo-space-6);
    line-height: 1.2;
}

.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product {
    margin-bottom: var(--fradevo-space-6);
}

.single-product .related.products ul.products li.product img,
.single-product .upsells.products ul.products li.product img {
    margin-bottom: var(--fradevo-space-3);
}

.single-product .related.products .ast-woo-product-category,
.single-product .upsells.products .ast-woo-product-category {
    margin-bottom: var(--fradevo-space-2);
    font-size: var(--fradevo-font-sm);
    line-height: 1.35;
    color: var(--fradevo-text-secondary);
}

.single-product .related.products .woocommerce-loop-product__title,
.single-product .upsells.products .woocommerce-loop-product__title {
    margin-top: 0;
    margin-bottom: var(--fradevo-space-2);
    line-height: 1.3;
}

@media (max-width: 544px) {

    .single-product .related.products,
    .single-product .upsells.products {
        margin-top: 34px;
        padding-top: 0;
    }

    .single-product .related.products > h2,
    .single-product .upsells.products > h2 {
        margin-top: 0;
        margin-bottom: 22px;
        font-size: 28px;
        line-height: 1.15;
    }

    .single-product .related.products ul.products,
    .single-product .upsells.products ul.products {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
        row-gap: 28px;
    }

    .single-product .related.products ul.products li.product,
    .single-product .upsells.products ul.products li.product {
        width: 100%;
        margin: 0;
        min-width: 0;
    }

    .single-product .related.products ul.products li.product img,
    .single-product .upsells.products ul.products li.product img {
        width: 100%;
        height: auto;
        margin-bottom: 12px;
    }

    .single-product .related.products .ast-woo-product-category,
    .single-product .upsells.products .ast-woo-product-category {
        display: block;
        margin-bottom: 7px;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.3;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .single-product .related.products .woocommerce-loop-product__title,
    .single-product .upsells.products .woocommerce-loop-product__title {
        display: -webkit-box;
        overflow: hidden;
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.25;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .single-product .related.products .price,
    .single-product .upsells.products .price {
        margin-top: 8px;
        font-size: 16px;
    }
}

/* =========================================================
   17. UPSELLS MOBILE CLEANUP
   ========================================================= */

/* FRADEVO UPSELLS MOBILE v0.4.3 */

@media (max-width: 544px) {

    .single-product section.up-sells.upsells.products {
        margin-top: 28px;
        padding-top: 0;
    }

    .single-product section.up-sells.upsells.products > h2 {
        position: relative;
        margin: 0 0 20px;
        font-size: 0;
        line-height: 1.15;
    }

    .single-product section.up-sells.upsells.products > h2::before {
        content: "Vous aimerez aussi";
        display: block;
        font-size: 28px;
        font-weight: 700;
        line-height: 1.15;
        color: var(--fradevo-text-main);
    }

    .single-product section.up-sells.upsells.products > h2::after {
        content: none !important;
        display: none !important;
    }

    .single-product section.up-sells.upsells.products ul.products {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
        row-gap: 26px;
    }

    .single-product section.up-sells.upsells.products ul.products li.product {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .single-product section.up-sells.upsells.products .woocommerce-loop-product__title {
        display: -webkit-box;
        overflow: hidden;
        margin: 0 0 6px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.22;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .single-product section.up-sells.upsells.products .price {
        display: block;
        margin: 4px 0 8px;
        font-size: 16px;
        line-height: 1.3;
    }

    .single-product section.up-sells.upsells.products .ast-woo-product-category {
        display: block;
        overflow: hidden;
        margin-bottom: 6px;
        font-size: 13px;
        line-height: 1.3;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .single-product section.up-sells.upsells.products .button {
        width: 100%;
        min-height: 42px;
        margin-top: 8px;
        padding: 10px 12px;
        font-size: 15px;
        line-height: 1.2;
    }

    .single-product section.up-sells.upsells.products .fradevo-affiliate-note,
    .single-product section.up-sells.upsells.products .affiliate-note,
    .single-product section.up-sells.upsells.products .product-affiliate-note {
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.35;
        color: var(--fradevo-text-secondary);
    }
}

/* =========================================================
   18. UPSELLS SPACING + AFFILIATE DISCLOSURE
   ========================================================= */

/* FRADEVO UPSELLS SPACING v0.4.4 */

@media (max-width: 544px) {

    /* Keep product information compact instead of vertically stretched */
    .single-product section.up-sells.upsells.products
    .astra-shop-summary-wrap {
        display: block;
        height: auto;
        min-height: 0;
    }

    .single-product section.up-sells.upsells.products
    .woocommerce-loop-product__title {
        margin-bottom: 8px !important;
    }

    .single-product section.up-sells.upsells.products
    .price {
        display: block;
        margin: 8px 0 10px !important;
        padding: 0 !important;
    }

    /* Override inline margin-top:auto */
    .single-product section.up-sells.upsells.products
    .fradevo-affiliate-button-wrap {
        width: 100% !important;
        margin-top: 8px !important;
    }

    .single-product section.up-sells.upsells.products
    .fradevo-affiliate-button-wrap .button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        margin: 0 !important;
        padding: 10px 8px;
        font-size: 14px;
        line-height: 1.2;
        text-align: center;
    }

    .single-product section.up-sells.upsells.products
    .fradevo-affiliate-disclosure-loop {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        margin-top: 6px !important;
        padding: 5px 7px !important;
        border-radius: 5px;
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .single-product section.up-sells.upsells.products
    .fradevo-affiliate-disclosure-loop strong {
        font-size: inherit;
    }
}



/* =========================================================
   19. UPSELLS MOBILE COMPACT FLOW
   ========================================================= */

/* FRADEVO UPSELLS COMPACT v0.4.5 */

@media (max-width: 544px) {

    .single-product section.up-sells.upsells.products
    .astra-shop-summary-wrap {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .single-product section.up-sells.upsells.products
    a.ast-loop-product__link {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    .single-product section.up-sells.upsells.products
    .woocommerce-loop-product__title {
        display: -webkit-box !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .single-product section.up-sells.upsells.products
    .price {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    .single-product section.up-sells.upsells.products
    .fradevo-affiliate-button-wrap {
        width: 100% !important;
        margin-top: 0 !important;
        flex: 0 0 auto !important;
    }
}

/* Variant names shown under each verified merchant offer (v0.5.0). */
.fradevo-offer-variant { margin-top: 4px; font-size: 0.9rem; line-height: 1.4; color: var(--fradevo-text-secondary); overflow-wrap: anywhere; }


/* FRADEVO Compare Offers — approved palette v2026-10; scoped to merchant cards. */
:root {
    --fradevo-compare-variant-blue: #194c85;
    --fradevo-compare-price-ink: #18283b;
    --fradevo-compare-cta-blue: #0869ce;
    --fradevo-compare-line: #e2e8f0;
}
.single-product .fradevo-compare-offers {
    background: #ffffff;
    border: 1px solid var(--fradevo-compare-line);
    border-radius: 12px;
}
.single-product .fradevo-compare-offers .fradevo-offer-row {
    background: #ffffff;
    border: 1px solid var(--fradevo-compare-line);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    gap: 12px;
}
.single-product .fradevo-compare-offers .fradevo-offer-row:last-of-type {
    border-bottom: 1px solid var(--fradevo-compare-line);
}
.single-product .fradevo-compare-offers .fradevo-offer-variant {
    color: var(--fradevo-compare-variant-blue);
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.single-product .fradevo-compare-offers .fradevo-offer-price,
.single-product .fradevo-compare-offers .fradevo-offer-price .amount {
    color: var(--fradevo-compare-price-ink);
}
.single-product .fradevo-compare-offers .fradevo-offer-row > a.button {
    background: var(--fradevo-compare-cta-blue);
    border-color: var(--fradevo-compare-cta-blue);
    color: #ffffff;
    text-align: center;
    text-decoration: none;
}
.single-product .fradevo-compare-offers .fradevo-offer-row > a.button:hover,
.single-product .fradevo-compare-offers .fradevo-offer-row > a.button:focus-visible {
    background: #0755a8;
    border-color: #0755a8;
    color: #ffffff;
}
@media (max-width: 544px) {
    .single-product .fradevo-compare-offers .fradevo-offer-row > a.button {
        width: 100%;
        box-sizing: border-box;
    }
}