/*
Theme Name:   Rockwell-Bot V3
Theme URI:    https://rockwell-bot.com/
Description:  Thème WordPress + WooCommerce sur mesure pour Rockwell-Bot, un bot Discord pour serveurs ARK: Survival Ascended. V3 : accueil refondu en page de vente (tarifs tirés de WooCommerce, parcours de démarrage, FAQ) et page Commandes groupée par commande racine.
Author:       Rockwell-Bot
Version:      3.0.3
Text Domain:  rockwell-bot
Requires PHP: 7.4
Tested up to: 6.6
WC requires at least: 8.0
WC tested up to: 9.0
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root{
    --rb-bg:           #0a0512;
    --rb-bg-alt:       #120a22;
    --rb-surface:      #170f2b;
    --rb-surface-2:    #1e1338;
    --rb-purple-900:   #1f0f3a;
    --rb-purple-700:   #3a1c66;
    --rb-purple-500:   #7c3aed;
    --rb-magenta:      #c026d3;
    --rb-pink:         #e94ff5;
    --rb-cyan:         #22d3ee;
    --rb-text:         #f3edff;
    --rb-text-muted:   #a996c9;
    --rb-text-dim:     #7d6a9e;
    --rb-border:       #2f1e52;
    --rb-border-light: #4a2a7a;
    --rb-radius:       10px;
    --rb-radius-lg:    16px;
    --rb-max:          1180px;
    --rb-font:         "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
    margin:0;
    overflow-x: hidden;
    background-color: var(--rb-bg);
    background-image:
        radial-gradient(circle at 12% 0%, rgba(192,38,211,.16), transparent 40%),
        radial-gradient(circle at 88% 15%, rgba(34,211,238,.10), transparent 45%);
    background-attachment: fixed;
    color: var(--rb-text);
    font-family: var(--rb-font);
    font-size: 16px;
    line-height: 1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--rb-cyan); text-decoration:none; }
a:hover{ color: var(--rb-pink); }
h1,h2,h3,h4,h5,h6{
    font-family: var(--rb-font);
    font-weight: 700;
    color: var(--rb-text);
    line-height: 1.2;
    margin: 0 0 .5em;
}
p{ color: var(--rb-text-muted); margin: 0 0 1em; }
ul{ margin:0; padding:0; }
.container{ max-width: var(--rb-max); margin: 0 auto; padding: 0 24px; }
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
::selection{ background: var(--rb-magenta); color:#fff; }

/* Skip link */
.skip-link{
    position:absolute; top:-100px; left:0;
    background: var(--rb-magenta); color:#fff;
    padding: 10px 18px; z-index: 10000; border-radius: 0 0 8px 0;
    transition: top .2s ease;
}
.skip-link:focus{ top:0; }

/* Buttons */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 13px 26px;
    border-radius: 8px;
    font-weight:600;
    font-size: 14px;
    letter-spacing:.2px;
    border: none;
    cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
    text-decoration:none;
}
.btn-primary{
    background: linear-gradient(90deg, var(--rb-purple-500), var(--rb-magenta));
    color:#fff;
    box-shadow: 0 6px 20px rgba(192,38,211,.30);
}
.btn-primary:hover{
    background: linear-gradient(90deg, var(--rb-magenta), var(--rb-cyan));
    box-shadow: 0 8px 26px rgba(34,211,238,.35);
    transform: translateY(-2px);
    color:#fff;
}
.btn-ghost{
    background: transparent;
    color: var(--rb-text);
    border: 1px solid var(--rb-border-light);
}
.btn-ghost:hover{
    border-color: var(--rb-cyan);
    color: var(--rb-cyan);
    transform: translateY(-2px);
}
.btn-block{ width:100%; }
.btn-sm{ padding: 9px 18px; font-size: 13px; }

/* Kicker / eyebrow label */
.kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size: 11px;
    font-weight:700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rb-cyan);
    margin-bottom: 14px;
}
.kicker::before{
    content:"";
    width:6px; height:6px; border-radius:50%;
    background: var(--rb-magenta);
    box-shadow: 0 0 10px var(--rb-magenta);
}

