:root {
	--wd-cat-brd-radius: 50%;
	--wd-text-font: "Lexend Deca", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 16px;
	--wd-title-font: "Lexend Deca", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Lexend Deca", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgba(51, 51, 51, 0.65);
	--wd-alternative-font: "Lexend Deca", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Lexend Deca", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 20px;
	--wd-header-el-font: "Lexend Deca", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 16px;
	--wd-brd-radius: 15px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(248,189,24);
	--wd-alternative-color: rgb(17,18,17);
	--btn-default-bgcolor: rgb(17,18,17);
	--btn-default-bgcolor-hover: rgb(51,51,51);
	--btn-accented-bgcolor: rgb(248,189,24);
	--btn-accented-bgcolor-hover: rgb(237,173,23);
	--btn-transform: capitalize;
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: rgb(255,51,153);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(245,245,244);
	background-image: none;
}
html .wd-checkout-steps {
	font-size: 16px;
	text-transform: none;
}
html table th {
	text-transform: none;
}
html .wd-nav-mobile > li > a, html .wd-nav.wd-layout-drilldown > li > a, html .wd-nav.wd-layout-drilldown > li [class*="sub-menu"] > :is(.menu-item,.wd-drilldown-back) > a, html .wd-nav.wd-layout-drilldown .woocommerce-MyAccount-navigation-link > a {
	text-transform: none;
}
html .btn.wd-buy-now-btn {
	color: rgb(255,255,255);
	background: rgb(17,18,17);
}
html .btn.wd-buy-now-btn:hover {
	color: rgb(255,255,255);
	background: rgb(51,51,51);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-bg: rgb(255,255,255);
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-size: 40px;
	--wd-arrow-icon-size: 16px;
	--wd-arrow-offset-h: 15px;
	--wd-arrow-color: rgb(36,36,36);
	--wd-arrow-color-hover: rgb(255,255,255);
	--wd-arrow-color-dis: rgb(36,36,36);
	--wd-arrow-bg: rgb(244,244,244);
	--wd-arrow-bg-hover: rgb(248,189,24);
	--wd-arrow-bg-dis: rgb(244,244,244);
	--wd-arrow-radius: 20px;
	--wd-arrow-brd-color: rgba(0,0,0,0.11);
	--wd-arrow-brd: 1px solid;
}
.wd-nav-scroll {
	--wd-nscroll-drag-bg: rgb(17,18,17);
	--wd-nscroll-drag-bg-hover: rgb(17,18,17);
}
.wd .product-label.onsale {
	background-color: rgb(69,150,71);
}
.wd .product-label.new {
	background-color: rgb(255,51,153);
}
.wd .product-label.featured {
	background-color: rgb(255,51,153);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
.woocommerce-product-gallery.thumbs-position-left {
	--wd-thumbs-height: 563px;
}

@media (max-width: 1024px) {
	:root {
		--wd-widget-title-font-size: 18px;
	}
	.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
		--wd-arrow-offset-h: -30px;
	}

}

@media (max-width: 768.98px) {
	.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
		--wd-arrow-offset-h: 15px;
	}

}
:root{
--wd-container-w: 1400px;
--wd-form-brd-radius: 5px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #333;
--btn-accented-color-hover: #333;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
}

@media (min-width: 1400px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(248,189,24);
}

/* ==========================================
   🕹️ PIXEL CRAFT : BOUTON COMMANDER "ARCADE / STREETWEAR"
   ========================================== */
.woocommerce-checkout button#place_order {
    background-color: #0f172a !important; /* Noir/Bleu très profond */
    color: #fbbf24 !important; /* Jaune/Or éclatant */
    border: 2px solid #fbbf24 !important;
    border-radius: 4px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 20px 24px !important;
    transition: all 0.15s ease-out !important;
    /* L'ombre "dure" qui donne l'effet 3D rétro */
    box-shadow: 6px 6px 0px #fbbf24 !important; 
    width: 100% !important;
}

/* L'effet au survol : les couleurs s'inversent */
.woocommerce-checkout button#place_order:hover {
    background-color: #fbbf24 !important;
    color: #0f172a !important;
    border-color: #0f172a !important;
    cursor: pointer !important;
}

