/* ============================================================
   FR Carousel Widget – fr-carousel.css v1.2
   Calqué sur la maquette HTML fournie.
   Préfixe : frcw2- (pas de collision avec frcw- du 1er widget)
   ============================================================ */

.frcw2-wrapper {
    position:    relative;
    width:       100%;
    max-width:   1232px;
    margin:      0 auto;
    font-family: 'Helvetica Neue', sans-serif;
}

.frcw2-wrapper *,
.frcw2-wrapper *::before,
.frcw2-wrapper *::after {
    box-sizing: border-box;
}

/* ── Variables globales ── */
.frcw2-wrapper {
    --frcw2-card-bg:        #1D242C;
    --frcw2-card-border:    #252a35;
    --frcw2-text:           #e8eaf0;
    --frcw2-muted:          #7a8099;
    --frcw2-img-bg:         #252a35;
    --frcw2-card-bg-mobile: #e8eaf0;
}



/* ══════════════════════════════════════════════
   DESKTOP — grille 3 colonnes (layout par défaut)
   ══════════════════════════════════════════════ */

.frcw2-grid { width: 100%; }

.frcw2-track {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 390px));
    gap:                   16px;
    justify-content:       center;
}

/* Les pages sont transparentes dans la grille desktop */
.frcw2-page        { display: contents; }
.frcw2-page.active { display: contents; }

/* ── Card desktop ── */
.frcw2-card {
    --frcw2-color-label: #7fff6e;
    --frcw2-color-title: #e8eaf0;
    --frcw2-color-price: #7fff6e;
    --frcw2-color-desc:  #e8eaf0;
    --frcw2-color-learn: #e8eaf0;

    background:     var(--frcw2-card-bg);
    border:         1px solid var(--frcw2-card-border);
    padding:        10px;
    display:        flex;
    flex-direction: row;
    gap:            16px;
    position:       relative;
    overflow:       hidden;
    min-width:      0;
    max-width:      395px;
    max-height:     267px;
    transition:     border-color 0.25s ease;
}