/* Gradient text helper */
.grad-text{
    background: linear-gradient(90deg, var(--rb-magenta), var(--rb-pink) 60%, var(--rb-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
.site-header{
    position: sticky;
    top:0;
    z-index: 999;
    background: rgba(10,5,18,.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rb-border);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.site-header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    color: var(--rb-text);
    font-weight:700;
    font-size: 18px;
}
.brand img{
    width:34px; height:34px; border-radius:50%;
    filter: drop-shadow(0 0 10px rgba(192,38,211,.55));
}
.brand:hover{ color: var(--rb-text); }

.primary-nav{
    display:flex;
    align-items:center;
    gap: 32px;
}
.primary-nav ul{
    list-style:none;
    display:flex;
    align-items:center;
    gap: 28px;
}
.primary-nav a{
    color: var(--rb-text-muted);
    font-size: 14px;
    font-weight:500;
}
.primary-nav a:hover{ color: var(--rb-cyan); }

.header-actions{
    display:flex;
    align-items:center;
    gap: 14px;
}
.header-cart{
    position:relative;
    display:inline-flex;
    align-items:center;
    color: var(--rb-text);
    font-size: 13px;
    gap:6px;
}
.header-cart .count{
    background: var(--rb-magenta);
    color:#fff;
    font-size: 10px;
    font-weight:700;
    border-radius: 20px;
    padding: 1px 6px;
    min-width: 16px;
    text-align:center;
}

.nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--rb-border-light);
    border-radius:6px;
    color: var(--rb-text);
    width: 38px; height:38px;
    align-items:center; justify-content:center;
    cursor:pointer;
}

@media (max-width: 860px){
    .primary-nav{
        position:fixed;
        top: 62px; left:0; right:0;
        background: var(--rb-bg-alt);
        border-bottom: 1px solid var(--rb-border);
        flex-direction:column;
        align-items:flex-start;
        padding: 20px 24px 26px;
        gap: 18px;
        transform: translateY(-12px);
        opacity:0;
        pointer-events:none;
        transition: all .18s ease;
    }
    .primary-nav.is-open{
        transform: translateY(0);
        opacity:1;
        pointer-events:auto;
    }
    .primary-nav ul{
        flex-direction:column;
        align-items:flex-start;
        gap: 16px;
        width:100%;
    }
    .nav-toggle{ display:inline-flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
    padding: 90px 0 70px;
}
.hero-grid{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 50px;
    align-items:center;
}
.hero h1{
    font-size: 46px;
    margin-bottom: 20px;
}
.hero p.lead{
    font-size: 17px;
    max-width: 480px;
    margin-bottom: 30px;
}
.hero-ctas{
    display:flex;
    gap: 14px;
    margin-bottom: 46px;
    flex-wrap:wrap;
}
.hero-stats{
    display:flex;
    gap: 40px;
    flex-wrap:wrap;
}
.hero-stats .stat b{
    display:block;
    font-size: 24px;
    color: var(--rb-text);
}
.hero-stats .stat span{
    font-size: 12px;
    color: var(--rb-text-dim);
}
.hero-art{
    position:relative;
    display:flex;
    justify-content:center;
}
.hero-art img{
    width: 100%;
    max-width: 380px;
    filter: drop-shadow(0 0 60px rgba(124,58,237,.45));
}

/* ==========================================================================
   SECTIONS COMMON
   ========================================================================== */
section{ padding: 80px 0; }
.section-head{
    text-align:center;
    max-width: 620px;
    margin: 0 auto 54px;
}
.section-head h2{ font-size: 32px; }
.section-head p{ font-size: 15px; }

/* ==========================================================================
   FEATURES
   ========================================================================== */
.features-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.feature-card{
    background: linear-gradient(180deg, rgba(58,28,102,.28), rgba(23,15,43,.5));
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-lg);
    padding: 26px 22px;
    transition: border-color .2s ease, transform .2s ease;
}
.feature-card:hover{
    border-color: var(--rb-cyan);
    transform: translateY(-4px);
}
.feature-card h3{ font-size: 16px; margin-bottom:8px; }
.feature-card p{ font-size: 13.5px; margin:0; }

.commands-list{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 50px;
}
.command-row{
    display:flex;
    gap: 18px;
    padding: 20px;
    background: rgba(58,28,102,.18);
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius);
}
.command-row code{
    flex-shrink:0;
    background: var(--rb-purple-900);
    color: var(--rb-cyan);
    border: 1px solid var(--rb-border-light);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 13px;
    height: fit-content;
    white-space:nowrap;
}
.command-row h3{ font-size:14.5px; margin: 0 0 4px; }
.command-row p{ font-size:13px; margin:0; }