/* L'effet "Press Start" quand le client clique */
.woocommerce-checkout button#place_order:active {
    transform: translate(4px, 4px) !important; /* Le bouton descend physiquement */
    box-shadow: 2px 2px 0px #0f172a !important; /* L'ombre se réduit */
}

/* On ajoute un petit icône manette ou fusée avant le texte (Optionnel) */
.woocommerce-checkout button#place_order::before {
    content: "👾 "; 
    font-size: 20px;
    margin-right: 8px;
}
/* L'icône APRÈS le texte */
.woocommerce-checkout button#place_order::after {
    content: "👾"; 
    font-size: 20px;
    margin-left: 12px;
}
/* ======================================================= */
/* 🛠️ RÉPARATION DE LA PAGE PANIER (CART FIX) 🛠️ */
/* ======================================================= */

/* 1. On force l'alignement à gauche pour la zone d'expédition */
.woocommerce-cart .cart-collaterals .woocommerce-shipping-totals th,
.woocommerce-cart .cart-collaterals .woocommerce-shipping-totals td {
    text-align: left !important;
}

/* 2. On nettoie la liste des choix de livraison */
.woocommerce-cart ul#shipping_method {
    margin: 15px 0 !important;
    padding: 0 !important;
}

/* 3. Magie Flexbox : force le bouton à gauche et le texte à droite */
.woocommerce-cart ul#shipping_method li {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-bottom: 12px !important;
    text-align: left !important;
}

.woocommerce-cart ul#shipping_method input[type="radio"] {
    margin: 0 10px 0 0 !important; /* Espace à droite du bouton */
    order: 1 !important; /* Positionne le bouton en 1er */
    float: none !important;
}

.woocommerce-cart ul#shipping_method label {
    margin: 0 !important;
    order: 2 !important; /* Positionne le texte en 2ème */
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* 4. On cache le texte et le bouton "Modifier l'adresse" pour forcer le passage au Checkout */
.woocommerce-cart .woocommerce-shipping-destination,
.woocommerce-cart .shipping-calculator-button {
    display: none !important;
}

/* ======================================================= */
/* 🛡️ EXCEPTION : LE PRIX DU PANIER DANS L'EN-TÊTE         */
/* ======================================================= */
/* On force le retour au jaune vif uniquement dans le menu du haut */
.whb-header .woocommerce-Price-amount,
.whb-header .amount,
.wd-header-cart .woocommerce-Price-amount,
.wd-header-cart .amount {
    color: #F8BD18 !important; /* Ton beau jaune vif original */
}
/* FORCER L'ESPACEMENT DU MENU PRINCIPAL PIXEL CRAFT (ANTI-BUG SVG) */
.whb-main-menu .menu > li {
    margin-right: 26px !important; 
}
.whb-main-menu .menu > li:last-child {
    margin-right: 0 !important;
}
/* Forcer le prix à rester sur une ligne dans le récapitulatif de commande */
.wd-checkout-prod-total .woocommerce-Price-amount {
    white-space: nowrap !important;
}
/* Masquer le champ pays SANS bloquer les scripts (Correction Double Clic) */
#billing_country_field { 
    position: absolute !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    order: 99 !important; 
    z-index: -9999 !important;
}
/* ======================================================= */
/* 🛡️ ORGANISATION : ORGANISER CHECKOUT FORM              */
/* ======================================================= */
/* 1. On active Flexbox sur le conteneur du formulaire */
.woocommerce-billing-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

/* 2. On donne une largeur et un ordre par défaut à TOUS les champs classiques */
.woocommerce-billing-fields__field-wrapper > p.form-row {
    width: 100% !important; 
    order: 10 !important;   
}

/* 3. Nom et Prénom côte à côte (environ 48% chacun) */
#billing_first_name_field, #billing_last_name_field {
    width: 48% !important;
}

/* 4. L'ORDRE ABSOLU DES CHAMPS */
#billing_first_name_field { order: 1 !important; }
#billing_last_name_field  { order: 2 !important; }
#billing_phone_field      { order: 3 !important; }
#billing_state_field      { order: 4 !important; } /* Wilaya */
#billing_city_field       { order: 5 !important; } /* Commune */