/* ── Image desktop ── */
.frcw2-card-image {
    
    min-width:       110px;
    background:      var(--frcw2-img-bg);
    overflow:        hidden;
    align-self:      stretch;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.frcw2-card-image img {
    width:           100%;
    max-height:      267px;
    object-fit:      contain;
    object-position: center;
    display:         block;
    height: 230px !important;
}

/* ── Contenu ── */
.frcw2-card-content {
    display:        flex;
    flex-direction: column;
    flex:           1;
    min-width:      0;
}

/* ── Label (ex: "Effect") ── */
.frcw2-card-label {
    font-size:      16px;
    font-weight:    500;
    letter-spacing: 0.08em;
    line-height:    1.5;
    color:          var(--frcw2-color-label);
}

/* ── Titre ── */
.frcw2-card-title {
    font-size:   22px;
    font-weight: 500;
    color:       var(--frcw2-color-title);
    line-height: 1.1;
    margin:      0;
}

/* ── fr_including_items — visible desktop, caché mobile ── */
.frcw2-card-items {
    display:        flex;
    flex-direction: column;
    list-style:     none;
    margin:         4px 0 0 0;
    padding:        0;
    gap:            2px;
}

.frcw2-card-item {
    font-size:   13px;
    color:       var(--frcw2-color-desc);
    color: #e8eaf0;
    line-height: 1.4em;
}

/* ── fr_description_short — caché desktop, visible mobile ── */
.frcw2-wrapper .frcw2-card-desc {
    display: none !important;
}

/* ── Learn more — caché desktop, visible mobile ── */
.frcw2-wrapper .frcw2-card-learn {
    display: none !important;
}

/* ── Footer ── */
.frcw2-card-footer {
    display:        flex;
    flex-direction: column;
    margin-top:     auto;
    gap:            6px;
}

.frcw2-card-footer-top {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
}

/* ── Prix ── */
.frcw2-card-price {
    font-family: inherit;
    font-size:   18px;
    font-weight: 500;
    color:       var(--frcw2-color-price);
    text-align:  right;
    align-self:  flex-end;
}

/* ── Bouton panier ── */
.frcw2-btn-cart {
    font-family:   inherit;
    background:    black;
    border:        0;
    font-size:     16px;
    color:         white;
    padding:       2px 8px;
    border-radius: 24px;
    cursor:        pointer;
    transition:    background 0.15s, transform 0.1s;
    max-height:    166px;
    
}

.frcw2-btn-cart:hover    { background: #fff; transform: scale(1.04); }
.frcw2-btn-cart:active   { transform: scale(0.97); }
.frcw2-btn-cart:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Navigation — cachée par défaut ── */
.frcw2-nav { display: none; }

/* ══════════════════════════════════════════════
   CAROUSEL ACTIF (classe .is-carousel ajoutée par JS)
   Identique à .cards-wrapper.is-carousel dans la maquette
   ══════════════════════════════════════════════ */

.frcw2-wrapper.is-carousel .frcw2-track {
    display: block;
}

.frcw2-wrapper.is-carousel .frcw2-page {
    display:               none;
    grid-template-columns: 1fr 1fr;
    gap:                   24px;
    align-items:           stretch;
    max-width:             850px;
    margin:                0 auto;
}

.frcw2-wrapper.is-carousel .frcw2-page.active {
    display: grid;
}

.frcw2-wrapper.is-carousel .frcw2-nav {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    margin-top:      20px;
}

/* Image plus large en mode carousel */
.frcw2-wrapper.is-carousel .frcw2-card-image {
    width:     45%;
    min-width: 0;
    flex-shrink: 0;
}

.frcw2-wrapper.is-carousel .frcw2-card-content {
    flex:      1;
    min-width: 0;
}

.frcw2-wrapper.is-carousel .frcw2-card-image img {
    width:      100%;
    max-height: none;
    object-fit: contain;
}

/* ── Boutons nav ── */
.frcw2-btn-nav {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    background:      var(--frcw2-card-bg);
    border:          1px solid var(--frcw2-card-border);
    border-radius:   50%;
    color:           var(--frcw2-muted);
    cursor:          pointer;
    flex-shrink:     0;
    transition:      background 0.2s, border-color 0.2s, transform 0.15s;
}

.frcw2-btn-nav:hover    { background: #252a35; border-color: #3a4055; color: var(--frcw2-text); transform: scale(1.1); }
.frcw2-btn-nav:disabled { opacity: 1; cursor: not-allowed; transform: none; color: var(--frcw2-text); background: #252a35; border-color: var(--frcw2-card-border); }

.frcw2-dots {
    display:         flex;
    align-items:     center;
    font-size:       12px;
    color:           var(--frcw2-muted);
    min-width:       32px;
    justify-content: center;
}

/* ══════════════════════════════════════════════
   MOBILE ≤ 767px
   Calqué exactement sur @media (max-width: 767px)
   de la maquette HTML
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
    
    .frcw2-wrapper .frcw2-card-desc {
        display:block !important;
    }
    
    .frcw2-wrapper .frcw2-card-learn {
        display:block !important;

    }
 

    /* Reset → liste verticale flat (is-mobile OU is-carousel sur mobile) */
    .frcw2-wrapper.is-mobile .frcw2-track,
    .frcw2-wrapper.is-carousel .frcw2-track {
        display:        flex !important;
        flex-direction: column !important;
        gap:            12px;
    }

    .frcw2-wrapper.is-mobile .frcw2-page,
    .frcw2-wrapper.is-carousel .frcw2-page {
        display:        flex !important;
        flex-direction: column !important;
        gap:            12px;
        max-width:      100%;
    }

    /* Pages non-active aussi visibles sur mobile */
    .frcw2-wrapper.is-mobile .frcw2-page {
        display: flex !important;
    }

    .frcw2-wrapper.is-mobile .frcw2-nav,
    .frcw2-wrapper.is-carousel .frcw2-nav {
        display: none !important;
    }

    /* Card mobile : horizontale, fond clair */
    .frcw2-card {
        max-width:      100%;
        max-height:     none !important;
        border-radius:  8px;
        padding:        0;
        gap:            0;
        flex-direction: row !important;
        background:     var(--frcw2-card-bg-mobile);
        border:         none;
        overflow:       hidden;
    }

    /* Image mobile */
    .frcw2-card-image,
    .frcw2-wrapper.is-carousel .frcw2-card-image {
        width:         45%;
        min-width:     45%;
        max-height:    unset;
        background:    #d0d3db;
        border-radius: 0;
        align-self:    stretch;
        flex-shrink:   0;
    }

    .frcw2-card-image img,
    .frcw2-wrapper.is-carousel .frcw2-card-image img {
        width:      43%;
        height:     100% !important;
        object-fit: contain;
        
    }

    /* Contenu mobile */
    .frcw2-card-content {
        flex:       1;
        padding:    12px 14px;
        background: var(--frcw2-card-bg-mobile);
        position:   relative;
    }

    /* Icône play — coin haut droite */
    .frcw2-card-content::after {
        content:       '';
        position:      absolute;
        top:           10px;
        right:         12px;
        width:         22px;
        height:        22px;
        border:        1.5px solid #333;
        border-radius: 50%;
        background:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/14px no-repeat;
    }

    /* Label caché mobile */
    .frcw2-card-label { display: none; }

    /* Including items caché mobile */
    .frcw2-card-items { display: none; }

    /* Titre mobile */
    .frcw2-card-title {
        font-size:   16px;
        font-weight: 700;
        margin:      0 0 2px 0;
        line-height: 1.2;
        color:       var(--frcw2-color-title);
    }

    /* fr_description_short — visible mobile uniquement */
    .frcw2-card-desc {
        display:    block !important;
        font-size:  13px;
        color:      #333;
        line-height: 1.4;
        margin:     0 0 8px 0;
    }

    /* Footer mobile */
    .frcw2-card-footer {
        flex-direction: column;
        gap:            6px;
        margin-top:     auto;
    }

    .frcw2-card-footer-top {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
    }

    /* Learn more — visible mobile */
    .frcw2-card-learn {
        display:         inline-block;
        font-size:       11px;
        font-weight:     700;
        color:           #111;
        text-decoration: none;
    }

    /* Prix mobile */
    .frcw2-card-price {
        font-size:   18px;
        font-weight: 700;
        align-self:  unset;
        color:       var(--frcw2-color-price);
    }

    /* Bouton panier mobile — identique au 1er widget */
    .frcw2-btn-cart {
        background:    black;
        color:         white;
        border-radius: 24px;
        padding:       4px 10px;
        font-size:     12px;
        width:         auto;
        align-self:    flex-end;
        text-align:    center;
    }

    .frcw2-btn-cart:hover { background: #fff; color: #000; transform: none; }
}