/* =====================================================================
   Jungle Cannabis Seeds — Brand stylesheet
   Couleurs officielles :
     Primary   : #2C2370   (violet profond)
     Secondary : #EC5F7A   (rose-orangé nébuleuse)
   ===================================================================== */

:root {
    --jcs-primary:   #4A1D8F;
    --jcs-secondary: #EC5F7A;
    --jcs-white:     #ffffff;
    --jcs-text:      #1a1a1a;

    /* Override scrollbar Woodmart (carrousels) en couleur brand secondaire */
    --wd-nscroll-drag-bg:       #EC5F7A;
    --wd-nscroll-drag-bg-hover: #2C2370;
}

/* ---------- SCROLLBARS CARROUSELS — couleur secondaire brand ---------- */
/* Override aussi via classes pour les contextes où les vars CSS ne sont pas dispo */
.wd-nav-scroll-drag:before {
    background: var(--jcs-secondary, #EC5F7A) !important;
}
.wd-nav-scroll-drag:hover:before,
.wd-grabbing > .wd-nav-scroll-drag:before {
    background: var(--jcs-primary, #2C2370) !important;
}
/* Fallback Swiper natif */
.swiper-scrollbar-drag {
    background: var(--jcs-secondary, #EC5F7A) !important;
}

/* ---------- FLÈCHES NAVIGATION CARROUSEL — couleur primary brand ---------- */
/* Cible toutes les variantes de flèches Woodmart utilisées dans les sliders/carrousels */
.wd-btn-arrow,
.wd-prev-arrow,
.wd-next-arrow,
.wd-slider-arrows .wd-btn-arrow,
.wd-carousel-arrows .wd-btn-arrow,
.swiper-button-prev,
.swiper-button-next {
    color: var(--jcs-primary, #2C2370) !important;
}
.wd-btn-arrow:hover,
.wd-prev-arrow:hover,
.wd-next-arrow:hover {
    color: var(--jcs-secondary, #EC5F7A) !important;
}
/* Override CSS vars Woodmart pour les arrows */
.wd-slider-arrows,
.wd-carousel-arrows {
    --wd-arrow-color: var(--jcs-primary, #2C2370) !important;
    --wd-arrow-color-hover: var(--jcs-secondary, #EC5F7A) !important;
    --wd-arrow-bg-hover: var(--jcs-primary, #2C2370) !important;
}

/* ---------- BOUTONS CATÉGORIES / PILLS sur la HOME (Féminisées, Auto, etc.) ---------- */
/* Le widget Woodmart "Product Categories" / boutons catégorie en pills */
.wd-cats-element a,
.wd-cats-element .wd-cat,
.wd-products-with-tabs .wd-tabs-header a,
.wd-products-with-tabs .wd-nav-tabs a,
.woocommerce-categories .wd-cat a,
.wd-category-button {
    background-color: var(--jcs-primary, #2C2370) !important;
    color: #ffffff !important;
    border-color: var(--jcs-primary, #2C2370) !important;
}
.wd-cats-element a:hover,
.wd-products-with-tabs .wd-nav-tabs a:hover,
.wd-products-with-tabs .wd-tabs-header a.wd-active,
.woocommerce-categories .wd-cat a:hover,
.wd-category-button:hover {
    background-color: var(--jcs-secondary, #EC5F7A) !important;
    border-color: var(--jcs-secondary, #EC5F7A) !important;
    color: #ffffff !important;
}

/* ---------- 2e CTA "Ajouter au panier" (FBT — Souvent achetés ensemble) ---------- */
/* Le bouton du formulaire "Frequently Bought Together" était d'un mauvais bleu — on aligne sur le brand */
.wd-fbt-purchase-btn,
.wd-fbt .single_add_to_cart_button,
.wd-fbt button[type="submit"],
button.wd-fbt-purchase-btn.single_add_to_cart_button {
    background-color: var(--jcs-primary, #2C2370) !important;
    border-color: var(--jcs-primary, #2C2370) !important;
    color: #ffffff !important;
}
.wd-fbt-purchase-btn:hover,
.wd-fbt .single_add_to_cart_button:hover,
.wd-fbt button[type="submit"]:hover {
    background-color: var(--jcs-secondary, #EC5F7A) !important;
    border-color: var(--jcs-secondary, #EC5F7A) !important;
    color: #ffffff !important;
}

/* ---------- PANIER — éléments shipping & subtotal en cohérence brand ---------- */
/* Le bloc "Shipping" du panier avait des couleurs hétérogènes (bleu standard WC).
   On harmonise sur le brand. */
.cart_totals .shipping-calculator-button,
.cart_totals a.shipping-calculator-button,
.woocommerce-shipping-calculator a {
    color: var(--jcs-primary, #2C2370) !important;
    text-decoration: underline;
}
.cart_totals .shipping-calculator-button:hover,
.woocommerce-shipping-calculator a:hover {
    color: var(--jcs-secondary, #EC5F7A) !important;
}
/* Bouton "Mettre à jour le panier" — alignement brand */
.woocommerce-cart-form .actions .button[name="update_cart"] {
    background-color: var(--jcs-primary, #2C2370) !important;
    color: #ffffff !important;
    border-color: var(--jcs-primary, #2C2370) !important;
}
.woocommerce-cart-form .actions .button[name="update_cart"]:hover {
    background-color: var(--jcs-secondary, #EC5F7A) !important;
    border-color: var(--jcs-secondary, #EC5F7A) !important;
}
/* Bouton "Valider la commande" (proceed to checkout) — brand */
.wc-proceed-to-checkout .checkout-button {
    background-color: var(--jcs-primary, #2C2370) !important;
    color: #ffffff !important;
    border-color: var(--jcs-primary, #2C2370) !important;
}
.wc-proceed-to-checkout .checkout-button:hover {
    background-color: var(--jcs-secondary, #EC5F7A) !important;
    border-color: var(--jcs-secondary, #EC5F7A) !important;
}

/* ---------- SOUS-MENUS DROPDOWN (Produits CBD, Brands, etc.) ---------- */
/* Passer les liens des sous-menus dropdown du header en bold */
.wd-header-main-nav .wd-dropdown-menu .wd-sub-menu > li > a,
.wd-header-main-nav .wd-dropdown .wd-sub-menu > li > a,
.wd-nav-header .wd-dropdown-menu .menu-item > a,
.wd-nav-header .wd-sub-menu li.menu-item > a,
.whb-row .wd-dropdown-menu li.menu-item > a {
    font-weight: 600 !important;
}

/* ---------- TOP BAR — bandeau marquee Home ---------- */
/* Container Elementor #dc19ea0 → fond Primary, contraste blanc */
.elementor-element.elementor-element-dc19ea0 {
    background-color: var(--jcs-primary) !important;
}
.elementor-element.elementor-element-dc19ea0 .wd-marquee {
    color: var(--jcs-white) !important;
}

/* ---------- FOOTER — cms_block 41 (Footer Pets) ---------- */
/* Tout texte du footer en blanc par défaut */
.cms-block-id-41,
.cms-block-id-41 p,
.cms-block-id-41 .wd-text-block,
.cms-block-id-41 .wd-extra-menu-list-item a,
.cms-block-id-41 .wd-extra-menu-item-name {
    color: var(--jcs-white) !important;
}

/* Titres (titre menu + Available On) → secondary, plus visibles */
.cms-block-id-41 .wd-extra-menu-list-title,
.cms-block-id-41 .wd-section-title,
.cms-block-id-41 .liner-continer .title,
.cms-block-id-41 h4 {
    color: var(--jcs-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Liens menus : white de base, secondary au hover */
.cms-block-id-41 .wd-extra-menu-list-item a {
    color: var(--jcs-white) !important;
    transition: color .2s ease;
}
.cms-block-id-41 .wd-extra-menu-list-item a:hover,
.cms-block-id-41 .wd-extra-menu-list-item a:focus {
    color: var(--jcs-secondary) !important;
}

/* Texte « Based on WoodMart… » bas de footer */
.cms-block-id-41 .elementor-element-e292168,
.cms-block-id-41 .elementor-element-e292168 p {
    color: var(--jcs-white) !important;
    opacity: 0.6;
}

/* Réseaux sociaux : icônes blanches sur fond Primary */
.cms-block-id-41 .wd-social-icons a {
    color: var(--jcs-white) !important;
}
.cms-block-id-41 .wd-social-icons a:hover {
    color: var(--jcs-secondary) !important;
}
.cms-block-id-41 .social-buttons-label {
    color: var(--jcs-secondary) !important;
}

/* Container racine du footer : fond Primary garanti */
.cms-block-id-41 > .elementor-element {
    background-color: var(--jcs-primary) !important;
}
.cms-block-id-41 {
    background-color: var(--jcs-primary);
}

/* Badges Google Play / App Store : conserver visibilité */
.cms-block-id-41 .wd-images-gallery img {
    filter: brightness(1.05);
}

/* =====================================================================
   FICHE PRODUIT — Bloc d'achat (variations)
   Cleanup immédiat sur le rendu natif WC (avant refonte cards possible)
   ===================================================================== */

/* 1. Masquer "× Effacer" — ne sert à rien sur produit avec une seule variation requise */
.woocommerce-variation .reset_variations,
.variations_form .reset_variations,
form.variations_form a.reset_variations {
    display: none !important;
}

/* 2. Description de variation "soit X€/graine"
      → italique + un peu plus de poids/taille pour lisibilité (validé Maxence) */
.woocommerce-variation-description,
.woocommerce-variation-description p {
    color: #5a5a5a !important;
    font-size: 0.95em !important;
    font-style: italic !important;
    font-weight: 600 !important;
    margin: 8px 0 6px !important;
    line-height: 1.45 !important;
}

/* 3. Améliorer un peu le select natif tant qu'on garde le dropdown */
.variations select.wd-select,
.variations_form select {
    border-radius: 8px !important;
    border-color: rgba(44, 35, 112, 0.18) !important;
    height: auto !important;
    padding: 12px 16px !important;
    font-weight: 500;
    width: 100%;
}
.variations select.wd-select:focus,
.variations_form select:focus {
    border-color: var(--jcs-primary) !important;
    box-shadow: 0 0 0 3px rgba(44, 35, 112, 0.12) !important;
}

/* 4. Label "Nombre de graines :" propre */
.variations th.label,
.variations label {
    font-weight: 600 !important;
    color: var(--jcs-text) !important;
    padding-bottom: 8px;
}

/* 4-bis. Prix "À partir de" en haut du produit (variable products) */
.jcs-price-from {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}
.jcs-price-from-label {
    font-size: 0.75em;
    font-weight: 500;
    color: #6b6b6b;
    text-transform: none;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}
.jcs-price-from-amount {
    font-size: 1em;
    font-weight: 700;
    color: var(--jcs-primary);
}
/* Hériter de la couleur du prix pour ne pas trop écraser le thème */
.product .price .jcs-price-from-amount {
    color: inherit;
}

/* 5. Sur DESKTOP : passer le select SOUS le label (au lieu de à côté/inline)
      Par défaut WC met label et select sur la même ligne dans <table>.
      On force tout en bloc + flex column pour avoir label / select / description en colonne. */
.variations,
form.variations_form .variations,
.single-product .product-summary .variations {
    display: block !important;
}
.variations tbody,
form.variations_form .variations tbody {
    display: block !important;
}
.variations tr,
form.variations_form .variations tr {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
}
.variations th,
.variations td,
form.variations_form .variations th,
form.variations_form .variations td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
}
.variations th.label {
    margin-bottom: 4px;
}