.features-more{
    text-align:center;
    margin-top: 44px;
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing-card{
    max-width: 640px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(58,28,102,.32), rgba(23,15,43,.6));
    border: 1px solid var(--rb-border-light);
    border-radius: var(--rb-radius-lg);
    padding: 40px;
    box-shadow: 0 20px 60px rgba(124,58,237,.12);
}
.pricing-card > .plan-name{
    color: var(--rb-cyan);
    font-weight:700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}
.pricing-card h3{ font-size: 24px; margin-bottom: 10px; }
.pricing-card > p{ font-size: 14px; margin-bottom: 26px; }
.pricing-features{
    list-style:none;
    margin: 0 0 30px;
    display:grid;
    gap: 10px;
}
.pricing-features li{
    display:flex;
    align-items:flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--rb-text-muted);
}
.pricing-features li::before{
    content:"✓";
    color: var(--rb-cyan);
    font-weight:700;
    flex-shrink:0;
}
.pricing-options{
    display:grid;
    gap: 12px;
}
.pricing-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--rb-border-light);
    border-radius: var(--rb-radius);
    background: rgba(10,5,18,.4);
    transition: border-color .2s ease;
}
.pricing-option:hover{ border-color: var(--rb-cyan); }
.pricing-option.is-best{
    border-color: var(--rb-magenta);
    box-shadow: 0 0 0 1px var(--rb-magenta);
}
.pricing-option .opt-left{ display:flex; align-items:center; gap:10px; }
.pricing-option .opt-duration{ font-weight:600; font-size: 14px; }
.pricing-option .opt-save{
    font-size: 10.5px;
    font-weight:700;
    color: #0a0512;
    background: var(--rb-cyan);
    padding: 2px 8px;
    border-radius: 20px;
    text-transform:uppercase;
}
.pricing-option .opt-right{ display:flex; align-items:center; gap: 14px; }
.pricing-option .opt-price{ font-weight:700; font-size:16px; }
.pricing-option .opt-price small{ color: var(--rb-text-dim); font-weight:400; font-size:11px; }

/* ==========================================================================
   CTA / DASHBOARD BAND
   ========================================================================== */
.cta-band{
    background: linear-gradient(120deg, rgba(124,58,237,.18), rgba(192,38,211,.10));
    border-top: 1px solid var(--rb-border);
    border-bottom: 1px solid var(--rb-border);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.cta-band .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 30px;
    flex-wrap:wrap;
    padding: 46px 24px;
}
.cta-band h3{ font-size: 20px; margin-bottom: 4px; }
.cta-band p{ margin:0; font-size:14px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
    background: var(--rb-bg-alt);
    border-top: 1px solid var(--rb-border);
    padding: 60px 0 26px;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.footer-grid{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom: 14px; }
.footer-brand img{ width:30px; height:30px; border-radius:50%; }
.footer-brand span{ font-weight:700; color: var(--rb-text); }
.footer-col h4{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--rb-text-dim);
    margin-bottom: 16px;
}
.footer-col ul{ list-style:none; display:grid; gap: 10px; }
.footer-col a{ color: var(--rb-text-muted); font-size: 13.5px; }
.footer-col a:hover{ color: var(--rb-cyan); }
.footer-bottom{
    border-top: 1px solid var(--rb-border);
    padding-top: 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap: 12px;
}
.footer-bottom p{ margin:0; font-size:12.5px; color: var(--rb-text-dim); }
.footer-legal-menu{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap: 4px;
    margin:0; padding:0;
}
.footer-legal-menu li{ display:flex; align-items:center; }
.footer-legal-menu li:not(:last-child)::after{
    content:"•"; color: var(--rb-border-light); margin: 0 10px;
}
.footer-legal-menu a{ font-size: 12.5px; color: var(--rb-text-dim); }
.footer-legal-menu a:hover{ color: var(--rb-cyan); }

