/* --- BONIDAY WooCommerce Premium Overrides --- */
/* --- Conteneur de l'icône --- */
.hamburger-icon {
    width: 24px;
    height: 14px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 60;
    flex-shrink: 0; /* Empêche Flexbox d'écraser la largeur à 0 */
}

/* --- Lignes du Menu Hamburger --- */
.hamburger-line {
    display: block;
    width: 24px !important; /* On force la largeur absolue de 24px au lieu de 100% */
    height: 1.5px;
    background-color: currentColor;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s ease;
}

/* Animations d'ouverture (inchangées) */
.menu-open .hamburger-line:nth-child(1) {
    transform: translateY(6.25px) rotate(45deg);
}
.menu-open .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}
.menu-open .hamburger-line:nth-child(3) {
    transform: translateY(-6.25px) rotate(-45deg);
}
/* 1. Variations Form Styling */
.variations_form { width: 100%; }
.variations_form .variations { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; }
.variations_form .label {
    display: block; text-align: left; margin-bottom: 0.75rem;
    color: #374151; font-size: 0.65rem; text-transform: uppercase;
    letter-spacing: 0.15em; font-weight: 600; padding: 0;
}
.variations_form .value { position: relative; padding: 0; }
.variations_form .reset_variations { display: none !important; }

.boniday-native-select { display: none !important; }

/* Swatches (Pills) */
.boniday-swatches {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px;
    margin-bottom: 1.5rem;
}
.boniday-swatch {
    padding: 10px 18px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-align: center;
    flex-grow: 1; /* Makes them fill the row nicely on mobile */
    min-width: 80px;
}
@media (min-width: 768px) { .boniday-swatch { flex-grow: 0; } }

.boniday-swatch:hover { border-color: #1e3f20; color: #1e3f20; }
.boniday-swatch.selected {
    background: #1e3f20 !important;
    color: #ffffff !important;
    border-color: #1e3f20 !important;
    box-shadow: inset 0 0 0 1px #1e3f20;
}

/* 2. Quantity & Add to Cart Button */
.woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}
@media (min-width: 768px) {
    .woocommerce-variation-add-to-cart { flex-direction: row; align-items: stretch; }
}