/* 5. Message wilaya sans Stop Desk (prend toute la ligne juste après la commune) */
.pixel-single-msg {
    width: 100% !important;
    order: 11 !important;
}

/* 6. On expédie l'adresse de rue tout en bas */
#billing_address_1_field  { order: 20 !important; }

/* 7. On masque le pays discrètement */
#billing_country_field { 
    display: none !important; 
    order: 99 !important; 
}

/* 6. On corrige la position du module de livraison injecté en JS */
.pixel-delais-box {
    width: 100% !important;
    order: 21 !important; /* Juste après la rue qui est à 20 */
    box-sizing: border-box !important;
}

/* Bloque le drag & drop (PC) et le menu d'appui long (Mobile) sur TOUTES les images */
img, a {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-touch-callout: none !important; /* L'arme secrète anti-iPhone avec !important */
}

/* ======================================================= */
/* 1. ÉLIMINER LA BANNIÈRE QUI ROGNE L'IMAGE product box              */
/* ======================================================= */
.product-grid-item .wd-add-btn,
.product-grid-item .wd-add-btn-replace,
.product-grid-item .woodmart-add-btn {
    display: none !important;
}

/* ======================================================= */
/* 2. REGROUPER LE TITRE ET LE PRIX SANS VIDE INUTILE      */
/* ======================================================= */
.product-grid-item .product-element-bottom {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* On colle le contenu vers le haut (vers l'image) */
    align-items: center !important;         /* On centre horizontalement */
    
    /* On annule la hauteur imposée qui créait le vide */
    min-height: auto !important;            
    
    /* On contrôle exactement l'espace autour avec le padding (à ajuster selon tes goûts !) */
    padding-top: 15px !important;           /* Espace entre l'image et le titre */
    padding-bottom: 15px !important;        /* Espace entre le prix et le bas de la carte */
}

/* On contrôle l'espace exact entre le titre et le prix */
.product-grid-item .price {
    margin-top: 5px !important;
    margin-bottom: 0 !important;
}

/* On s'assure que le titre n'a pas une marge invisible par défaut */
.product-grid-item .wd-entities-title,
.product-grid-item .product-title {
    margin-bottom: 0 !important;
}

/* ================================================================= */
/* 3. COUPER L'ESPACE "FANTÔME" EN BAS DE LA CARTE vignette produit  */
/* ================================================================= */

/* On retire le rembourrage par défaut de la carte elle-même */
.product-grid-item .product-wrapper,
.product-grid-item {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* On s'assure que les conteneurs de boutons invisibles prennent 0 pixels */
.product-grid-item .wd-bottom-actions,
.product-grid-item .product-actions,
.product-grid-item .woodmart-buttons {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* On ajuste l'espace final sous le prix (tu peux changer ce 15px selon ton goût) */
.product-grid-item .product-element-bottom {
    padding-bottom: 8px !important; 
}

/* ===============================================================
   1. TON CSS GLOBAL (POUR TOUS LES PRIX DU SITE)
=============================================================== */
.price, 
.amount, 
.woocommerce-Price-amount,
.product-grid-item .price,
.single-product-page .price {
    color: #C49206 !important; 
    font-weight: 700 !important; 
}

/* Optionnel : Si tu as des prix barrés (promos), on les laisse en gris clair pour bien faire ressortir le nouveau prix */
del .woocommerce-Price-amount,
del .amount {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

/* ===============================================================
   2. SORCELLERIE CSS : PRIX DYNAMIQUE (REGULAR, OVERSIZE, KIDS)
=============================================================== */

/* 1. Cacher les tailles incompatibles et garder les Modèles cliquables */
.variations tr:not(:first-child) .wd-swatch.wd-disabled,
.variations tr:not(:first-child) .wd-swatch.disable {
    display: none !important;
}
.variations tr:first-child .wd-swatch {
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* ===============================================================
   2. CACHER TAILLES INCOMPATIBLES & FANTÔMES (Sécurisé)
=============================================================== */
/* On ajoute .product:has(.wd-swatch[data-value="regular"]) partout pour cibler uniquement nos t-shirts spéciaux */
.product:has(.wd-swatch[data-value="regular"]) .variations tr:not(:first-child) .wd-swatch.wd-disabled,
.product:has(.wd-swatch[data-value="regular"]) .variations tr:not(:first-child) .wd-swatch.disable {
    display: none !important;
}
.product:has(.wd-swatch[data-value="regular"]) .variations tr:first-child .wd-swatch {
    pointer-events: auto !important;
    opacity: 1 !important;
}
.product:has(.wd-swatch[data-value="regular"]) .variations tr:nth-child(3):not(:has(.wd-swatch.wd-active)) .wd-attr-selected {
    display: none !important;
}
.product:has(.wd-swatch[data-value="regular"]) .woocommerce-variation-price {
    display: none !important;
}

/* ===============================================================
   3. LE CŒUR DE LA MAGIE (Sécurisé)
=============================================================== */
.product:has(.wd-swatch[data-value="regular"]):has(.variations tr:first-child .wd-swatch.wd-active) .wd-single-price .price {
    font-size: 0 !important; 
    display: block !important;
}

.product:has(.wd-swatch[data-value="regular"]):has(.variations tr:first-child .wd-swatch.wd-active) .wd-single-price .price::after {
    color: #C49206 !important; 
    font-size: 32px !important; 
    font-weight: 700 !important;
    font-family: inherit !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    display: inline-block !important;
}

/* 🔥 LE ZOOM EXCLUSIF MOBILE 🔥 */
@media (max-width: 768px) {
    .product:has(.wd-swatch[data-value="regular"]):has(.variations tr:first-child .wd-swatch.wd-active) .wd-single-price .price::after {
        font-size: 38px !important; 
    }
}

/* ===============================================================
   4. LES PRIX DYNAMIQUES
=============================================================== */
/* A. REGULAR par défaut (2 300 DA) */
.product:has(.variations tr:first-child .wd-swatch[data-value="regular"].wd-active) .wd-single-price .price::after {
    content: "2 300 DA" !important;
}

/* B. REGULAR + XXL (L'exception à 2 500 DA) */
.product:has(.variations tr:first-child .wd-swatch[data-value="regular"].wd-active):has(.variations tr:nth-child(3) .wd-swatch[data-value="xxl"].wd-active) .wd-single-price .price::after {
    content: "2 500 DA" !important;
}

/* C. OVERSIZE (2 900 DA) */
.product:has(.variations tr:first-child .wd-swatch[data-value="oversize"].wd-active) .wd-single-price .price::after {
    content: "2 900 DA" !important;
}

/* D. KIDS (2 000 DA) */
.product:has(.variations tr:first-child .wd-swatch[data-value="kids"].wd-active) .wd-single-price .price::after,
.product:has(.variations tr:first-child .wd-swatch[data-value="enfant"].wd-active) .wd-single-price .price::after {
    content: "2 000 DA" !important;
}

/* ===============================================================
   CORRECTION MOBILE : TABLEAU (CÔTE À CÔTE SANS COUPURE)
=============================================================== */
@media (max-width: 768px) {
    /* Le titre "Grammage" reste fixé en haut */
    table.shop_attributes th {
        white-space: nowrap !important;
        vertical-align: top !important; 
        padding-top: 10px !important; 
    }
    
    /* Les deux lignes de texte s'alignent joliment à droite */
    table.shop_attributes td,
    table.shop_attributes td p {
        text-align: right !important;
        width: 100% !important;
        margin: 0 !important;
        padding-top: 10px !important;
    }
}

/* ===============================================================
   LE JEU DE CACHE-CACHE DU GRAMMAGE (PC vs MOBILE)
=============================================================== */

/* Sur PC (par défaut) : on cache la grille mobile ! */
.grammage-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    /* Sur Mobile : on cache le texte du PC ! */
    .grammage-pc {
        display: none !important;
    }
    
    /* Et on allume la grille de designer ! */
    .grammage-mobile {
        display: inline-flex !important;
        flex-direction: column !important;
        width: max-content !important;
    }
}