@media (max-width: 860px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-art{ order:-1; }
    .features-grid{ grid-template-columns: repeat(2,1fr); }
    .commands-list{ grid-template-columns: 1fr; }
    .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px){
    .hero h1{ font-size: 32px; }
    .features-grid{ grid-template-columns: 1fr; }
    .footer-grid{ grid-template-columns: 1fr; }
    .pricing-card{ padding: 26px; }
    .pricing-option{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   PAGE HEADER (pages internes : boutique, panier, aide, légal...)
   ========================================================================== */
.page-hero{
    padding: 60px 0 40px;
    text-align:center;
    border-bottom: 1px solid var(--rb-border);
}
.page-hero h1{ font-size: 32px; margin-bottom: 10px; }
.page-hero p{ max-width: 560px; margin: 0 auto; }

.content-wrap{
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 24px 90px;
}
.content-wrap h2{ font-size: 22px; margin-top: 2em; }
.content-wrap p, .content-wrap li{ color: var(--rb-text-muted); }

/* ==========================================================================
   HELP CENTER
   ========================================================================== */
.help-search{
    max-width: 480px;
    margin: 0 auto 50px;
    position:relative;
}
.help-search input{
    width:100%;
    background: var(--rb-surface);
    border: 1px solid var(--rb-border-light);
    color: var(--rb-text);
    padding: 13px 16px 13px 42px;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--rb-font);
}
.help-search input:focus{ outline:none; border-color: var(--rb-cyan); }
.help-search::before{
    content:"🔍";
    position:absolute;
    left: 14px; top:50%;
    transform: translateY(-50%);
    font-size: 13px;
    opacity:.6;
}

.help-categories{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin-bottom: 50px;
}
.help-cat-btn{
    background: transparent;
    border: 1px solid var(--rb-border-light);
    color: var(--rb-text-muted);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 12.5px;
    font-weight:600;
    cursor:pointer;
    transition: all .15s ease;
}
.help-cat-btn:hover{ border-color: var(--rb-cyan); color: var(--rb-cyan); }
.help-cat-btn.is-active{
    background: linear-gradient(90deg, var(--rb-purple-500), var(--rb-magenta));
    border-color: transparent;
    color:#fff;
}

.help-groups{ display:grid; gap: 46px; }
.help-group-title{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--rb-text-dim);
    margin-bottom: 18px;
}
.help-cmd{
    display:flex;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius);
    background: rgba(58,28,102,.14);
    margin-bottom: 12px;
    transition: border-color .15s ease;
}
.help-cmd:hover{ border-color: var(--rb-border-light); }
.help-cmd code{
    flex-shrink:0;
    height: fit-content;
    background: var(--rb-purple-900);
    color: var(--rb-cyan);
    border: 1px solid var(--rb-border-light);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    white-space:nowrap;
    max-width: 190px;
    overflow-x: auto;
}
.help-cmd-body{ flex:1; min-width:0; }
.help-cmd-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.help-cmd h3{ font-size: 15px; margin: 0; }
.help-cmd p{ font-size: 13.5px; margin:0; }
.help-cmd.is-hidden{ display:none; }