.quantity input[type="number"] {
    width: 100%; height: 3.5rem;
    border: 1px solid #e5e7eb;
    text-align: center; border-radius: 4px; background: #fff;
    font-size: 1rem; color: #111827; outline: none;
    transition: border-color 0.3s;
}
.quantity input[type="number"]:focus { border-color: #1e3f20; }
@media (min-width: 768px) { .quantity input[type="number"] { width: 90px; } }

/* Force exact Premium Green for the Add To Cart button */
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.single_add_to_cart_button {
    background-color: #1e3f20 !important;
    color: #ffffff !important;
    width: 100%; height: 3.5rem;
    border: none; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.15em;
    font-size: 0.8rem; font-weight: 500;
    cursor: pointer; transition: background-color 0.3s ease !important;
    display: flex; align-items: center; justify-content: center;
    padding: 0; opacity: 1 !important;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
    background-color: #000000 !important;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled {
    opacity: 0.6 !important; cursor: not-allowed;
}

/* 3. Review Form Restyling (Replacing the ugly default inputs) */
#reviews #comments h2 { display: none; } /* Hide duplicate title */
#review_form_wrapper { margin-top: 2rem; }
.comment-reply-title { font-size: 1.25rem; font-weight: 400; color: #111827; margin-bottom: 1rem; display: block; }
.comment-notes { font-size: 0.875rem; color: #6b7280; margin-bottom: 2rem; }

/* Form inputs */
.comment-form p { margin-bottom: 1.5rem; }
.comment-form label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #374151; margin-bottom: 0.5rem; font-weight: 500; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background-color: #fafafa;
    font-family: inherit;
    font-size: 0.9rem;
    color: #111827;
    outline: none;
    transition: all 0.3s;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
    border-color: #1e3f20;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px #1e3f20;
}
.comment-form textarea { min-height: 120px; resize: vertical; }

/* Star Rating selector */
.comment-form-rating { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.comment-form-rating label { margin-bottom: 0; }
.stars a { color: #d1d5db; transition: color 0.2s; }
.stars a:hover, .stars a.active { color: #d4af37; } /* Gold color for stars */

/* Checkbox */
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.75rem; }
.comment-form-cookies-consent input[type="checkbox"] { margin-top: 0.25rem; width: 1rem; height: 1rem; accent-color: #1e3f20; }
.comment-form-cookies-consent label { text-transform: none; letter-spacing: normal; font-size: 0.875rem; font-weight: 400; color: #6b7280; }

/* Submit Button */
.comment-form .form-submit { margin-top: 2rem; }
.comment-form .submit {
    background-color: #000000 !important;
    color: #ffffff !important;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease !important;
}
.comment-form .submit:hover { background-color: #1e3f20 !important; }

/* 4. Related Products Grid */
.related-products-section ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
}
@media (min-width: 768px) {
    .related-products-section ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2.5rem !important;
    }
}
.related-products-section ul.products li.product { width: 100% !important; margin: 0 !important; text-align: center; }
.related-products-section ul.products li.product img { border-radius: 4px; background-color: #f8f9fa; }
.related-products-section ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.9rem; font-weight: 500; color: #111827; margin-top: 1rem; margin-bottom: 0.25rem;
}
.related-products-section ul.products li.product .price { color: #6b7280; font-size: 0.875rem; font-weight: 400; }
.related-products-section ul.products li.product .button { display: none !important; } /* Hide default loop add-to-cart button for cleaner look */

/* --- 1. Fix Breadcrumbs (Top Navigation) --- */
.woocommerce-breadcrumb {
    max-width: 80rem; /* Matches the max-w-7xl of the main content */
    margin: 0 auto;
    padding: 2rem 1rem 0;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9ca3af; /* Tailwind gray-400 */
    display: none;
}
@media (min-width: 640px) { .woocommerce-breadcrumb { padding: 2rem 1.5rem 0; } }
@media (min-width: 1024px) { .woocommerce-breadcrumb { padding: 2rem 2rem 0; } }
.woocommerce-breadcrumb a { color: #111827; transition: color 0.3s; }
.woocommerce-breadcrumb a:hover { color: #1e3f20; }

/* --- 2. Fix Related Products Grid & Duplicate Title --- */
/* Hide the default WooCommerce "Produits similaires" title */
.related-products-section .related > h2 {
    display: none !important;
}
/* Reset WooCommerce float wrappers that break grids */
.related-products-section .related {
    clear: both;
    width: 100%;
}
.related-products-section ul.products::before,
.related-products-section ul.products::after {
    display: none !important;
}
/* Enforce our strict Grid layout */
.related-products-section ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
@media (min-width: 768px) {
    .related-products-section ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2.5rem !important;
    }
}
/* Ensure product cards don't float and take up their grid cell */
.related-products-section ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    text-align: center;
}

/* --- 3. Hide Default WordPress Sidebar on Product Pages --- */
/* This forces the messy list at the bottom to disappear */
.single-product #secondary,
.single-product .widget-area,
.single-product #sidebar {
    display: none !important;
}
/* This forces the main content to take up the full width instead of leaving a gap for the sidebar */
.single-product #primary,
.single-product .site-main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* ========================================================
   1. BREADCRUMBS REFINEMENT
   Aligns perfectly with the 7xl container and softens the text
======================================================== */
.woocommerce-breadcrumb {
    max-width: 80rem; /* Matches max-w-7xl */
    margin: 0 auto;
    padding: 2rem 1rem 0; /* Padding to match the mobile/desktop edges */
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9ca3af; /* Tailwind gray-400 */
}
@media (min-width: 640px) { .woocommerce-breadcrumb { padding: 3rem 1.5rem 0; } }
@media (min-width: 1024px) { .woocommerce-breadcrumb { padding: 3rem 2rem 0; } }

.woocommerce-breadcrumb a {
    color: #4b5563; /* Darker gray for links */
    font-weight: 500;
    transition: color 0.3s;
    text-decoration: none;
}
.woocommerce-breadcrumb a:hover { color: #1e3f20; }


/* ========================================================
   2. VARIATIONS ("COULEUR DU CORDON") REFINEMENT
   Forces the WooCommerce table to stack vertically
======================================================== */
.variations_form { width: 100%; }

/* Destroy the native table layout */
.variations_form table.variations,
.variations_form table.variations tbody,
.variations_form table.variations tr,
.variations_form table.variations td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Style the Label to sit beautifully on top */
.variations_form table.variations td.label {
    margin-bottom: 0.75rem !important;
    text-align: left !important;
}
.variations_form table.variations td.label label {
    color: #111827;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
}

/* Add spacing under the buttons */
.variations_form table.variations td.value {
    margin-bottom: 1.5rem !important;
}

/* Refined Swatch Buttons */
.boniday-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.boniday-swatch {
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    cursor: pointer;
    border-radius: 3px; /* Slightly sharper, more elegant edges */
    transition: all 0.3s ease;
    text-align: center;
    flex-grow: 1; /* Makes them fill empty space beautifully on mobile */
    min-width: calc(33.333% - 8px); /* Forces roughly 3 per row on mobile */
}
@media (max-width: 400px) {
    .boniday-swatches {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (min-width: 768px) {
    /* On desktop, keep them uniform and don't stretch fully */
    .boniday-swatch { flex-grow: 0; min-width: 80px; }
}

.boniday-swatch:hover {
    border-color: #1e3f20;
    color: #1e3f20;
}
.boniday-swatch.selected {
    background: #1e3f20 !important;
    color: #ffffff !important;
    border-color: #1e3f20 !important;
}


/* ========================================================
   3. FORCE ADD TO CART BUTTON COLOR
   Overriding the sage green from your theme
======================================================== */
.woocommerce div.product form.cart .button.single_add_to_cart_button,
button.single_add_to_cart_button.alt {
    background-color: #1e3f20 !important; /* Deep Premium Green */
    color: #ffffff !important;
    width: 100% !important;
    height: 3.5rem !important;
    border: none !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
button.single_add_to_cart_button.alt:hover {
    background-color: #000000 !important;
}

/* ========================================================
   SÉLECTEUR DE COULEUR FAÇON "CORDON" (Pour fiche produit)
======================================================== */
.cordon-swatch-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.cordon-swatch {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

/* Le "bout de cordon" visuel */
.cordon-swatch .cordon-visual {
    width: 24px;
    height: 6px;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

/* Le texte associé */
.cordon-swatch .cordon-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #4b5563;
}

/* --- États Hover & Selected --- */
.cordon-swatch:hover {
    border-color: #27402a; /* Dark green */
}
.cordon-swatch.selected {
    background: #27402a !important; /* The dark green background */
    border-color: #27402a !important;
}
.cordon-swatch.selected .cordon-label {
    color: #ffffff !important; /* White text when selected */
}

/* --- Définition des Couleurs du Cordon --- */
.cordon-visual.color-noir        { background-color: #111827; }
.cordon-visual.color-bleu        { background-color: #1a2942; } /* Marine Blue */
.cordon-visual.color-rouge       { background-color: #b91c1c; } /* Deep Red */
.cordon-visual.color-vert        { background-color: #27402a; } /* Brand Green */
.cordon-visual.color-jaune       { background-color: #eab308; } /* Yellow */

/* Le Blanc nécessite une bordure pour être visible sur fond blanc */
.cordon-visual.color-blanc       { background-color: #ffffff; border: 1px solid #d1d5db; box-shadow: none; }

/* TRICK: When the "Noir" or "Vert" or "Bleu" swatch is selected, the background becomes dark green.
   If the cord visual is ALSO dark green or black, it becomes invisible.
   We must force the cord visual to turn WHITE when its parent container is selected.
*/
.cordon-swatch.selected .cordon-visual {
    background-color: #ffffff !important;
    border: none !important; /* Remove border if it was the white cord */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Slight pop so it doesn't look flat */
}

/* Destroy the native table layout (Now includes 'th') */
.variations_form table.variations,
.variations_form table.variations tbody,
.variations_form table.variations tr,
.variations_form table.variations th,
.variations_form table.variations td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Style the Label (th) to sit beautifully on top */
.variations_form table.variations th.label {
    margin-bottom: 0.75rem !important;
}
.variations_form table.variations th.label label {
    color: #111827 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-weight: 600 !important;
    display: block !important;
}

/* Add spacing under the buttons */
.variations_form table.variations td.value {
    margin-bottom: 1.5rem !important;
}