.role-badge{
    flex-shrink:0;
    font-size: 10px;
    font-weight:700;
    text-transform: uppercase;
    letter-spacing:.4px;
    padding: 3px 9px;
    border-radius: 20px;
    white-space:nowrap;
}
.role-badge.role-player{ background: rgba(34,211,238,.14); color: var(--rb-cyan); border: 1px solid rgba(34,211,238,.35); }
.role-badge.role-admin{ background: rgba(124,58,237,.16); color: #b39bfa; border: 1px solid rgba(124,58,237,.4); }
.role-badge.role-pro{ background: rgba(233,79,245,.14); color: var(--rb-pink); border: 1px solid rgba(233,79,245,.35); }
.role-badge.role-owner{ background: rgba(255,180,60,.14); color: #ffb43c; border: 1px solid rgba(255,180,60,.35); }

@media (max-width: 560px){
    .help-cmd{ flex-direction:column; }
    .help-cmd code{ max-width:100%; }
}

.help-empty{
    text-align:center;
    color: var(--rb-text-dim);
    padding: 40px 0;
    display:none;
}
.help-empty.is-visible{ display:block; }

.help-cta{
    text-align:center;
    margin-top: 60px;
    padding: 40px;
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-lg);
    background: rgba(124,58,237,.08);
}
.help-cta h3{ font-size: 18px; margin-bottom: 6px; }

/* ==========================================================================
   WOOCOMMERCE — GLOBAL
   ========================================================================== */
.woocommerce-breadcrumb{
    max-width: var(--rb-max);
    margin: 0 auto;
    padding: 20px 24px 0;
    font-size: 12.5px;
    color: var(--rb-text-dim);
}
.woocommerce-breadcrumb a{ color: var(--rb-text-dim); }
.woocommerce-breadcrumb a:hover{ color: var(--rb-cyan); }

.woocommerce{
    max-width: var(--rb-max);
    margin: 0 auto;
    padding: 30px 24px 0;
}
#main.site-main{
    padding-bottom: 70px;
}
#primary, .content-area, #main, .site-main{
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    max-width: none !important;
}
.woocommerce-notices-wrapper{ margin-bottom: 20px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error{
    background: var(--rb-surface) !important;
    border-top-color: var(--rb-cyan) !important;
    color: var(--rb-text) !important;
    border-radius: var(--rb-radius);
    padding: 14px 20px !important;
    list-style:none;
}
.woocommerce-message .button, .woocommerce-error .button{
    background: linear-gradient(90deg, var(--rb-purple-500), var(--rb-magenta));
    color:#fff;
    border-radius: 6px;
}

/* Titre "Shop" par défaut */
.page-title, .woocommerce-products-header__title{
    font-size: 30px;
    text-align:center;
    margin-bottom: 40px;
}

/* Ordering / result count bar */
.woocommerce-ordering select,
.woocommerce-result-count{
    color: var(--rb-text-muted) !important;
    font-size: 13px;
}
.woocommerce-ordering select{
    background: var(--rb-surface);
    border: 1px solid var(--rb-border-light);
    color: var(--rb-text) !important;
    padding: 8px 12px;
    border-radius: 6px;
}
.woocommerce-ordering, .woocommerce-result-count{
    margin-bottom: 30px !important;
}

/* ==========================================================================
   WOOCOMMERCE — PRODUCT GRID / CARDS
   ========================================================================== */
.woocommerce ul.products{
    display:flex !important;
    flex-wrap: wrap !important;
    gap: 22px;
    list-style:none;
    margin: 0;
    padding:0;
}
.woocommerce ul.products li.product{
    background: linear-gradient(180deg, rgba(58,28,102,.30), rgba(23,15,43,.55));
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-lg);
    padding: 18px 20px;
    text-align:center;
    transition: border-color .2s ease, transform .2s ease;
    margin: 0 !important;
    float: none !important;
    position: relative;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box !important;
    flex: 1 1 260px !important;
    width: auto !important;
    max-width: 340px !important;
    min-width: 170px;
}
.woocommerce ul.products li.product:hover{
    border-color: var(--rb-cyan);
    transform: translateY(-4px);
}
.woocommerce ul.products li.product img{
    width: 100%;
    border-radius: var(--rb-radius);
    margin-bottom: 18px;
    border: 1px solid var(--rb-border);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 17px;
    color: var(--rb-text);
    margin: 0 0 10px;
}
.woocommerce ul.products li.product .product-short-desc{
    font-size: 13px;
    color: var(--rb-text-muted);
    margin-bottom: 14px;
    flex-grow: 1;
}
.woocommerce ul.products li.product .product-short-desc p{ margin:0; color:inherit; }
.woocommerce ul.products li.product .savings-pill{
    display:inline-block;
    font-size: 10.5px;
    font-weight:700;
    color: #0a0512;
    background: var(--rb-cyan);
    padding: 3px 10px;
    border-radius: 20px;
    text-transform:uppercase;
    letter-spacing:.3px;
    margin-bottom: 12px;
}
.woocommerce ul.products li.product .price{
    color: var(--rb-cyan) !important;
    font-weight:700;
    font-size: 19px;
    display:block;
    margin-bottom: 18px;
}
.woocommerce ul.products li.product .price del{ color: var(--rb-text-dim); opacity:.7; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .button{
    width:100%;
    background: linear-gradient(90deg, var(--rb-purple-500), var(--rb-magenta));
    color:#fff !important;
    border-radius: 8px;
    padding: 13px;
    font-weight:600;
    font-size: 13px;
    text-transform:uppercase;
    letter-spacing:.4px;
    border:none;
    margin-top: auto;
}
.woocommerce ul.products li.product .button:hover{
    background: linear-gradient(90deg, var(--rb-magenta), var(--rb-cyan));
}
.woocommerce ul.products li.product .popular-ribbon{
    position:absolute;
    top: -1px; right: 18px;
    background: linear-gradient(90deg, var(--rb-magenta), var(--rb-pink));
    color:#fff;
    font-size: 10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding: 6px 12px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(233,79,245,.4);
}
.woocommerce ul.products li.product.is-popular{
    border-color: var(--rb-border-light);
    box-shadow: 0 0 0 1px var(--rb-magenta);
}
.woocommerce span.onsale{
    display: none !important;
}

/* ==========================================================================
   WOOCOMMERCE — SINGLE PRODUCT
   ========================================================================== */
.woocommerce div.product{
    display:grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 50px;
}
.woocommerce div.product div.images img{
    border-radius: var(--rb-radius-lg);
    border: 1px solid var(--rb-border);
}
.woocommerce div.product .product_title{ font-size: 28px; }
.woocommerce div.product p.price, .woocommerce div.product span.price{
    color: var(--rb-cyan) !important;
    font-size: 24px;
    font-weight:700;
}
.woocommerce div.product .woocommerce-product-details__short-description{
    color: var(--rb-text-muted);
    margin: 18px 0;
}
.woocommerce div.product form.cart .button{
    background: linear-gradient(90deg, var(--rb-purple-500), var(--rb-magenta));
    color:#fff;
    border-radius: 8px;
    padding: 14px 30px;
    font-weight:600;
    border:none;
    text-transform:uppercase;
    font-size: 13px;
    letter-spacing:.4px;
}
.woocommerce div.product .quantity input.qty{
    background: var(--rb-surface);
    border: 1px solid var(--rb-border-light);
    color: var(--rb-text);
    border-radius: 6px;
    height: 46px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{
    border-bottom: 1px solid var(--rb-border);
    margin: 40px 0 0;
    padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
    background: transparent !important;
    border: none !important;
    color: var(--rb-text-muted);
    margin: 0 24px 0 0 !important;
    padding: 0 0 12px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover{
    color: var(--rb-cyan);
    border-bottom: 2px solid var(--rb-cyan) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ color: inherit; }
.woocommerce div.product .woocommerce-tabs .panel{
    padding-top: 24px;
    color: var(--rb-text-muted);
    border:none;
}
.related.products{ margin-top: 70px; }
.related.products > h2{ font-size: 22px; text-align:center; margin-bottom: 34px; }

/* ==========================================================================
   WOOCOMMERCE — CART / CHECKOUT
   ========================================================================== */
.woocommerce table.shop_table{
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius);
    border-collapse: separate;
    overflow:hidden;
}
.woocommerce table.shop_table th{
    background: var(--rb-surface);
    color: var(--rb-text);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--rb-border) !important;
}
.woocommerce table.shop_table td{
    border-top: 1px solid var(--rb-border) !important;
    color: var(--rb-text-muted);
}
.woocommerce table.shop_table td.product-name a{ color: var(--rb-text); }
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce-Price-amount{ color: var(--rb-cyan) !important; font-weight:600; }

.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container .select2-selection--single{
    background: var(--rb-surface) !important;
    border: 1px solid var(--rb-border-light) !important;
    color: var(--rb-text) !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    height:auto !important;
}
.select2-container .select2-selection__rendered{ color: var(--rb-text) !important; line-height: 2.2 !important; }
.select2-dropdown{ background: var(--rb-surface) !important; border-color: var(--rb-border-light) !important; }
.select2-results__option{ color: var(--rb-text-muted) !important; }
.select2-results__option--highlighted{ background: var(--rb-purple-700) !important; }

.woocommerce form .form-row label{ color: var(--rb-text-muted); font-size: 13px; }

/* Les champs des blocs Cart & Checkout etaient forces ici en texte gris fonce
   (#1a1a1a) sur fond clair. Ils sont desormais traites dans la section
   "PANIER ET CHECKOUT (BLOCS WOOCOMMERCE)" en bas de ce fichier, avec un
   habillage sombre coherent avec le reste du theme. */
.woocommerce-checkout #payment{
    background: var(--rb-surface) !important;
    border-radius: var(--rb-radius) !important;
    border: 1px solid var(--rb-border) !important;
}
.woocommerce-checkout #payment div.payment_box{
    background: var(--rb-purple-900) !important;
    color: var(--rb-text-muted);
}
.woocommerce-checkout #payment div.payment_box::before{ border-bottom-color: var(--rb-purple-900) !important; }
#order_review, .woocommerce-checkout-review-order{
    background: var(--rb-surface);
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-lg);
    padding: 24px;
}
.cart-collaterals .cart_totals{
    background: var(--rb-surface);
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-lg);
    padding: 24px;
}
.cart-collaterals .cart_totals h2{ font-size:18px; }

.woocommerce a.remove{
    color: var(--rb-text-dim) !important;
    background: transparent !important;
}
.woocommerce a.remove:hover{ color: var(--rb-pink) !important; background:transparent !important; }

/* ==========================================================================
   WOOCOMMERCE — MY ACCOUNT
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation{
    background: var(--rb-surface);
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius);
    padding: 10px 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ border:none !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
    display:block;
    padding: 10px 20px;
    color: var(--rb-text-muted);
    font-size: 14px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
    color: var(--rb-cyan);
    background: rgba(34,211,238,.06);
}
.woocommerce-MyAccount-content{
    background: var(--rb-surface);
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius);
    padding: 28px;
}
.woocommerce-account .addresses .title .edit,
.woocommerce-MyAccount-content a:not(.button){ color: var(--rb-cyan); }

/* Order received / thank you */
.woocommerce-order{
    max-width: 640px;
    margin: 0 auto;
    text-align:center;
}
.woocommerce-order-overview{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap: 20px;
    padding: 24px;
    background: var(--rb-surface);
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius);
    margin: 30px 0;
}
.woocommerce-order-overview li{ font-size: 13px; color: var(--rb-text-muted); }
.woocommerce-order-overview li strong{ color: var(--rb-text); display:block; }

@media (max-width: 650px){
    .woocommerce div.product{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
    .woocommerce ul.products li.product{
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}