﻿/* RenovBoat Theme CSS - Polished Version */
:root {
    --primary-color: #1B4965;
    /* Dark Blue */
    --secondary-color: #f39c12;
    /* Orange */
    --accent-color: #e67e22;
    /* Darker Orange */
    --text-color: #333333;
    --light-gray: #f8f9fa;
    --border-color: #e1e1e1;
    --font-family: 'Roboto', 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Global Reset & Safety */
img {
    max-width: 100%;
    height: auto;
}

.input-group-btn {
    margin-top: 4px;
}

.text-sm-center {
    margin-top: 20px !important;
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: #ffffff;
    font-size: 14px;
}

#wrapper {
    background-color: #F3F4F6;
    padding-top: 20px;
    padding-bottom: 20px;
}

#content-wrapper {
    width: 100%;
}

a {
    color: var(--primary-color);
    transition: all 0.2s ease;
}

a:hover {
    color: var(--secondary-color);
    text-decoration: none;
}

/* Header Styles */
#header {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.header-nav {
    background-color: var(--primary-color);
    color: #fff;
    padding: 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-nav .nav-link {
    color: #fff;
    margin-left: 20px;
    display: inline-flex;
    align-items: center;
    padding: 10px 0;
}

.header-nav .nav-link i {
    margin-right: 5px;
    font-size: 16px;
}

.header-nav .nav-separator {
    margin: 0 15px;
    color: rgba(255, 255, 255, 0.3);
}

.header-top {
    padding: 20px 0;
    background: var(--primary-color) !important;
    color: white;
}

#header .header-top .logo {
    max-height: 80px;
    /* Bigger logo */
}

/* Search Bar (Rounded & Clean) - FIXED */
.search-widget form {
    position: relative;
    width: 100%;
    height: 45px;
    /* Fixed height to prevent collapse */
    display: flex;
    align-items: center;
    background: #f5f6fa;
    border-radius: 5px;
    overflow: hidden;
    /* Cut off any overflow/scrollbars */
}

.search-widget input[type="text"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 50px 0 20px;
    /* Right padding for icon */
    border: none;
    background: transparent;
    /* Background handled by form */
    font-size: 0.95rem;
    color: #555;
    outline: none;
    appearance: none;
    /* Remove native styling */
    -webkit-appearance: none;
    margin: 0;
    box-shadow: none;
    /* Remove any default shadow */
}

.search-widget button[type="submit"] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50px;
    background: transparent;
    border: none;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    /* On top of input */
}

/* Hide Duplicate Slider in Home Hook */
#content .col-md-9 #carousel {
    display: none !important;
}

.search-widget button[type="submit"] i {
    font-size: 24px;
}

/* Sidebar Categories Menu (Wrapper) */
.categories-sidebar-menu {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    background: #fff;
    border: 1px solid #f0f0f0;
    position: sticky;
    top: 20px;
    z-index: 9;
    margin-bottom: 20px;
}

.categories-sidebar-menu .menu-header {
    background-color: #1B4965;
    color: #fff;
    padding: 15px 20px;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.categories-sidebar-menu .menu-header i {
    margin-right: 10px;
}


/* Clean Styling for the new Template Structure */
.categories-sidebar-menu .block-categories {
    padding: 0;
    margin: 0;
}

.categories-sidebar-menu .category-sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent;
}

.categories-sidebar-menu .category-sub-menu li {
    list-style: none;
    position: relative;
    border-bottom: 1px solid #f6f6f6;
}

.categories-sidebar-menu .category-sub-menu li:last-child {
    border: none;
}

.categories-sidebar-menu .category-sub-menu li>a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #555;
    font-size: 0.95rem;
    text-decoration: none;
    width: 100%;
    /* Ensure text doesn't overlap toggler */
    padding-right: 45px;
}

.categories-sidebar-menu .category-sub-menu li>a:hover {
    background: #EFF3F8;
    color: #315379;
    padding-left: 25px;
    transition: all 0.2s;
}

/* Sub-menus are hidden by default via the 'collapse' class from bootstrap/template */
/* But we can style them */
.categories-sidebar-menu .category-sub-menu .category-sub-menu {
    background: #fcfcfc;
    margin-left: 0;
    border-left: none;
}

.categories-sidebar-menu .category-sub-menu .category-sub-menu li a {
    padding-left: 45px;
    color: #777;
    font-size: 0.9rem;
}

.categories-sidebar-menu .category-sub-menu .category-sub-menu li a:hover {
    color: #315379;
    padding-left: 50px;
}

/* Toggler Icons */
.categories-sidebar-menu .navbar-toggler {
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 100%;
    /* Match row height */
    display: flex;
    /* Flex to align at top */
    align-items: flex-start;
    justify-content: center;
    cursor: pointer;
    color: #aebfd3;
    border-left: 1px solid #f6f6f6;
    transition: all 0.2s;
    padding-top: 12px;
    /* Add padding to position icon nicely from top */
}

.categories-sidebar-menu .navbar-toggler:hover {
    color: #315379;
    background: rgba(0, 0, 0, 0.02);
}

/* Default state for toggler icons handled by PrestaShop/Bootstrap JS usually, 
   but our new TPL uses .collapse logic. 
   We just need to make sure icons align. */
.categories-sidebar-menu .navbar-toggler i {
    font-size: 20px;
    transition: transform 0.3s ease;
}

/* Rotate icon when expanded (Bootstrap adds aria-expanded="true") */
.categories-sidebar-menu .navbar-toggler[aria-expanded="true"] i {
    transform: rotate(180deg);
    color: #315379;
}

/* Force Remove Left Arrow if it persists */
.categories-sidebar-menu li a::before,
.categories-sidebar-menu .category-sub-link::before,
.block-categories .category-sub-menu li a::before {
    content: none !important;
    display: none !important;
}

/* Adjust padding since arrow is gone */
.categories-sidebar-menu .category-sub-menu li>a {
    padding-left: 20px !important;
}

/* ========================================
   COLLAPSE FUNCTIONALITY FOR SIDEBAR MENU
   ======================================== */
/* Ensure collapsed items are hidden */
.categories-sidebar-menu .collapse {
    display: none;
    overflow: hidden;
    transition: height 0.3s ease;
}

/* Show collapsed items when they have the 'show' class */
.categories-sidebar-menu .collapse.show {
    display: block !important;
}

/* Smooth transition for collapsing animation */
.categories-sidebar-menu .collapse.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}


/* --- NEWSLETTER SECTION --- */
.block_newsletter {
    background-color: #315379;
    /* RenovBoat Blue */
    padding: 30px 40px;
    margin-top: 40px;
    margin-bottom: 20px;
    border-radius: 5px;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.block_newsletter .newsletter-title {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.block_newsletter .newsletter-title i {
    font-size: 80px;
    margin-right: 15px;
    color: #F89422;
    /* RenovBoat Orange */
}

/* Input Wrapper */
.block_newsletter .newsletter-input-wrapper {
    display: flex;
    position: relative;
    max-width: 500px;
    margin-left: auto;
    /* Push to right on desktop */
}

.block_newsletter input[type="email"] {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    /* Left radius only? No, let's do full radius */
    height: 48px;
    background: #fff;
    color: #333;
    font-size: 0.95rem;
}

.block_newsletter input[type="email"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px #F89422;
}

.block_newsletter button {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    background-color: #F89422;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 0 25px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.block_newsletter button:hover {
    background-color: #df8018;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.block_newsletter .newsletter-conditions {
    font-size: 0.75rem;
    margin-top: 10px;
    opacity: 0.8;
    text-align: right;
    /* Align with input */
    padding-right: 5px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .block_newsletter {
        padding: 40px 10px;
        text-align: center;
    }

    .block_newsletter .newsletter-title {
        justify-content: center;
        margin-bottom: 20px;
    }

    .block_newsletter .newsletter-input-wrapper {
        margin: 0 auto;
    }

    .block_newsletter .newsletter-conditions {
        text-align: center;
    }
}



.block-categories .h6 {
    background-color: #315379;
    /* RenovBoat Blue */
    color: #fff;
    padding: 15px 20px;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    margin: 0;
    text-transform: none;
    cursor: default;
}

/* Add an icon via CSS before the title since we can't edit the TPL easily */
.block-categories .h6::before {
    content: "store";
    /* Material Icon content code or just text if font loaded */
    font-family: 'Material Icons';
    margin-right: 10px;
    font-size: 20px;
    font-weight: normal;
}

.block-categories .category-sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.block-categories .category-sub-menu li {
    border-bottom: 1px solid #f6f6f6;
    position: relative;
}

.block-categories .category-sub-menu li:last-child {
    border-bottom: none;
}

.block-categories .category-sub-menu li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #555;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
    background: #fdfdfd;
}

.block-categories .category-sub-menu li a:hover {
    background: #EFF3F8;
    /* Light blueish tint */
    color: #315379;
    padding-left: 25px;
    /* Slight indentation effect */
}

/* Specific icon for items - Hard to do dynamically without custom TPL, 
   so we add generic bullet or icon */
.block-categories .category-sub-menu li a::before {
    content: "chevron_right";
    font-family: 'Material Icons';
    margin-right: 10px;
    color: #aebfd3;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    /* On top of input */
}

.search-widget button[type="submit"] i {
    font-size: 24px;
}

/* Menu */
.header-bottom {
    background-color: #f6f6f6;
    /* Light gray background */
    border-bottom: 1px solid #e1e1e1;
}

.top-menu[data-depth="0"] {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    list-style: none;
    /* Remove bullet points */
}

.top-menu[data-depth="0"]>li {
    position: relative;
    border-right: 1px solid #eee;
}

.top-menu[data-depth="0"]>li>a {
    color: var(--primary-color);
    font-weight: 600;
    text-transform: capitalize;
    padding: 15px 25px;
    display: block;
    font-size: 1rem;
    transition: all 0.2s;
}

.top-menu[data-depth="0"]>li>a:hover {
    color: var(--secondary-color);
    background: #fff;
}

.top-menu[data-depth="0"]>li.current>a {
    color: var(--secondary-color);
}

/* Dropdown / Submenu */
.popover.sub-menu {
    margin-top: -140px;
    display: none;
    /* Hidden by default */
    position: absolute;
    top: 50px;
    left: 0;
    width: 220px;
    /* Width of dropdown */
    background: #fff;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-top: 3px solid var(--secondary-color);
    padding: 10px 0;
    text-align: left;
}

/* Force show on hover with high priority */
.top-menu[data-depth="0"]>li:hover .popover.sub-menu {
    display: block !important;
}

/* Submenu Items (Depth 1) */
.top-menu[data-depth="1"] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-menu[data-depth="1"]>li>a {
    display: block;
    padding: 8px 20px;
    color: #555;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px solid #f9f9f9;
}

.top-menu[data-depth="1"]>li>a:hover {
    color: var(--secondary-color);
    background-color: #f9f9f9;
    padding-left: 25px;
    /* Little hover animation */
}

/* Products Grid */
.products {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-right: -20px;
}

.products .product {
    padding: 0 20px;
    margin-bottom: 40px;
}

.products article .wishlist-button-add {
    position: absolute;
    top: -390px !important;
    right: -160px !important;
    z-index: 10;
}

/* Mobile: 2 columns for better space usage */
@media (max-width: 767px) {

    /* RÃ©duire le padding du container pour plus d'espace */
    #js-product-list,
    #js-product-list .container,
    .products-section-container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .products .product {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding: 0 5px !important;
        margin-bottom: 15px !important;
        /* Espacement réduit entre les lignes */
    }

    .products {
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 15px;
        margin-bottom: 15px;
        /* Espacement réduit au dessus */
    }

    /* RESTORE 2 COLUMNS ON MOBILE */
    .products .product,
    .products .col-xs-6,
    .products article,
    .product-miniature,
    article.product-miniature {
        max-width: 50% !important;
        min-width: 50% !important;
        width: 50% !important;
    }

    /* Forcer les articles à prendre 50% */
    .col-xs-6 article.product-miniature,
    .products .col-xs-6 .product-miniature,
    .products article.product-miniature {
        width: 100% !important;
        /* Inside the 50% container */

        max-width: 100% !important;
    }

    .product-card-design .product-actions {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    /* RÃ©duire la taille des cartes produits sur mobile */
    .product-miniature .product-card-design {
        padding: 10px 10px 0;
        margin: 0 !important;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* RÃ©duire la taille des images par 2 */
    .product-card-design img {
        height: 90px !important;
        max-height: 90px;
    }

    /* RÃ©duire la taille du titre */
    .product-card-design .product-title {
        font-size: 0.7rem !important;
        margin: 5px auto;
        min-height: auto !important;
    }

    .product-card-design .product-title a {
        min-height: auto !important;
    }

    /* RÃ©duire la taille du sÃ©parateur */
    .product-card-design .product-separator {
        width: 30px;
        height: 2px;
        margin: 5px auto;
    }

    /* RÃ©duire la taille du prix */
    .product-card-design .product-price-and-shipping .price {
        font-size: 0.85rem !important;
    }

    .product-card-design .regular-price {
        font-size: 0.65rem !important;
    }

    /* RÃ©duire la taille du bouton */
    .add-to-cart-btn {
        padding: 6px 8px !important;
        font-size: 0.7rem !important;
        border-radius: 3px;
    }

    .add-to-cart-btn .material-icons {
        font-size: 14px !important;
        margin-left: 3px;
    }

    /* RÃ©duire les espacements internes */
    .product-card-design .product-actions {
        padding-top: 8px;
        padding-bottom: 10px;
    }

    /* RÃ©duire la vue rapide */
    .product-card-design .quick-view {
        font-size: 0.65rem !important;
        margin-bottom: 5px;
    }

    .product-card-design .quick-view i {
        font-size: 12px !important;
    }

    #search_widget form input {
        padding: 10px 20px 10px 5px !important;
    }

    /* Centrer les titres de section sur mobile */
    h1,
    .h1 {
        text-align: center !important;
    }
}

/* Product Flags (Badges) */
.product-flags {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-flag {
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
    color: #fff;
    background-color: #ff6b6b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.product-flag.discount,
.product-flag.on-sale {
    background-color: #ff6b6b;
}

.product-flag.new {
    background-color: #51cf66;
}

.product-flag.pack {
    background-color: #339af0;
}

.product-flag.online-only {
    background-color: #845ef7;
}

/* Ensure thumbnail container is positioned relatively */
.thumbnail-container {
    position: relative;
}

@media (max-width: 767px) {
    .product-flags {
        top: 4px;
        left: 4px;
    }

    .product-flag {
        padding: 3px 6px;
        font-size: 0.65rem;
    }
}


/* Force Bootstrap col-xs-6 to work on all screen sizes - ULTRA SPECIFIC */
.products .col-xs-6,
.products .product.col-xs-6,
.col-xs-6.product,
[class*="col-xs-6"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    float: left !important;
}

/* Additional mobile-specific rules */
@media (max-width: 767px) {

    .products .col-xs-6,
    .products .product,
    .products>div,
    .products article {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        float: left !important;
        box-sizing: border-box !important;
        margin-bottom: auto;
        margin-top: 10px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .product-miniature {
        height: 85% !important;

    }
}

/* Tablet: 3 columns */
@media (min-width: 768px) and (max-width: 991px) {
    .products .product {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        width: 33.333% !important;
    }
}

@media (min-width: 992px) {
    .products .product {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Product Card - EXACT MATCH STYLING */
.product-miniature {
    background: transparent;
    padding: 0;
    /* Remove default padding, content will handle it */
    transition: box-shadow 0.3s ease;
    height: 100%;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-miniature:hover {
    box-shadow: none;
    border-color: transparent;
}

.thumbnail-container {
    padding: 20px;
    padding-bottom: 15px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-thumbnail img {
    max-height: 180px;
    /* Limit height to align cards */
    object-fit: contain;
    margin-bottom: 15px;
}

.product-info {
    text-align: left;
}

.product-title a {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    display: block;
    margin-bottom: 5px;
    min-height: 70px;
    /* Force 3-4 lines for alignment (Fix unequal height) */
}

/* Stock Labels if needed */
.product-flags {
    position: absolute;
    top: 10px;
    left: 10px;
}

.product-flag {
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    background: #2ecc71;
    /* Green default */
    border-radius: 2px;
}

.product-flag.on-sale {
    background: #e74c3c;
}

/* New Product Card Design "RenovClean" */
.product-miniature .product-card-design {
    background: #fff;
    border: none !important;
    /* Force removal */
    border-radius: 8px;
    padding: 20px 10px 0;
    /* No bottom padding to remove white band */
    text-align: center;
    transition: all 0.3s;
    height: 100%;
    margin: 0 10px 20px 10px;
    /* Bigger spacing between cards */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.product-miniature:hover .product-card-design {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.product-card-design img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    width: 50%;
}

.product-card-design .quick-view {
    display: inline-flex;
    align-items: center;
    color: #6c88be;
    /* Light Blue */
    font-size: 0.85rem;
    text-decoration: none;
    margin-bottom: 10px;
}

.product-card-design .quick-view i {
    font-size: 16px;
    margin-right: 4px;
}

.product-card-design .product-actions {
    margin-top: auto;
    /* Pushes button to the bottom for perfect alignment */
    padding-top: 15px;
    padding-bottom: 20px;
    /* Space inside the card, creating a clean bottom area */
}

.product-card-design .product-title {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    margin: auto;
}

.product-card-design .product-title a {
    color: #333;
    text-decoration: none;
}

.product-card-design .product-separator {
    width: 60px;
    height: 3px;
    background: #f0f0f0;
    margin: auto;
}

.product-card-design .product-price-and-shipping {
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 100%;
}

.product-card-design .product-price-and-shipping .price {
    color: var(--secondary-color);
    /* Orange */
    font-size: 1.2rem;
    font-weight: 700;
}

.product-card-design .regular-price {
    font-size: 0.9rem;
    color: #999;
    text-decoration: line-through;
    margin-right: 5px;
}

/* Hide original elements if still present due to Smarty blocks */
.product-card-design+.highlighted-informations {
    display: none;
}

/* Price Section */
.product-price-and-shipping {
    font-family: var(--font-family);
}

.product-price-and-shipping .price {
    color: #e74c3c;
    /* Reddish Orange like image */
    font-weight: 800;
    font-size: 1.3rem;
    display: block;
}

.product-price-and-shipping .regular-price {
    text-decoration: line-through;
    color: #bdc3c7;
    font-size: 0.9rem;
    margin-left: 5px;
}

/* Button Styling To Match Image */
.product-actions {
    margin-top: auto;
}

.add-to-cart-btn {
    width: 100%;
    background-color: #f36f21;
    /* Specific Orange from image */
    border: none;
    color: white;
    font-weight: 700;
    text-transform: none;
    /* Image shows "Ajouter au panier" not uppercase */
    padding: 10px 15px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
    font-size: 0.95rem;
}

.add-to-cart-btn:hover {
    background-color: #d35400;
}

.add-to-cart-btn .material-icons {
    font-size: 18px;
    margin-left: 5px;
    font-weight: bold;
}

/* --- FOOTER STYLES --- */
.footer-container {
    background-color: #284263;
    /* Darker Blue */
    color: #fff;
    padding-top: 60px;
    padding-bottom: 30px;
    font-size: 0.95rem;
    margin-top: 0;
}

/* 1. MAIN GRID - FORCE 4 COLUMNS */
@media (min-width: 992px) {

    /* Broad selector to catch main row inside container */
    .footer-container .row {
        display: flex;
        flex-wrap: wrap;
        /* Changed to wrap to allow copyright to drop */
        justify-content: space-between;
        align-items: flex-start;
    }

    /* Columns */
    .footer-container .col-md-3,
    .footer-container .col-lg-3,
    .footer-container .links,
    .footer-container .block-contact,
    .footer-container .block_myaccount_infos,
    .footer-container .row>div {
        flex: 0 0 25%;
        max-width: 25%;
        width: 25%;
        margin: 0;
        padding: 0 15px;
        /* Force Vertical Layout for the Column Itself */
        display: flex;
        flex-direction: column !important;
    }

    /* FIX: Copyright Row needs to be full width */
    .footer-container .row>.col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }
}

/* 2. FORCE ELEMENTS TO BREAK LINE (The actual fix) */
/* Titles */
.footer-container h3,
.footer-container h4,
.footer-container .h3,
.footer-container .h4,
.footer-container .block-contact-title,
.footer-container .myaccount-title,
.footer-container .title {
    /* Common module title class */
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    position: relative !important;

    /* FORCE ROW BREAK */

    width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* Wrappers of Lists (often .wrapper or .collapse) */
.footer-container .wrapper,
.footer-container .collapse,
.footer-container .toggle-footer {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
}

/* Link Lists themselves */
.footer-container ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
    width: 100% !important;
    clear: both !important;
}

/* Underline */
.footer-container h3::after,
.footer-container .h3::after,
.footer-container h4::after,
.footer-container .h4::after,
.footer-container .block-contact-title::after,
.footer-container .myaccount-title::after,
.footer-container .title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #F89422;
    /* Orange Accent */
    display: block !important;
}

/* 3. LINKS STYLING */
.footer-container ul li {
    margin-bottom: 10px !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
}

.footer-container a {
    color: #fff !important;
    text-decoration: none !important;
    transition: all 0.2s;
    font-size: 1.1rem;
    text-align: left;
    display: block;
    /* Ensure full width availability */
}

.footer-container a:hover {
    color: #F89422 !important;
    padding-left: 5px !important;
}

/* Account Title Link Specific */
.block_myaccount_infos .myaccount-title a {
    color: #fff !important;
}

/* 4. CONTACT BLOCK SPECIFICS */
.footer-container .block-contact .data,
.footer-container .block-contact .contact-rich {
    color: #e1e1e1 !important;
    margin-bottom: 10px !important;
    display: block !important;
    /* Force stack */
    width: 100% !important;
}

/* 5. HIDE MOBILE ELEMENTS */
.footer-container .navbar-toggler,
.footer-container .float-xs-right {
    display: none !important;
}

/* Ensure collapse is visible on desktop */
@media (min-width: 768px) {
    .footer-container .collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 768px) {
    .col-lg-8 {
        margin-left: 0px !important;
    }

    .col-lg-4 {
        margin-left: 0px !important;
    }


}

/* 6. COPYRIGHT */
.footer-container .copyright {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    color: rgba(255, 255, 255, 0.5) !important;
}

.footer-container .copyright span {
    display: inline !important;
    width: auto !important;
}

/* MOBILE RESET */
@media (max-width: 991px) {
    .footer-container .row {
        display: block;
    }

    .footer-container .row>div,
    .footer-container .col-md-3 {
        width: 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }

    .footer-container h3,
    .footer-container h4,
    .footer-container .title,
    .footer-container ul li,
    .footer-container a,
    .footer-container .copyright {
        text-align: center;
    }

    .footer-container h3::after,
    .footer-container h4::after,
    .footer-container .title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* FIX: Add missing Bootstrap 4 Alpha visibility classes used by PrestaShop */
@media (min-width: 768px) {
    .hidden-md-up {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hidden-sm-down {
        display: none !important;
    }
}

/* Hide duplicate footer links generated by displayFooterAfter hook */
.footer-container .container>.row:nth-of-type(2) .links {
    display: none !important;
}

.footer-container .container>.row:nth-of-type(2) .links {
    display: block !important;
}

.product-miniature:hover .product-card-design img {
    transform: scale(1.1);
}

/* --- IMPROVED CATEGORY HEADER & SUBCATEGORIES --- */

/* Category Header */
#js-product-list-header {
    margin-bottom: 30px;
    margin-top: 20px;
}

#js-product-list-header .block-category {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

#js-product-list-header .block-category-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: 30px; removed to preserve grid */
}

#js-product-list-header .category-text {
    flex: 1;
}

#js-product-list-header .h1 {
    color: var(--primary-color);
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: none;
    font-size: 2rem;
    padding: 0;
    border: none;
}

#js-product-list-header #category-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
}

#js-product-list-header .category-cover {
    flex: 0 0 200px;
    /* Fixed width for image container */
    max-width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#js-product-list-header .category-cover img {
    border-radius: 8px;
    max-height: 150px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    #js-product-list-header .block-category-inner {
        flex-direction: column;
        text-align: center;
    }

    #js-product-list-header .category-cover {
        margin-bottom: 20px;
        order: -1;
        /* Show image on top on mobile */
        flex: auto;
        max-width: 100%;
    }
}

/* Subcategories Grid */
#subcategories {
    border: none;
    background: transparent;
    padding: 0;
    margin-bottom: 40px;
}

#subcategories .subcategory-heading {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 25px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    display: inline-block;
}

.subcategories-grid {
    margin-left: -10px;
    margin-right: -10px;
}

.subcategories-grid>div {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.subcategory-card {
    background: #fff;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    border: 1px solid #f1f1f1;
}

.subcategory-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: #315379;
    /* Optional: highlight border */
}

.subcategory-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none !important;
    padding: 20px;
    align-items: center;
    text-align: center;
}

.subcategory-image-wrapper {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    width: 100%;
}

.subcategory-image-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s;
}

.subcategory-card:hover .subcategory-image-wrapper img {
    transform: scale(1.05);
}

.subcategory-title {
    margin-top: auto;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

.subcategory-card:hover .subcategory-title {
    color: var(--secondary-color);
}

.placeholder-image {
    color: #e1e1e1;
    font-size: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

/* --- PAGINATION --- */
.pagination {
    background: #fff;
    border-radius: 5px;
    padding: 15px 20px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.pagination>.col-md-4 {
    padding-left: 0;
    display: flex;
    align-items: center;
    color: #777;
    font-size: 0.9rem;
}

.pagination .page-list {
    padding: 0;
    margin: 0;
    list-style: none !important;
    /* Force remove bullets */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.pagination .page-list li {
    display: inline-block;
    margin: 0 4px;
    padding: 0;
    list-style: none !important;
}

/* Base style for buttons */
.pagination .page-list li a,
.pagination .page-list li span.spacer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 4px;
    background: #fff;
    color: #555;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid #e1e1e1;
    font-size: 0.95rem;
}

/* Hover state */
.pagination .page-list li a:hover {
    background-color: #f8f9fa;
    color: var(--primary-color);
    border-color: var(--primary-color);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Active current page */
.pagination .page-list li.current a,
.pagination .page-list li.current {
    background-color: var(--primary-color);
    color: #fff !important;
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3);
}

/* Previous/Next buttons specific adjustment */
.pagination .page-list li a.previous,
.pagination .page-list li a.next {
    font-weight: 600;
    text-transform: capitalize;
    padding: 0 15px;
}

.pagination .page-list li a i {
    font-size: 18px;
    vertical-align: middle;
}

.pagination .page-list li a.previous i {
    margin-right: 5px;
}

.pagination .page-list li a.next i {
    margin-left: 5px;
}


/* Mobile Responsive Pagination */
@media (max-width: 768px) {
    .pagination {
        flex-direction: column;
        padding: 15px;
    }

    .pagination>.col-md-4 {
        margin-bottom: 15px;
        justify-content: center;
        width: 100%;
        text-align: center;
    }

    .pagination>.col-md-6 {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .pagination .page-list {
        justify-content: center;
        flex-wrap: wrap;
    }

    .pagination .page-list li {
        margin-bottom: 5px;
    }
}

/* --- SORT ORDER DROPDOWN --- */
.sort-orders-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sort-by-label {
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 5px;
    font-weight: 500;
}

.products-sort-order .select-title {
    background: #fff;
    border: 1px solid #e1e1e1;
    /* Clean border */
    padding: 10px 15px;
    border-radius: 4px;
    width: 100%;
    min-width: 200px;
    /* Ensure decent width */
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555;
    font-size: 0.95rem;
    transition: all 0.2s;
    cursor: pointer;
}

.products-sort-order .select-title:hover {
    border-color: #aaa;
    background: #fcfcfc;
}

.products-sort-order .select-title:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(44, 62, 80, 0.1);
}

.products-sort-order .dropdown-menu {
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-top: 5px;
    padding: 5px 0;
    width: 100%;
}

.products-sort-order .select-list {
    display: block;
    padding: 10px 20px;
    color: #555;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.products-sort-order .select-list:hover {
    background: #f8f9fa;
    color: var(--primary-color);
}

/* --- CMS / BLOG GRID --- */
.section-title {
    margin-bottom: 25px;
    font-weight: 700;
    color: var(--primary-color);
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--secondary-color);
}

.cms-grid {
    margin-bottom: 40px;
}

.cms-grid>div {
    margin-bottom: 30px;
}

/* Category Card */
.cms-category-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s;
    height: 100%;
}

.cms-category-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transform: translateY(-3px);
}

.cms-category-card .card-title a {
    color: #333;
    font-weight: 700;
    text-decoration: none;
}

/* Article Card */
.cms-article-card {
    background: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    height: 100%;
    transition: all 0.3s ease;
}

.cms-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.article-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none !important;
}

.article-placeholder {
    height: 180px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.article-placeholder i {
    font-size: 64px;
    opacity: 0.5;
}

/* Try to target real images if they exist inside the content and we can extract them visually (not possible w CSS alone)
   But if the user used a module that puts img tag, we could style it.
*/

.article-content {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 15px;
    line-height: 1.4;
}

.read-more {
    margin-top: auto;
    /* Push to bottom */
    font-weight: 600;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.read-more i {
    font-size: 16px;
    margin-left: 5px;
    transition: margin-left 0.2s;
}

.cms-article-card:hover .read-more i {
    margin-left: 10px;
}

/* --- BLOG MODULE STYLES --- */

/* Blog List Page */
.blog-posts-grid {
    margin-left: -15px;
    margin-right: -15px;
}

.blog-posts-grid>div {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
}

.blog-post-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.blog-post-card .post-link {
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-image-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f5f5f5;
}

.post-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-post-card:hover .post-image-wrapper img {
    transform: scale(1.08);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blog-post-card:hover .image-overlay {
    opacity: 1;
}

.post-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.post-placeholder i {
    font-size: 72px;
    color: rgba(255, 255, 255, 0.4);
}

.post-card-content {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #999;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.post-meta i {
    font-size: 16px;
}

.post-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.2s;
}

.blog-post-card:hover .post-title {
    color: var(--secondary-color);
}

.post-excerpt {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
    flex: 1;
}

.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: auto;
}

.read-more-link i {
    font-size: 18px;
    transition: transform 0.2s;
}

.blog-post-card:hover .read-more-link i {
    transform: translateX(5px);
}

/* Individual Blog Article Page */
.blog-article {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.article-hero-image {
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    background: #f5f5f5;
}

.article-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-header {
    padding: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.article-meta i {
    font-size: 18px;
}

.article-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.2;
    margin: 0;
}

.article-content {
    padding: 40px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
}

.article-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 30px;
    margin-bottom: 15px;
}

.article-content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-top: 25px;
    margin-bottom: 12px;
}

.article-content p {
    margin-bottom: 20px;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 25px 0;
}

.article-content ul,
.article-content ol {
    margin-bottom: 20px;
    padding-left: 30px;
}

.article-content li {
    margin-bottom: 10px;
}

.article-footer {
    padding: 30px 40px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

.btn-back-to-blog {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-back-to-blog:hover {
    background: var(--secondary-color);
    color: #fff;
    transform: translateX(-3px);
    text-decoration: none;
}

.btn-back-to-blog i {
    font-size: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .article-title {
        font-size: 1.8rem;
    }

    .article-header,
    .article-content,
    .article-footer {
        padding: 25px;
    }

    .post-image-wrapper {
        height: 180px;
    }
}

/* ============================================
   CMS PAGE STYLES - LIVRAISON / DELIVERY PAGE
   Styles automatiques pour les pages CMS
   ============================================ */

/* AmÃ©lioration de la sidebar des catÃ©gories CMS */
#left-column .block-categories {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 20px;
}

#left-column .block-categories .h6 {
    background: linear-gradient(135deg, #315379 0%, #4a6d94 100%);
    margin: 0;
}

#left-column .block-categories .category-sub-menu {
    background: #fff;
}

#left-column .block-categories .category-sub-menu li a {
    padding: 14px 20px;
    transition: all 0.3s ease;
}

#left-column .block-categories .category-sub-menu li a:hover {
    background: linear-gradient(to right, #EFF3F8 0%, #fff 100%);
    padding-left: 25px;
}

/* AmÃ©lioration du contenu principal des pages CMS */
#content.page-content {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 40px;
}

/* Titre de la page */
.page-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #315379;
    margin-bottom: 10px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 20px;
}

.page-header h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(to right, #F89422, #ff9f3d);
    border-radius: 2px;
}

/* Titres H2 avec numÃ©rotation automatique */
#content.page-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #315379;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 25px;
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    border-left: 5px solid #F89422;
    transition: all 0.3s ease;
    position: relative;
}

#content.page-content h2:hover {
    border-color: #e0e7ef;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Extraire le numÃ©ro du titre et le styliser */
#content.page-content h2::first-line {
    font-weight: 800;
}

/* Titres H3 */
#content.page-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #315379;
    margin-top: 25px;
    margin-bottom: 15px;
}

/* Paragraphes */
#content.page-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

/* Listes Ã  puces stylisÃ©es */
#content.page-content ul {
    margin: auto !important;
    list-style: none;
}

#content.page-content ul li {
    position: relative;
    margin-bottom: 12px;
    line-height: 1.7;
    color: #555;
}

#content.page-content ul li::before {
    /*content: 'âœ“';*/
    position: absolute;
    left: 0;
    top: 0;
    color: #F89422;
    font-size: 20px;
    font-weight: bold;
}

/* Listes ordonnÃ©es avec badges */
#content.page-content ol {
    counter-reset: item;
    margin: 20px 0;
    padding-left: 0;
    list-style: none;
}

#content.page-content ol li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 12px;
    line-height: 1.7;
    color: #555;
}

#content.page-content ol li::before {
    content: counter(item);
    counter-increment: item;
    position: absolute;
    left: 0;
    top: 2px;
    width: 26px;
    height: 26px;
    background: #315379;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    line-height: 26px;
}

/* Texte en gras */
#content.page-content strong,
#content.page-content b {
    color: #315379;
    font-weight: 600;
}

/* Liens */
#content.page-content a {
    color: #F89422;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    margin-bottom: 10px;
}

#content.page-content a:hover {
    color: #df8018;
    border-bottom-color: #df8018;
}

/* Tableaux */
#content.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#content.page-content table th {
    background: #315379;
    color: #fff;
    padding: 15px;
    text-align: left;
    font-weight: 600;
}

#content.page-content table td {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
}

#content.page-content table tr:last-child td {
    border-bottom: none;
}

#content.page-content table tr:hover {
    background: #fafafa;
}

/* AmÃ©lioration de l'espacement gÃ©nÃ©ral */
#content.page-content>*:first-child {
    margin-top: 0;
}

#content.page-content>*:last-child {
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 991px) {
    #content.page-content {
        padding: 25px;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    #content.page-content h2 {
        font-size: 1.5rem;
        padding: 20px;
        margin-top: 30px;
    }

    #content.page-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767px) {
    #content.page-content {
        padding: 20px;
        border-radius: 6px;
    }

    .page-header h1 {
        font-size: 1.6rem;
    }

    #content.page-content h2 {
        font-size: 1.3rem;
        padding: 15px;
        margin-top: 25px;
    }

    #content.page-content h3 {
        font-size: 1.1rem;
    }

    #content.page-content ul li,
    #content.page-content ol li {
        padding-left: 30px;
        font-size: 0.95rem;
    }

    #content.page-content ul li::before {
        font-size: 16px;
    }

    #content.page-content ol li::before {
        width: 22px;
        height: 22px;
        line-height: 22px;
        font-size: 0.75rem;
    }
}

/* Styles spÃ©cifiques pour les pages avec sidebar (layout-left-column) */
.layout-left-column #content.page-content {
    min-height: 400px;
}

/* Animation d'apparition au scroll */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#content.page-content h2 {
    animation: fadeInUp 0.6s ease-out;
}

/* ============================================
   PRODUCT PAGE STYLES - MODERN & ELEGANT
   ============================================ */

/* Product Container */
.product-container {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 40px;
}

@media (max-width: 767px) {
    .product-container {
        padding: 15px;
        margin-bottom: 20px;
    }
}

/* Product Images Section */
.page-content {
    position: relative;
}

.product-cover {
    position: relative;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.product-cover img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.product-cover:hover img {
    transform: scale(1.05);
}

/* Product Flags (New, Sale, etc.) */
.product-flags {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-flag {
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.product-flag.new {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.product-flag.on-sale {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.product-flag.discount {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

/* Thumbnails Container */
.images-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Mask container for thumbnails */
.images-container .js-qv-mask {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-color) #f0f0f0;
}

/* Custom scrollbar for webkit browsers */
.images-container .js-qv-mask::-webkit-scrollbar {
    height: 8px;
}

.images-container .js-qv-mask::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.images-container .js-qv-mask::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 4px;
}

.images-container .js-qv-mask::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Product images list */
.images-container .product-images {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: min-content;
    margin-bottom: 10px;
}

/* Individual thumbnail container */
.images-container .thumb-container {
    flex: 0 0 auto;
    width: 100px;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    background: #fff;
}

.images-container .thumb-container:hover,
.images-container .thumb-container.selected {
    border-color: var(--secondary-color);
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
}

.images-container .thumb-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Product Info Section */
.product-container .col-md-6:last-child {
    display: flex;
    flex-direction: column;
}

.img-fluid {
    max-width: 134%;
    height: auto;
}

.product-container h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1.3;
}

/* Product Prices */
.product-prices {
    background: linear-gradient(135deg, #f5f7fa 0%, #d7e6f9 20%);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.product-prices .current-price {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 10px;
}

.product-prices .current-price-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--secondary-color);
    line-height: 1;
}

.product-prices .regular-price {
    font-size: 1.3rem;
    color: #999;
    text-decoration: line-through;
}

.product-prices .discount {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-left: 10px;
}

.product-prices .tax-shipping-delivery-label {
    font-size: 0.85rem;
    color: #666;
    margin-top: 8px;
}

/* Product Description Short */
.product-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 25px;
    padding: 20px;
    background: #f9f9f9;
    border-left: 4px solid var(--secondary-color);
    border-radius: 4px;
}

/* Product Variants */
.product-variants {
    margin-bottom: 25px;
}

.product-variants .form-group {
    margin-bottom: 20px;
}

.product-variants label {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: block;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-variants select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e1e1e1;
    border-radius: 6px;
    font-size: 1rem;
    color: #333;
    background: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-variants select:hover {
    border-color: #aaa;
}

.product-variants select:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1);
}

/* Color/Texture Variants (if using radio buttons with images) */
.product-variants .variant-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.product-variants .variant-links input[type="radio"] {
    display: none;
}

.product-variants .variant-links label {
    cursor: pointer;
    border: 2px solid #e1e1e1;
    border-radius: 6px;
    padding: 8px 12px;
    transition: all 0.3s ease;
    background: #fff;
    text-transform: none;
    letter-spacing: normal;
}

.product-variants .variant-links input[type="radio"]:checked+label {
    border-color: var(--secondary-color);
    background: var(--secondary-color);
    color: #fff;
    font-weight: 700;
}

/* Quantity Selector */
.product-add-to-cart {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid #f0f0f0;
    margin-bottom: 25px;
    position: relative;
}

.product-add-to-cart .product-quantity {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.product-add-to-cart .qty-label {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-add-to-cart .input-group {
    display: flex;
    align-items: center;
    border: 2px solid #e1e1e1;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.product-add-to-cart .input-group button {
    background: #f5f5f5;
    border: none;
    width: 40px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 700;
}

.product-add-to-cart .input-group button:hover {
    background: var(--secondary-color);
    color: #fff;
}

.product-add-to-cart .input-group input {
    border: none;
    width: 60px;
    height: 45px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.product-add-to-cart .input-group input:focus {
    outline: none;
}

/* Add to Cart Button */
.product-add-to-cart .add-to-cart {
    width: 100%;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
    border: none;
    color: #fff;
    padding: 16px 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.product-add-to-cart .add-to-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4);
}

.product-add-to-cart .add-to-cart:active {
    transform: translateY(0);
}

.product-add-to-cart .add-to-cart i {
    font-size: 1.3rem;
}

/* Product Availability */
#product-availability {
    position: absolute;
    margin-top: 80px;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.product-availability.in-stock {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.product-availability.out-of-stock {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.product-availability i {
    font-size: 1.2rem;
}

@media (max-width: 767px) {
    #product-availability {
        position: static;
        margin-top: 100px;
        margin-left: -360px;
    }

    .product-add-to-cart .qty .input-group {
        width: 102px !important;
    }

    .product-add-to-cart .add-to-cart {
        height: 101px !important;
        width: 138px !important;
    }
}

/* Product Tabs */
.tabs {
    margin-top: 40px;
}

.tabs .nav-tabs {
    border-bottom: 3px solid #f0f0f0;
    margin-bottom: 30px;
    display: flex;
    gap: 5px;
}

.tabs .nav-tabs .nav-item {
    margin-bottom: 0;
}

.tabs .nav-tabs .nav-link {
    border: none;
    background: transparent;
    color: #666;
    padding: 15px 25px;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    bottom: -3px;
}

.tabs .nav-tabs .nav-link:hover {
    color: var(--secondary-color);
    background: #f9f9f9;
}

.tabs .nav-tabs .nav-link.active {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
    background: transparent;
}

.tabs .tab-content {
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.tabs .tab-pane {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
}

.tabs .tab-pane h2,
.tabs .tab-pane h3 {
    color: var(--primary-color);
    margin-top: 20px;
    margin-bottom: 15px;
}

.tabs .tab-pane ul,
.tabs .tab-pane ol {
    padding-left: 25px;
    margin-bottom: 20px;
}

.tabs .tab-pane li {
    margin-bottom: 10px;
}

/* Product Details Table */
.product-features {
    width: 100%;
    border-collapse: collapse;
}

.product-features tr {
    border-bottom: 1px solid #f0f0f0;
}

.product-features tr:last-child {
    border-bottom: none;
}

.product-features td {
    padding: 12px 15px;
}

.product-features td:first-child {
    font-weight: 600;
    color: var(--primary-color);
    width: 40%;
}

.product-features td:last-child {
    color: #555;
}

/* Reassurance Block */
.product-reassurance {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding: 25px;
    background: #f9f9f9;
    border-radius: 8px;
}

.product-reassurance .reassurance-item {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-reassurance .reassurance-item i {
    font-size: 2.5rem;
    color: var(--secondary-color);
}

.product-reassurance .reassurance-item .reassurance-text {
    flex: 1;
}

.product-reassurance .reassurance-item .reassurance-text strong {
    display: block;
    color: var(--primary-color);
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.product-reassurance .reassurance-item .reassurance-text span {
    font-size: 0.85rem;
    color: #666;
}

/* Product Accessories */
.product-accessories {
    margin-top: 50px;
    padding: 40px;
    background: #f9f9f9;
    border-radius: 12px;
}

.product-accessories .h5 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 30px;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 991px) {
    .product-container {
        padding: 25px;
    }

    .product-container h1 {
        font-size: 1.6rem;
    }

    .product-prices .current-price-value {
        font-size: 2rem;
    }

    .images-container .thumb-container {
        width: 80px;
    }
}

@media (max-width: 767px) {
    .product-container {
        padding: 20px;
    }

    .product-container h1 {
        font-size: 1.4rem;
    }

    .product-prices {
        padding: 20px;
    }

    .product-prices .current-price-value {
        font-size: 1.8rem;
    }

    .tabs .nav-tabs {
        flex-direction: column;
    }

    .tabs .nav-tabs .nav-link {
        border-bottom: 1px solid #e1e1e1;
        border-left: 3px solid transparent;
    }

    .tabs .nav-tabs .nav-link.active {
        border-bottom-color: #e1e1e1;
        border-left-color: var(--secondary-color);
    }

    .tabs .tab-content {
        padding: 20px;
    }

    .product-reassurance {
        flex-direction: column;
    }

    .images-container .thumb-container {
        width: 70px;
    }
}

/* ========================================
   PRODUCT QUANTITY & ADD TO CART
   ======================================== */

/* Product add to cart section */
.product-add-to-cart {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin: 20px 0;
}

/* Quantity section */
.product-quantity {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Quantity label */
.product-add-to-cart .control-label {
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
    white-space: nowrap;
    display: block;
    margin-bottom: 10px;
}

/* Quantity selector */
.product-add-to-cart .qty {
    display: flex;
    align-items: center;
    width: 110px;
}

.product-add-to-cart .qty .input-group {
    display: flex;
    align-items: stretch;
    border: 2px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    width: auto;
    height: 70px;
}

.col-lg-8 {
    margin-left: -30px;
    max-width: 68.667%;
}

.col-lg-4 {
    margin-left: 10px;
}

.input-group:not(.has-validation)>.form-control:not(:last-child) {
    width: 60px;
    margin-left: 0px;
}

.product-add-to-cart .qty input[type="number"],
.product-add-to-cart .qty input.form-control {
    border: none;
    text-align: center;
    width: 60px;
    padding: 12px 10px;
    font-size: 18px;
    font-weight: 600;
    -moz-appearance: textfield;
    outline: none;
    flex: 0 0 100px;
    line-height: 1.5;
    order: 1;
    color: #333 !important;
    background: #fff !important;
}

.product-add-to-cart .qty input[type="number"]::-webkit-outer-spin-button,
.product-add-to-cart .qty input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Quantity increment/decrement buttons */
.product-add-to-cart .qty .input-group-btn-vertical {
    display: flex;
    flex-direction: column;
    border-left: 2px solid #e1e1e1;
    order: 2;
}

.product-add-to-cart .qty .btn-touchspin {
    background: #f8f9fa !important;
    border: none !important;
    padding: 0 !important;
    width: 36px !important;
    height: 23px !important;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--primary-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    margin-left: 10px;
}

.product-add-to-cart .qty .btn-touchspin:hover {
    background: var(--secondary-color) !important;
    color: #fff !important;
}

.product-add-to-cart .qty .btn-touchspin:active {
    transform: scale(0.95);
}

.product-add-to-cart .qty .btn-touchspin .material-icons {
    font-size: 16px;
}

.product-add-to-cart .qty .bootstrap-touchspin-up {
    border-bottom: 1px solid #e1e1e1 !important;
}

/* Add to cart button */
.product-add-to-cart .add {
    flex: 1;
}

.product-add-to-cart .add-to-cart {
    width: 100%;
}

/* ==========================================================================
   FIX: MODAL BACKDROP & Z-INDEX ISSUES
   ========================================================================== */
/* Force modal to be above everything */
.modal-backdrop {
    z-index: 1040 !important;
    opacity: 0.5 !important;
    /* Ensure it's not fully black */
}

.modal {
    z-index: 1050 !important;
}

/* Specific fix for Blockcart Modal */
#blockcart-modal {
    z-index: 100000 !important;
    /* Extremely high to be safe */
    background: transparent !important;
    /* Avoid black background on modal container */
}

/* CRITICAL: Force display block when class 'in' is present */
#blockcart-modal.in,
#blockcart-modal.show,
.modal.in,
.modal.show {
    display: block !important;
    opacity: 1 !important;
}

#blockcart-modal .modal-dialog {
    z-index: 100001 !important;
    margin-top: 10vh;
    /* Ensure it's not hidden at the very top */
    transform: none !important;
    /* Prevent positioning issues */
}

#blockcart-modal .modal-content {
    background-color: #ffffff !important;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3) !important;
    color: #333 !important;
    /* Ensure text is visible */
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Ensure body doesn't get stuck */
body.modal-open {
    overflow: hidden;
}

/* REDESIGN CART PAGE */

/* Main Layout */
.cart-grid {
    display: flex;
    flex-wrap: wrap;
    /* gap: 30px; removed to preserve grid */
    margin-top: 20px;
}

.cart-grid-body,
.cart-grid-right {
    padding: 0;
}

/* Card Containers */
.cart-container,
.cart-summary {
    background: #fff;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Premium soft shadow */
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.cart-container .card-block {
    padding: 0;
}

.cart-container hr.separator {
    margin: 20px 0;
    border-top: 1px solid #f1f1f1;
}

/* Product Line Item */
.cart-product-line {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f6f6f6;
    transition: background-color 0.2s;
}

.cart-product-line:last-child {
    border-bottom: none;
}

.cart-product-line:hover {
    background-color: #fafafa;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
}

/* Image */
.cart-product-line__image {
    width: 100px;
    flex-shrink: 0;
    margin-right: 20px;
}

.cart-product-line__image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #eee;
}

/* Info: Name & Unit Price */
.cart-product-line__info {
    flex: 1;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.cart-product-line__info .product-name {
    width: 100px;
}

.cart-product-line__info .product-name a {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s;
}

.cart-product-line__info .product-name a:hover {
    color: #2fb5d2;
    /* Brand Color */
}

.cart-product-line__info .product-unit-price {
    margin-top: 5px;
    font-size: 14px;
    color: #888;
}

.cart-product-line__info .regular-price {
    text-decoration: line-through;
    color: #aaa;
    margin-right: 5px;
}

.cart-product-line__info .discount {
    color: #ff5555;
    font-weight: 600;
}

/* Actions: Quantity, Price, Delete */
.cart-product-line__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Quantity Input */
.qty-control input {
    width: 60px;
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-weight: 600;
    color: #333;
}

/* Total Price */
.cart-product-line__actions .total-price {
    min-width: 80px;
    text-align: right;
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

/* Delete Button */
.remove-action .remove-from-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fff0f0;
    color: #ff4d4d;
    transition: all 0.2s;
}

/* FIX: Cart Product Line Alignment - Force Single Row */
.product-line-grid {
    display: flex;
    flex-wrap: nowrap !important;
    /* Force single line always */
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f1f1f1;
}

/* Override Bootstrap constraints */
.product-line-grid-left,
.product-line-grid-body,
.product-line-grid-right {
    width: auto !important;
    /* Override col-* percentages */
    max-width: none !important;
    flex-shrink: 0;
    /* Prevent squishing by default, manage below */
}

/* Fix Image Container */
.product-line-grid-left {
    flex: 0 0 80px;
    /* Small fixed width for image */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

/* Center Body Content vertically */
.product-line-grid-body {
    flex: 1 1 auto;
    /* Take remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 15px;
    min-width: 0;
    /* Allow text truncate if needed */
}

.product-line-grid-body .product-line-info .label {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    line-height: 1.3;
    white-space: normal;
    /* Allow text wrap */
}

.product-line-grid-body .product-price {
    font-size: 0.95rem;
    color: #666;
    margin-top: 4px;
}

.product-line-grid-body .unit-price-cart {
    font-size: 0.8rem;
    color: #999;
}

/* Fix Right Section (Qty, Total, Delete) */
/* Override the col-xs-12 that forces new line */
.product-line-grid-right {
    flex: 0 0 auto;
    /* Auto width based on content */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Simplify the nested rows in right content */
.product-line-grid-right .row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: auto;
    margin: 0;
}

.product-line-grid-right .col-md-10,
.product-line-grid-right .col-xs-6 {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none;
    display: flex;
    align-items: center;
    padding: 0;
}

/* Hide the spacer div */
.product-line-grid-right .col-xs-4.hidden-md-up {
    display: none !important;
}

.product-line-grid-right .col-md-2,
.product-line-grid-right .col-xs-2 {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none;
    display: flex;
    align-items: center;
    padding-left: 40px;
    /* Increased padding slightly more */
    margin-left: 25px;
    /* Increased margin slightly more */
}

/* Quantity Block */
.product-line-grid-right .qty {
    margin-right: 10px;
    padding: 0 !important;
}

/* Price Block */
.product-line-grid-right .price {
    padding: 0 !important;
    text-align: right;
    white-space: nowrap;
    margin-right: 45px;
    /* Increased margin slightly more */
}

/* Qty Input Styling */
.js-cart-line-product-quantity {
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 36px;
    width: 50px;
    padding: 5px;
}

/* Total Price Styling */
.product-line-grid-right .product-price strong {
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 700;
    display: block;
}

/* Trash Icon styling */
.remove-from-cart i {
    font-size: 22px;
    color: #999;
    transition: color 0.2s;
    float: none !important;
    /* Override float-xs-left */
}

.remove-from-cart:hover i {
    color: #e74c3c;
}

/* Adjustments for very small screens if needed, but keeping single row */
@media (max-width: 480px) {
    .product-line-grid-left {
        flex: 0 0 60px;
        margin-right: 10px;
    }

    .product-line-grid-body .product-line-info .label {
        font-size: 0.9rem;
    }
}

.remove-action .remove-from-cart:hover {
    background-color: #ff4d4d;
    color: #fff;
    cursor: pointer;
}

.remove-action .material-icons {
    font-size: 18px;
}

/* Cart Summary (Right Side) */
.cart-summary {
    position: sticky;
    top: 20px;
}

.cart-summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
}

.cart-summary-line.cart-total {
    background-color: #f9f9f9;
    padding: 15px;
    margin: 20px -24px -24px -24px;
    border-radius: 0 0 12px 12px;
    border-top: 1px solid #eee;
    align-items: center;
}

.cart-summary-line.cart-total .label {
    font-weight: 700;
    font-size: 16px;
    color: #333;
    margin-top: -40px;
}

.cart-summary-line.cart-total .value {
    font-weight: 800;
    font-size: 20px;
    color: #2fb5d2;
}

/* Checkout Button */
.checkout .btn-primary,
.cart-summary .btn-primary,
.cart-grid-right .btn-primary {
    width: 100%;
    padding: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 8px;
    background-color: #2fb5d2;
    border: none;
    box-shadow: 0 4px 15px rgba(47, 181, 210, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.checkout .btn-primary:hover,
.cart-summary .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(47, 181, 210, 0.5);
    background-color: #259db8;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cart-product-line {
        flex-wrap: wrap;
    }

    .cart-product-line__image {
        width: 80px;
    }

    .cart-product-line__info {
        width: calc(100% - 100px);
        padding-right: 0;
    }

    .cart-product-line__actions {
        width: 100%;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed #eee;
        justify-content: space-between;
    }

    .cart-product-line:hover {
        margin: 0;
        padding: 20px 0;
    }
}


/* Continue Shopping Link */
.cart-grid-body .label {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}

.cart-grid-body .label:hover {
    color: #2fb5d2;
}

.cart-grid-body .label i {
    font-size: 18px;
    margin-right: 5px;
}

/* Empty Cart Message */
.no-items {
    display: block;
    padding: 40px;
    text-align: center;
    font-size: 18px;
    color: #888;
    background: #f9f9f9;
    border-radius: 8px;
}



/* FIX: Remove default page background on cart to prevent double-box look */
body#cart #content,
body#cart .page-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Ensure our containers are the only ones white */
.cart-container {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 24px;
}

/* Fix List Styles */
.cart-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobile responsiveness tweak */
@media (max-width: 768px) {
    body#cart #content {
        padding: 0;
    }
}

/* Fix product details tab visibility */
.tab-content .tab-pane.active {
    display: block !important;
    opacity: 1 !important;
}

/* Remove background-color from order history status badges */
.label.label-pill {
    background-color: transparent !important;
    color: inherit !important;
}

/* Hide reorder links in order history */
.reorder-link {
    display: none !important;
}

/* Add left spacing for subcategories in sidebar menu based on depth */
#left-column ul[data-depth="1"] li a,
#left-column li[data-depth="1"] a {
    padding-left: 50px !important;
}

#left-column ul[data-depth="2"] li a,
#left-column li[data-depth="2"] a {
    padding-left: 65px !important;
}

#left-column ul[data-depth="1"] li a:hover,
#left-column li[data-depth="1"] a:hover {
    padding-left: 55px !important;
}

#left-column ul[data-depth="2"] li a:hover,
#left-column li[data-depth="2"] a:hover {
    padding-left: 70px !important;
}

/* Remove dark overlay/backdrop */
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade,
body::before,
body::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ensure body is not dimmed */
body {
    background: #f6f6f6 !important;
}

/* Remove any overlay on main content */
#wrapper,
#main,
.page-content {
    position: relative !important;
    z-index: 1 !important;
}

/* Fix wishlist button clickability */
.wishlist-button-add,
.wishlist-button-product,
button[data-button-action="add-to-wishlist"],
a[data-button-action="add-to-wishlist"],
.product-miniature .wishlist-button,
.product-card-design .wishlist-button,
[class*="wishlist"] button,
[class*="wishlist"] a {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure product thumbnail doesn't block wishlist button */
.product-thumbnail,
.product-thumbnail a,
.product-thumbnail img {
    position: relative !important;
    z-index: 1 !important;
}

/* Wishlist button container */
.wishlist-button-container,
.product-actions .wishlist {
    position: relative !important;
    z-index: 100 !important;
}

/* Cart product line actions width */
.cart_product_line_actions {
    width: 60px !important;
}

/* Hide number input arrows (spinners) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cart-product-line {
        flex-wrap: wrap;
    }

    .cart-product-line__image {
        width: 80px;
    }

    .cart-product-line__info {
        width: calc(100% - 100px);
        padding-right: 0;
    }

    .cart-product-line__actions {
        width: 100%;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed #eee;
        justify-content: space-between;
    }

    .cart-product-line:hover {
        margin: 0;
        padding: 20px 0;
    }
}


/* Continue Shopping Link */
.cart-grid-body .label {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}

.cart-grid-body .label:hover {
    color: #2fb5d2;
}

.cart-grid-body .label i {
    font-size: 18px;
    margin-right: 5px;
}

/* Empty Cart Message */
.no-items {
    display: block;
    padding: 40px;
    text-align: center;
    font-size: 18px;
    color: #888;
    background: #f9f9f9;
    border-radius: 8px;
}



/* FIX: Remove default page background on cart to prevent double-box look */
body#cart #content,
body#cart .page-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Ensure our containers are the only ones white */
.cart-container {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 24px;
}

/* Fix List Styles */
.cart-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobile responsiveness tweak */
@media (max-width: 768px) {
    body#cart #content {
        padding: 0;
    }
}

/* Fix product details tab visibility */
.tab-content .tab-pane.active {
    display: block !important;
    opacity: 1 !important;
}

/* Remove background-color from order history status badges */
.label.label-pill {
    background-color: transparent !important;
    color: inherit !important;
}

/* Hide reorder links in order history */
.reorder-link {
    display: none !important;
}

/* Add left spacing for subcategories in sidebar menu based on depth */
#left-column ul[data-depth="1"] li a,
#left-column li[data-depth="1"] a {
    padding-left: 50px !important;
}

#left-column ul[data-depth="2"] li a,
#left-column li[data-depth="2"] a {
    padding-left: 65px !important;
}

#left-column ul[data-depth="1"] li a:hover,
#left-column li[data-depth="1"] a:hover {
    padding-left: 55px !important;
}

#left-column ul[data-depth="2"] li a:hover,
#left-column li[data-depth="2"] a:hover {
    padding-left: 70px !important;
}

/* Remove dark overlay/backdrop */
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade,
body::before,
body::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ensure body is not dimmed */
body {
    background: #f6f6f6 !important;
}

/* Remove any overlay on main content */
#wrapper,
#main,
.page-content {
    position: relative !important;
    z-index: 1 !important;
}

/* Fix wishlist button clickability */
.wishlist-button-add,
.wishlist-button-product,
button[data-button-action="add-to-wishlist"],
a[data-button-action="add-to-wishlist"],
.product-miniature .wishlist-button,
.product-card-design .wishlist-button,
[class*="wishlist"] button,
[class*="wishlist"] a {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure product thumbnail doesn't block wishlist button */
.product-thumbnail,
.product-thumbnail a,
.product-thumbnail img {
    position: relative !important;
    z-index: 1 !important;
}

/* Wishlist button container */
.wishlist-button-container,
.product-actions .wishlist {
    position: relative !important;
    z-index: 100 !important;
}

/* Cart product line actions width */
.cart_product_line_actions {
    width: 60px !important;
}

/* Hide number input arrows (spinners) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* FIX: Hide Vertical Quantity Spinners */
.input-group-btn-vertical {
    display: none !important;
}

/* FIX: Cart Summary Totals Alignment & Styling */
.cart-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #444;
}

.cart-summary-line .label {
    font-weight: 500;
}

/* New wrapper for right side (Value + Shipping details) */
.cart-summary-line-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cart-summary-line .value {
    font-weight: 600;
    color: #333;
}

/* FIX: Force Shipping Line Alignment (Label Left, Value+Info Right) */
#cart-subtotal-shipping {
    justify-content: flex-start !important;
}

#cart-subtotal-shipping .label {
    margin-right: auto !important;
}

#cart-subtotal-shipping .value {
    white-space: nowrap;
}

#cart-subtotal-shipping>div {
    margin-left: 5px;
}

/* ==================================================
   ADDRESS SELECTOR IMPROVEMENTS
   ================================================== */

/* Address Grid Container */
.address-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

/* Individual Address Card */
.address-item {
    flex: 1 1 calc(50% - 20px);
    /* 2 columns */
    background: #fdfdfd;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 20px;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

/* Selected State */
.address-item.selected {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.08);
    /* Soft primary shadow */
    border-width: 2px;
    margin: -1px;
    /* Offset border width change to prevent layout shift */
}

/* Mobile: Single Column */
@media (max-width: 767px) {
    .address-item {
        flex: 1 1 100%;
    }
}

/* Address Header & Radio */
.address-item header {
    margin-bottom: 15px;
}

.address-item .radio-block {
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.address-item .custom-radio {
    margin-right: 10px;
    float: left;
    margin-top: 4px;
}

.address-alias {
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
    color: #333;
}

.address-item .address {
    margin-left: 30px;
    /* Align text with alias, indented from radio */
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666;
}

/* Separator Line */
.address-item hr {
    margin: auto 0 15px 0;
    /* Push footer to bottom */
    border-top: 1px solid #eee;
}

/* Address Actions (Edit/Delete) */
.address-footer {
    display: flex;
    gap: 15px;
    margin-left: 30px;
}

.address-footer a {
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
}

.address-footer a:hover {
    color: var(--primary-color);
}

.address-footer i {
    font-size: 16px;
    margin-right: 5px;
}

/* ==================================================
   CHECKOUT PAGE IMPROVEMENTS
   ================================================== */

/* Checkout Steps Wrapper */
.checkout-step {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.checkout-step.-current {
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Step Title Styling */
.checkout-step .step-title {
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    padding-bottom: 15px;
    border-bottom: 1px solid #f6f6f6;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    cursor: default;
}

/* Step Number Circle */
.checkout-step .step-number {
    background: var(--primary-color);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
    margin-right: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Done Checkmark */
.checkout-step.-complete .step-number {
    display: none;
}

.checkout-step .material-icons.done {
    display: none;
}

.checkout-step.-complete .material-icons.done {
    display: inline-flex;
    background: #2ebd60;
    /* Success Green */
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Edit Button */
.checkout-step .step-edit {
    margin-left: auto;
    font-size: 0.8rem;
    color: #999;
    text-transform: none;
    font-weight: normal;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    cursor: pointer;
}

.checkout-step .step-edit:hover {
    color: var(--primary-color);
}

.checkout-step .step-edit .material-icons {
    font-size: 16px;
    margin-right: 4px;
}

/* Form Controls */
.checkout-step .form-control {
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 10px 15px;
    height: auto;
    background-color: #fdfdfd;
    transition: all 0.2s;
}

.checkout-step .form-control:focus {
    background-color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

/* Delivery Textarea Width Fix */
#delivery textarea,
#gift textarea {
    width: 100%;
    max-width: 600px;
    /* Limit width */
    min-height: 80px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Cart Summary Styling */
#js-checkout-summary {
    background: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

.cart-summary-line.cart-total {
    background-color: #f9f9f9;
    padding: 20px;
    margin: 20px -20px -20px -20px;
    border-top: 1px solid #eee;
    border-radius: 0 0 8px 8px;
    height: 80px;
}

.cart-summary-line.cart-total .value {
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 800;
    margin-top: -40px;
}

/* Primary Buttons */
#checkout .btn-primary,
.continue {
    background-color: var(--primary-color);
    border: none;
    border-radius: 4px;
    padding: 12px 30px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

#checkout .btn-primary:active,
#checkout .btn-primary:focus,
#checkout .btn-primary:hover,
.continue:hover {
    background-color: var(--secondary-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* FIX: Hide "Continue" button when step is complete */
.checkout-step.-complete .continue,
.checkout-step.-complete .btn-primary {
    display: none !important;
}

/* ==================================================
   ORDER CONFIRMATION PAGE IMPROVEMENTS
   ================================================== */

/* Header Card (Order Confirmed) */
#content-hook_order_confirmation {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

#content-hook_order_confirmation .card-title {
    margin-bottom: 20px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
}

#content-hook_order_confirmation .material-icons.done {
    background-color: #2ebd60;
    /* Success Green */
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
}

/* Order Tables & Content Card */
.page-order-confirmation.card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 0;
    /* Let children handle padding */
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.page-order-confirmation .card-block {
    padding: 30px;
}

/* Order Items Table */
.order-confirmation-table {
    padding: 0;
    margin-top: 20px;
}

.order-confirmation-table .order-line {
    padding: 15px 0;
    border-bottom: 1px solid #f6f6f6;
    display: flex;
    align-items: center;
}

.order-confirmation-table .order-line:last-child {
    border-bottom: none;
}

.order-confirmation-table .image img {
    border-radius: 6px;
    border: 1px solid #eee;
}

.order-confirmation-table .details {
    font-weight: 600;
    color: #333;
}

.order-confirmation-table .qty .row {
    display: flex;
    align-items: center;
}

/* Headings for Order Items */
#order-items h3.card-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    border-bottom: 2px solid #f6f6f6;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

/* Totals Table */
.order-confirmation-table table {
    width: 100%;
    margin-top: 20px;
    background: #fdfdfd;
    border-radius: 6px;
    padding: 20px;
}

.order-confirmation-table table tr td {
    padding: 8px 0;
    text-align: right;
}

.order-confirmation-table table tr td:first-child {
    text-align: left;
    color: #666;
}

.order-confirmation-table table tr.total-value td {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary-color);
    padding-top: 15px;
    border-top: 1px solid #eee;
}

/* Order Details List (Sidebar) */
#order-details {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #eee;
}

#order-details h3.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 10px;
}

#order-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#order-details ul li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #555;
}

/* ========================================================
   CUSTOM WISHLIST MODAL STYLING
   ======================================================== */

/* Since exact ID context is variable, we target the specific partial classes for this wishlist modal */

/* Modal Content Wrapper */
.wishlist-chooselist {
    padding: 0;
}

/* Modal Header styling via parent hook if possible or specific classes */
/* We target the generic modal content IF it contains our wishlist list, 
   but since CSS doesn't have parent selectors, we style the internal parts 
   and use a likely wrapper ID '#blockwishlist-add' or standard classes.
*/

/* Header - Targeting common Bootstrap modal header if inside our context scope */
#blockwishlist-add .modal-header,
.modal-dialog .modal-content:has(.wishlist-list) .modal-header {
    background-color: #315379;
    /* Theme Primary Blue */
    color: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#blockwishlist-add .modal-title,
.modal-dialog .modal-content:has(.wishlist-list) .modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    color: #fff;
    width: 100%;
}

/* Close button */
#blockwishlist-add .modal-header .close,
.modal-dialog .modal-content:has(.wishlist-list) .modal-header .close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 20px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
}

#blockwishlist-add .modal-header .close:hover,
.modal-dialog .modal-content:has(.wishlist-list) .modal-header .close:hover {
    opacity: 1;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

/* The List Itself */
.wishlist-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wishlist-list li {
    padding: 15px 20px;
    border-bottom: 1px solid #f6f6f6;
    cursor: pointer;
    font-size: 0.95rem;
    color: #555;
    display: flex;
    align-items: center;
    /* Vertically center everything */
    justify-content: flex-start;
    /* Start from left */
    transition: all 0.2s;
    position: relative;
    line-height: normal;
    /* Fix any line-height inheritance */
}

.wishlist-list li:last-child {
    border-bottom: none;
}

.wishlist-list li p,
.wishlist-list li span {
    margin: 0;
    padding: 0;
}

.wishlist-list li:hover {
    background-color: #f8fbff;
    color: #315379;
    padding-left: 25px;
    /* Slide content right */
}

/* Heart Icon (Left) */
.wishlist-list li::before {
    content: "favorite_border";
    font-family: 'Material Icons';
    margin-right: 15px;
    /* Spacing between heart and text */
    color: #dadada;
    font-size: 22px;
    line-height: 1;
    display: inline-block;
    transition: all 0.2s;
}

.wishlist-list li:hover::before {
    content: "favorite";
    color: #ff4c4c;
    /* Red/Orange heart */
    transform: scale(1.1);
}

/* Arrow Icon (Right) - using pseudo-element ::after */
.wishlist-list li::after {
    content: "chevron_right";
    font-family: 'Material Icons';
    margin-left: auto;
    /* Push to far right */
    font-size: 20px;
    color: #ccc;
    transition: all 0.2s;
}

.wishlist-list li:hover::after {
    color: #315379;
    transform: translateX(4px);
}


/* Create New List Button */
.wishlist-add-to-new {
    /* Pill Button Style */
    color: #F89422 !important;
    border: 2px solid #F89422;
    padding: 8px 20px;
    border-radius: 50px;
    /* Pill shape */

    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-decoration: none !important;

    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.wishlist-add-to-new:hover {
    background-color: #F89422;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(248, 148, 34, 0.3);
    transform: translateY(-1px);
}

.wishlist-add-to-new i {
    margin-right: 8px;
    font-size: 18px;
    color: inherit;
    /* Inherit from parent (orange then white) */
    transition: none;
}

/* Hover effect for the icon inside button */
.wishlist-add-to-new:hover i {
    color: #fff;
}

/* Modal Footer Styling */
.wishlist-chooselist+.modal-footer {
    padding: 20px 25px;
    background-color: #ffffff;
    /* Clean white */
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    /* Align right */
}

/* ========================================================
   WISHLIST VIEW PAGE - HIDE NAVIGATION
   ======================================================== */
.wishlist-pagination {
    display: none !important;
}

/* ========================================================
   PAGE MON COMPTE - NOUVEAU DESIGN (FROM RENOVBOAT PAUL)
   ======================================================== */

/* 1. Sidebar Menu (Colonne Gauche) */
.account-sidebar {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 30px;
}

.account-sidebar-header {
    background: #2c3e50;
    /* Bleu RenovBoat */
    color: #fff;
    padding: 15px 20px;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.account-sidebar-header i {
    margin-right: 10px;
    font-size: 20px;
    color: #f39c12;
    /* Orange */
}

.account-sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-sidebar-menu li {
    border-bottom: 1px solid #f0f0f0;
}

.account-sidebar-menu li:last-child {
    border-bottom: none;
}

.account-sidebar-menu li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #555;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.account-sidebar-menu li a i {
    margin-right: 12px;
    font-size: 18px;
    color: #999;
    min-width: 24px;
    text-align: center;
}

.account-sidebar-menu li a:hover,
.account-sidebar-menu li a.active {
    background: #f9f9f9;
    color: #2c3e50;
    font-weight: 600;
    border-left: 4px solid #f39c12;
    padding-left: 16px;
    /* Compensate border */
}

.account-sidebar-menu li a:hover i,
.account-sidebar-menu li a.active i {
    color: #f39c12;
}

.logout-link {
    color: #e74c3c !important;
}

.logout-link:hover {
    background: #fff5f5 !important;
    border-left-color: #e74c3c !important;
}

.logout-link i {
    color: #e74c3c !important;
}

/* 2. Dashboard Cards (Contenu Principal) */
.account-dashboard .links-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.account-card {
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    height: 100%;
    border: 1px solid #eee;
}

/* Pour transformer les liens simples en cards (hover effect sur le a parent) */
a[id$="-link"]:hover .account-card {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #f39c12;
}

.account-card .card-icon {
    background: #f4f6f8;
    color: #2c3e50;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
    transition: all 0.3s;
}

a[id$="-link"]:hover .account-card .card-icon {
    background: #f39c12;
    color: #fff;
}

.account-card .card-icon i {
    font-size: 24px;
}

.account-card .card-text h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    text-transform: none;
}

.account-card .card-text p {
    margin: 0;
    color: #777;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* 3. Hooks (Wishlist etc) Styles */
/* On essaie de styliser les éléments injectés par les modules comme des cards */
.account-dashboard .col-lg-4 .link-item {
    /* Si le module injecte juste un lien avec une classe link-item */
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    height: 100%;
    color: #555;
    font-weight: 600;
    transition: all 0.3s;
}

.account-dashboard .col-lg-4 .link-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #f39c12;
    color: #2c3e50;
}

.account-dashboard .col-lg-4 .link-item i {
    margin-right: 15px;
    font-size: 24px;
    color: #f39c12;
}


/* ===== CORRECTIF COULEUR EN-TÊTE MON COMPTE ===== */
.account-sidebar-header {
    background-color: #1B4965 !important;
    /* Même bleu que le header du site */
    color: #ffffff !important;
}

.account-sidebar-header span {
    color: #ffffff !important;
    /* Force le texte en blanc */
    font-weight: 700 !important;
}

.account-sidebar-header i {
    color: #f39c12 !important;
    /* On garde l'icône orange pour le style */
}

.col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 46.333% !important;
    max-width: 100% !important;
}

/* ========================================================
   HEADER MENU DESIGN (FROM RENOVBOAT PAUL)
   ======================================================== */

/* Menu Container */
.header-bottom {
    background-color: #f6f6f6;
    /* Light gray background */
    border-bottom: 1px solid #e1e1e1;
}

/* Top Level Menu */
.top-menu[data-depth="0"] {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    list-style: none;
    /* Remove bullet points */
}

.top-menu[data-depth="0"]>li {
    position: relative;
    border-right: 1px solid #eee;
}

.top-menu[data-depth="0"]>li>a {
    color: #2c3e50;
    /* Primary Color */
    font-weight: 600;
    text-transform: none;
    padding: 15px 25px;
    display: block;
    font-size: 1rem;
    transition: all 0.2s;
}

.top-menu[data-depth="0"]>li>a:hover {
    color: #f39c12;
    /* Secondary Color */
    background: #fff;
}

.top-menu[data-depth="0"]>li.current>a {
    color: #f39c12;
    /* Secondary Color */
}

/* Dropdown / Submenu Positioning & Style */
.popover.sub-menu {
    margin-top: 0 !important;
    /* Fix gap */
    display: none;
    /* Hidden by default */
    position: absolute;
    top: 100% !important;
    /* Position right below parent */
    left: 0;
    min-width: 250px !important;
    /* Width of dropdown */
    width: auto !important;
    /* Let content define width */
    background: #fff;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-top: 3px solid #f39c12;
    padding: 10px 0;
    text-align: left;
    border-radius: 0 0 4px 4px;
    white-space: nowrap;
}

/* Force show on hover with high priority */
.top-menu[data-depth="0"]>li:hover .popover.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Submenu Lists */
.top-menu[data-depth="1"] {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Submenu Links */
.top-menu[data-depth="1"]>li>a {
    display: block;
    padding: 10px 20px;
    color: #555;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px solid #f9f9f9;
    width: 100%;
    box-sizing: border-box;
}

.top-menu[data-depth="1"]>li>a:hover {
    color: #f39c12;
    background-color: #fcfcfc;
    padding-left: 25px;
    /* Little hover animation */
}

/* Mobile/Tablet Adjustments if needed can go here */
/* Ensure parent doesn't hide overflow */
.top-menu[data-depth="0"]>li {
    position: relative;
    z-index: auto;
}

/* Remove default bullets if any styles conflict */
.top-menu .sub-menu ul,
.top-menu .sub-menu li,
.popover ul,
.popover li {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* AmÃ©liorer la transition */
.popover.sub-menu {
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* ========================================================
   MENU HOVER & OVERFLOW FIXES
   ======================================================== */

/* Ensure dropdowns are not clipped by containers */
.header-bottom,
.menu,
.js-top-menu,
#_desktop_top_menu,
.top-menu {
    overflow: visible !important;
}

/* Reinforce Top Menu Link Hover State */
/* Triggers when hovering the Link OR the List Item (submenu active) */
.top-menu[data-depth="0"]>li:hover>a,
.top-menu[data-depth="0"]>li>a:hover {
    color: #f39c12 !important;
    /* Secondary Color */
    background-color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* Subtle lift effect */
}

/* Ensure Submenu is visible when Parent LI is hovered */
.top-menu[data-depth="0"]>li:hover .popover.sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 0 !important;
    top: 100% !important;
}

/* ========================================================
   GENERIC SUBMENU ITEM STYLING (ALL DEPTHS)
   ======================================================== */

/* Target all submenu links regardless of depth (1, 2, 3...) */
.popover.sub-menu a,
.popover.sub-menu li a,
.top-menu[data-depth="1"] li a,
.top-menu[data-depth="2"] li a {
    display: block !important;
    padding: 10px 20px !important;
    color: #555 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f9f9f9 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent;
    transition: all 0.2s ease;
}

/* Hover state for all submenu links */
.popover.sub-menu a:hover,
.popover.sub-menu li a:hover,
.top-menu[data-depth="1"] li a:hover,
.top-menu[data-depth="2"] li a:hover {
    color: #f39c12 !important;
    /* Orange */
    background-color: #fcfcfc !important;
    /* Very light grey */
    padding-left: 25px !important;
    /* Indent animation */
}

/* ===== CORRECTIF TITRE PRODUITS (Pas de ... mais tout le texte) ===== */
.product-title,
.product-title a,
h3.product-title,
h3.product-title a,
.product-miniature .product-title,
.product-miniature .product-title a {
    white-space: normal !important;
    /* Permet le retour à la ligne */
    overflow: visible !important;
    /* Affiche tout */
    text-overflow: clip !important;
    /* Pas de ... */
    height: auto !important;
    /* Hauteur s'adapte au texte */
    min-height: auto !important;
    display: block !important;
    /* Assure que ça prend la place nécessaire */
    -webkit-line-clamp: unset !important;
    /* Supprime la limite de lignes si présente */
    text-align: center;
    /* centré le texte */
}

/* ===== NORMALISATION DU TEXTE GDPR / CONFIDENTIALITÉ ===== */
/* Force le même style de police et taille que le texte au-dessus */
.custom-checkbox .psgdpr_consent_message,
.custom-checkbox label[for*="psgdpr"] span,
.custom-checkbox label span,
.form-group .psgdpr_consent_message,
label[for*="psgdpr"]+span,
label[for*="psgdpr"] span,
.gdpr-text,
.privacy-text {
    font-style: normal !important;
    /* Supprime l'italique */
    font-size: 14px !important;
    /* Même taille que le body */
    font-family: var(--font-family) !important;
    /* Même police */
    line-height: 1.5 !important;
    /* Espacement normal */
    font-weight: normal !important;
    /* Poids normal */
}

/* ========================================================
   CART PAGE - STICKY SUMMARY (RÉSUMÉ COLLANT)
   ======================================================== */

/* Ensure parent containers allow sticky positioning */
#wrapper,
#main,
section#main,
body#cart #wrapper,
body#cart #main,
body#checkout #main {
    position: relative !important;
    overflow: visible !important;
}

.cart-grid,
.cart-grid-right {
    position: relative !important;
    overflow: visible !important;
}

/* Cart Grid Layout - Force side by side display */
.cart-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
    align-items: flex-start !important;
}

/* Force columns to be side by side on desktop/tablet */
.cart-grid-body.col-lg-8 {
    flex: 1 1 60% !important;
    max-width: 60% !important;
    min-width: 0;
}

.cart-grid-right.col-lg-4 {
    flex: 0 0 35% !important;
    max-width: 35% !important;
    align-self: flex-start !important;
}

/* Cart Summary - Sticky Positioning (fallback, JavaScript will enhance) */
.cart-grid-right .cart-summary,
.cart-grid-right .card.cart-summary {
    position: sticky;
    top: 20px;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    z-index: 100;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    transition: all 0.3s ease;
}

/* Cart Container */
.cart-container,
.card.cart-container {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

/* Mobile: Disable sticky and stack vertically on small screens */
@media (max-width: 991px) {

    .cart-grid-body.col-lg-8,
    .cart-grid-right.col-lg-4 {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    .cart-grid-right .cart-summary,
    .cart-grid-right .card.cart-summary {
        position: relative !important;
        top: auto !important;
        max-height: none !important;
    }
}

.block-promo {
    margin-top: -40px;
}

.promo-code .btn {
    margin-top: 10px;
}

/* Hide promo code error by default */
.promo-code .alert.js-error {
    display: none;
}

/* Show error when it has content or active class */
.promo-code .alert.js-error:not(:empty),
.promo-code .alert.js-error.show {
    display: block;
}

/* ==========================================================================
   PREMIUM MOBILE CART STYLING - POLISHED V2
   Correction et embellissement de l'affichage mobile
   ========================================================================== */
@media (max-width: 767px) {

    /* 0. NEUTRALIZE INTERFERENCE */
    .product-line-grid.row::before,
    .product-line-grid.row::after {
        display: none !important;
        content: none !important;
    }

    /* 1. Main Container - Block Layout */
    .product-line-grid.row {
        display: block !important;
        /* Reset flex */
        margin-right: -10px !important;
        margin-left: -10px !important;
        padding: 15px 10px !important;
        background: #fff;
        border: 1px solid #f1f1f1;
        border-radius: 8px;
        margin-bottom: 15px !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
        font-size: 0;
        /* Kill whitespace between inline-blocks */
    }

    #content-hook_order_confirmation .material-icons.done {
        width: 72px;
    }

    /* 2. Left Column (Image) - Inline Block Middle */
    .product-line-grid-left {
        vertical-align: middle !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 10px !important;
        padding-left: 0 !important;
        margin-bottom: 0 !important;
        float: none !important;
        border: none !important;
    }

    .product-line-grid-left .product-image {
        display: block;
        border-radius: 6px;
        overflow: hidden;
        margin: 0 auto !important;
    }

    .product-line-grid-left img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
        display: block !important;
    }

    /* 3. Middle Column (Info) - Inline Block Middle */
    .product-line-grid-body {
        display: inline-block !important;
        vertical-align: middle !important;
        width: 70% !important;
        max-width: 70% !important;
        padding-left: 5px !important;
        padding-right: 0 !important;
        text-align: left !important;
        float: none !important;
        font-size: initial;
        /* Restore font size */
        position: relative;
    }

    /* Product Name */
    .product-line-grid-body a.label {
        font-size: 14px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        color: #333 !important;
        margin-bottom: 4px !important;
        display: block !important;
        text-transform: none !important;
        white-space: normal !important;
    }

    /* Product Attributes */
    .product-line-grid-body .product-line-info {
        margin-bottom: 2px !important;
        font-size: 12px !important;
        color: #777 !important;
    }

    .product-line-grid-body .product-line-info .label {
        font-weight: 600;
        margin-right: 3px;
    }

    /* Unit Price */
    .product-line-info .current-price .price {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #2fb5d2 !important;
    }

    /* 4. Right Column (Actions) - Toolbar Style */
    .product-line-grid-right {
        display: block !important;
        width: 100% !important;
        margin-top: 12px !important;
        padding-top: 10px !important;
        border-top: 1px solid #f6f6f6;
        float: none !important;
        font-size: initial;
        /* Restore font size */
    }

    /* Layout the Actions Row */
    .product-line-grid-right .row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Quantity Input Area */
    .product-line-grid-right .col-xs-6.qty {
        flex: 0 0 auto !important;
        width: auto !important;
        padding-left: 0 !important;
        float: none !important;
    }

    .bootstrap-touchspin input.form-control,
    input.js-cart-line-product-quantity {
        height: 38px !important;
        width: 50px !important;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #e1e1e1;
        background: #fdfdfd;
        font-weight: 600;
        color: #333;
    }

    /* Hide touchspin buttons if they look weird */
    .input-group-btn-vertical {
        display: none !important;
    }

    /* Total Price Area */
    .product-line-grid-right .col-xs-2.price {
        flex: 1 !important;
        text-align: center !important;
        font-size: 16px;
        font-weight: 800;
        color: #333;
        float: none !important;
    }

    .product-line-grid-right .product-price {
        display: block !important;
    }

    /* Trash Icon Area */
    .product-line-grid-right .col-xs-2.text-xs-right {
        flex: 0 0 auto !important;
        width: auto !important;
        padding-right: 0 !important;
        text-align: right !important;
        float: none !important;
    }

    .remove-from-cart {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: #fff1f0;
        border-radius: 50%;
        color: #e74c3c !important;
    }

    .remove-from-cart i {
        font-size: 18px !important;
    }
}

/* ========================================
   MODULE PS_CUSTOMTEXT - STYLING
   ======================================== */

/* Conteneur principal du module customtext */
#custom-text,
.custom-text-block,
.block-custom-text,
[id*="custom"] .rte-content,
.displayHome .custom-text {
    background: #fff;
    border-radius: 8px;
    padding: 40px 30px;
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

/* Effet de survol */
#custom-text:hover,
.custom-text-block:hover,
.block-custom-text:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Titre principal */
#custom-text h2,
#custom-text h3,
.custom-text-block h2,
.custom-text-block h3,
.block-custom-text h2,
.block-custom-text h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: none;
    position: relative;
    padding-bottom: 15px;
}

/* Barre décorative sous le titre */
#custom-text h2::after,
#custom-text h3::after,
.custom-text-block h2::after,
.custom-text-block h3::after,
.block-custom-text h2::after,
.block-custom-text h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Sous-titre */
#custom-text h4,
.custom-text-block h4,
.block-custom-text h4 {
    color: var(--secondary-color);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: none;
}

/* Paragraphes et description */
#custom-text p,
.custom-text-block p,
.block-custom-text p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Dernier paragraphe sans marge */
#custom-text p:last-child,
.custom-text-block p:last-child,
.block-custom-text p:last-child {
    margin-bottom: 0;
}

/* Liens dans le texte personnalisé */
#custom-text a,
.custom-text-block a,
.block-custom-text a {
    color: var(--secondary-color);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

#custom-text a:hover,
.custom-text-block a:hover,
.block-custom-text a:hover {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* Responsive - Mobile */
@media (max-width: 767px) {

    #custom-text,
    .custom-text-block,
    .block-custom-text {
        padding: 25px 20px;
        margin: 20px 0;
    }

    #custom-text h2,
    #custom-text h3,
    .custom-text-block h2,
    .custom-text-block h3,
    .block-custom-text h2,
    .block-custom-text h3 {
        font-size: 1.4rem;
    }

    #custom-text h4,
    .custom-text-block h4,
    .block-custom-text h4 {
        font-size: 1rem;
    }

    #custom-text p,
    .custom-text-block p,
    .block-custom-text p {
        font-size: 0.9rem;
    }
}

/* Responsive - Tablette */
@media (min-width: 768px) and (max-width: 991px) {

    #custom-text,
    .custom-text-block,
    .block-custom-text {
        padding: 35px 25px;
    }

    #custom-text h2,
    #custom-text h3,
    .custom-text-block h2,
    .custom-text-block h3,
    .block-custom-text h2,
    .block-custom-text h3 {
        font-size: 1.6rem;
    }
}

.mb-4 {
    margin-bottom: -0.5rem !important;
}

.rb-infoboxes-container {
    margin-top: 0 !important;
}

/* ========================================
   FORMULAIRE DE CONTACT - STYLING MODERNE
   ======================================== */

/* Section "Envoyer un message" */
#contact .page-content h3,
#contact #content h3 {
    color: var(--secondary-color);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* Description du formulaire */
#contact .page-content p,
#contact #content p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Labels des champs */
#contact .page-content label,
#contact #content label {
    color: #2c3e50;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 8px;
    display: block;
}

/* Champs de formulaire */
#contact .page-content input[type="text"],
#contact .page-content input[type="email"],
#contact .page-content input[type="file"],
#contact .page-content select,
#contact .page-content textarea,
#contact #content input[type="text"],
#contact #content input[type="email"],
#contact #content input[type="file"],
#contact #content select,
#contact #content textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #fafafa;
    color: #333;
}

#contact .page-content input[type="text"]:focus,
#contact .page-content input[type="email"]:focus,
#contact .page-content select:focus,
#contact .page-content textarea:focus,
#contact #content input[type="text"]:focus,
#contact #content input[type="email"]:focus,
#contact #content select:focus,
#contact #content textarea:focus {
    border-color: var(--secondary-color);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

/* Textarea */
#contact .page-content textarea,
#contact #content textarea {
    min-height: 150px;
    resize: vertical;
    font-family: inherit;
}

/* Bouton d'envoi */
#contact .page-content button[type="submit"],
#contact .page-content .btn-primary,
#contact #content button[type="submit"],
#contact #content .btn-primary {
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    color: #fff;
    border: none;
    padding: 14px 35px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#contact .page-content button[type="submit"]:hover,
#contact .page-content .btn-primary:hover,
#contact #content button[type="submit"]:hover,
#contact #content .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

#contact .page-content button[type="submit"]:active,
#contact .page-content .btn-primary:active,
#contact #content button[type="submit"]:active,
#contact #content .btn-primary:active {
    transform: translateY(0);
}

/* Groupes de champs */
#contact .page-content .form-group,
#contact #content .form-group {
    margin-bottom: 25px;
}

/* Sélecteur de fichier personnalisé */
#contact .page-content input[type="file"],
#contact #content input[type="file"] {
    padding: 10px;
    cursor: pointer;
}

#contact .page-content input[type="file"]::file-selector-button,
#contact #content input[type="file"]::file-selector-button {
    background: var(--secondary-color);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 10px;
    transition: all 0.3s ease;
}

#contact .page-content input[type="file"]::file-selector-button:hover,
#contact #content input[type="file"]::file-selector-button:hover {
    background: var(--accent-color);
}

/* Messages d'erreur */
#contact .page-content .alert-danger,
#contact .page-content .error,
#contact #content .alert-danger,
#contact #content .error {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef5350;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 20px;
}

/* Messages de succès */
#contact .page-content .alert-success,
#contact .page-content .success,
#contact #content .alert-success,
#contact #content .success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #66bb6a;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 20px;
}

/* Responsive - Tablette */
@media (max-width: 991px) {

    #contact .page-content h3,
    #contact #content h3 {
        font-size: 1.3rem;
    }

    .col-md-12 {
        margin: auto;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {

    /* 767px */
    #psgdpr-link {
        padding-left: 8px;
        padding-right: 8px;
    }

    .ps-social-follow {
        margin: auto;
    }

    .col-xs-4.text-sm-left.text-xs-left {
        margin: auto;
    }

    .col-xs-4.text-xs-right {
        margin-left: 10px;
    }

    .col-sm-5 {
        margin: auto;
    }

    #content.page-content> :last-child {
        margin-left: 20px;
    }

    #contact .page-content h3,
    #contact #content h3 {
        font-size: 1.2rem;
    }

    #contact .page-content button[type="submit"],
    #contact .page-content .btn-primary,
    #contact #content button[type="submit"],
    #contact #content .btn-primary {
        width: 100%;
        padding: 12px 25px;
        font-size: 1rem;
    }

    #contact .page-content input[type="text"],
    #contact .page-content input[type="email"],
    #contact .page-content select,
    #contact .page-content textarea,
    #contact #content input[type="text"],
    #contact #content input[type="email"],
    #contact #content select,
    #contact #content textarea {
        font-size: 0.95rem;
    }
}

#exportDataToPdf,
#exportDataToCsv {
    color: white !important;
}

.psgdprinfo17 {
    padding-bottom: 60px !important;
}

.promo-code form {
    margin-top: 20px;
}

.promo-code-button.display-promo {
    margin-top: 20px;
}

/* Mobile My Account Page Redesign - Premium Look */
@media (max-width: 991px) {
    #block_myaccount_infos .myaccount-title {
        display: none;
    }

    .footer-container .collapse {
        text-align: center;
    }

    .footer-container .h3 {
        font-size: 13px !important;
    }



    .cart-grid-right .cart-summary,
    .cart-grid-right .card.cart-summary {
        max-height: none !important;
        width: 100% !important;
        left: 0px !important;
    }

    .page-my-account .account-card {
        text-align: center;
        padding: 20px 10px;
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        /* Softer, deeper shadow */
        border-radius: 16px;
        /* More rounded */
        margin-bottom: 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.02);
        /* Very subtle border */
        position: relative;
        overflow: hidden;
    }

    .page-my-account .account-card:active {
        transform: scale(0.96);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
    }

    .page-my-account .account-card .card-icon {
        margin-bottom: 12px;
        color: #2fb5d2;
        background: linear-gradient(135deg, #f0fbff 0%, #ffffff 100%);
        /* Subtle gradient */
        width: 55px;
        height: 55px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(47, 181, 210, 0.12);
        /* Glow effect */
    }

    .page-my-account .account-card .card-icon i {
        font-size: 26px;
    }

    /* Force GDPR icon color to match theme */
    .page-my-account a[href*="psgdpr"] .account-card .card-icon i,
    .page-my-account a[href*="gdpr"] .account-card .card-icon i {
        color: #2fb5d2 !important;
    }

    .page-my-account .account-card h3 {
        font-size: 13px;
        font-weight: 600;
        /* Slightly lighter than bold */
        text-transform: none;
        /* Remove Uppercase */
        margin-bottom: 0;
        color: #2c3e50;
        letter-spacing: 0.3px;
        line-height: 1.3;
    }

    /* Capitalize first letter of each word for clean title look */
    .page-my-account .account-card h3::first-letter {
        text-transform: uppercase;
    }

    .page-my-account .account-card p {
        display: none;
    }

    .page-my-account .links-container .col-xs-6 {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 5px;
    }
}

/* Mobile Order Details Redesign */
@media (max-width: 991px) {
    .d-block.w-100 {
        margin: auto;
        width: 90% !important;
    }

    .img-fluid {
        max-width: 100%;
        height: auto;
    }

    .page-order-detail .box {
        background: #ffffff;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        border-radius: 12px;
        border: none;
        padding: 15px;
        margin-bottom: 20px;
    }

    /* Order Reference Box */
    .page-order-detail #order-infos .box {
        background: #f4fcfe;
        /* Light blue bg to stand out */
        border: 1px solid rgba(47, 181, 210, 0.1);
    }

    .page-order-detail #order-infos strong {
        font-weight: 600;
        color: #2c3e50;
    }

    /* Order History Timeline */
    .page-order-detail #order-history .history-lines .history-line {
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .page-order-detail #order-history .history-lines .history-line:last-child {
        border-bottom: none;
    }

    .page-order-detail #order-history .history-lines .history-line .date {
        font-size: 11px;
        color: #999;
        margin-bottom: 0;
    }

    .page-order-detail #order-history .history-lines .history-line .state {
        margin-bottom: 0;
    }

    .page-order-detail #order-history .label-pill {
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 4px;
    }

    /* Addresses */
    .page-order-detail #delivery-address,
    .page-order-detail #invoice-address {
        height: 100%;
    }

    .page-order-detail .addresses .col-sm-6 {
        margin-bottom: 15px;
    }

    .page-order-detail .addresses h4 {
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        color: #2fb5d2;
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
    }

    .page-order-detail address {
        font-size: 13px;
        line-height: 1.6;
        color: #555;
    }

    /* Products List */
    .page-order-detail .order-item {
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 12px;
        border: 1px solid #f9f9f9;
        display: flex;
        /* Ensure flex context */
        flex-direction: column;
    }

    .page-order-detail .order-item .desc {
        padding-bottom: 10px;
        border-bottom: 1px dashed #eee;
        margin-bottom: 10px;
    }

    .page-order-detail .order-item .name {
        font-weight: 600;
        color: #2c3e50;
        font-size: 13px;
        margin-bottom: 2px;
    }

    .page-order-detail .order-item .ref {
        font-size: 11px;
        color: #999;
    }

    .page-order-detail .order-item .qty {
        font-size: 13px;
        color: #666;
    }

    .page-order-detail .order-item .qty .row {
        display: flex;
        align-items: center;
    }

    /* Totals */
    .page-order-detail .order-totals .order-total {
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .page-order-detail .order-totals .order-total:last-child {
        border-bottom: none;
        padding-top: 15px;
        margin-top: 5px;
        border-top: 2px solid #eee;
        font-size: 16px;
        color: #2fb5d2;
        /* Highlight total amount */
    }
}

/* GDPR Personal Data Page Redesign */
.psgdprinfo17 {
    padding: 25px;
    margin-bottom: 20px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.01);
}

.psgdprinfo17 h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2fb5d2;
    /* Theme Blue */
    text-transform: uppercase;
    margin-bottom: 15px;
    display: inline-block;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 5px;
}

.psgdprinfo17 p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* GDPR Export Buttons & Footer Styling (Mobile & Tablet) */
@media (max-width: 991px) {
    .rb-infoboxes-container {
        display: none;
    }

    .carousel-control-next,
    .carousel-control-prev {
        display: none;
    }

    /* Footer Mobile/Tablet Redesign (2 Columns - Fixed) */
    .footer-container .container>.row {
        display: flex;
        flex-wrap: wrap;
    }

    /* Target all columns directly inside the footer row */
    .footer-container .container>.row>div[class*="col-"] {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        text-align: left !important;
        /* Force left align */
        padding: 0 10px;
        margin-bottom: 30px;
        min-height: 150px;
    }

    /* Exception: If there is a massive block like newsletter/copyright, keep full width if needed */
    .footer-container .block_newsletter,
    .footer-container .row>.col-md-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        /* Center full width blocks like copyright */
    }

    .footer-container .title,
    .footer-container h3,
    .footer-container h4 {
        display: block !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        margin-bottom: 15px !important;
        color: #2c3e50;
        cursor: default;
        text-align: left !important;
        border-bottom: 2px solid #2fb5d2;
        padding-bottom: 5px;
        display: inline-block !important;
        /* Underline only text width */
        width: 100% !important;
        position: relative;
    }

    /* Remove the default theme "orange bar" (often a pseudo element) */
    .footer-container .title::after,
    .footer-container h3::after,
    .footer-container h4::after,
    .footer-container .h3::after {
        content: none !important;
        display: none !important;
        border: none !important;
    }

    .footer-container .title .navbar-toggler,
    .footer-container .navbar-toggler {
        display: none !important;
    }

    .footer-container ul {
        display: block !important;
    }

    .footer-container li {
        margin-bottom: 8px;
        text-align: left !important;
    }

    .footer-container a {
        font-size: 13px;
        color: #666;
        text-decoration: none;
    }

    /* Contact block specific adjustments */
    .footer-container .block-contact {
        padding-left: 10px;
    }

    /* GDPR Buttons */
    #exportDataToCsv,
    #exportDataToPdf {
        width: 100%;
        margin-bottom: 15px;
        border-radius: 50px;
        background: linear-gradient(135deg, #2fb5d2 0%, #1b88a8 100%);
        border: none;
        padding: 12px 20px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 4px 15px rgba(47, 181, 210, 0.3);
        transition: all 0.3s ease;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white !important;
    }

    #exportDataToCsv:active,
    #exportDataToPdf:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(47, 181, 210, 0.2);
    }

    .col-xs-12.psgdprinfo17.data-access {
        padding-bottom: 20px !important;
        /* Reduced from 200px, 200px seems excessive unless user really wanted it */
    }
}

/* --- SOCIAL FOLLOW MODULE --- */
.block-social {
    background-color: #f7f7f7;
    /* Light gray background */
    padding: 30px 40px;
    margin-top: 20px;
    margin-bottom: 40px;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.block-social .social-title {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #315379;
    /* RenovBoat Blue */
}

.block-social .social-title i {
    font-size: 30px;
    margin-right: 15px;
    color: #F89422;
    /* RenovBoat Orange */
}

.block-social .social-links-wrapper {
    display: flex;
    justify-content: flex-end;
    /* Align right on desktop */
}

.block-social ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.block-social ul li {
    margin-left: 15px;
}

.block-social ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #fff;
    color: #315379;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.block-social ul li a:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    background-color: #315379;
    color: #fff;
}

/* Brand specific hover colors (optional, but nice) */
.block-social ul li.facebook a:hover {
    background-color: #3b5998;
    color: #fff;
}

.block-social ul li.twitter a:hover,
.block-social ul li.x a:hover {
    background-color: #000;
    color: #fff;
}

.block-social ul li.instagram a:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #fff;
}

.block-social ul li.linkedin a:hover {
    background-color: #0077b5;
    color: #fff;
}

.block-social ul li.youtube a:hover {
    background-color: #ff0000;
    color: #fff;
}

.block-social ul li.tiktok a:hover {
    background-color: #000000;
    color: #fff;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .block-social {
        padding: 30px 20px;
        text-align: center;
    }

    .block-social .social-title {
        justify-content: center;
        margin-bottom: 20px;
        font-size: 20px;
    }

    .block-social .social-links-wrapper {
        justify-content: center;
    }

    .block-social ul li {
        margin: 0 8px;
        /* Reduce horizontal margin, add centered alignment */
    }
}

/* Missing Bootstrap XL Grid Class */
@media (min-width: 1200px) {
    .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* ========================================
   PRODUCT BADGES (FLAGS) - SIZE REDUCTION
   ======================================== */
.product-flags .product-flag {
    font-size: 0.7rem !important;
    /* Reduced from default */
    padding: 3px 8px !important;
    /* Reduced padding */
    margin-bottom: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    min-height: unset !important;
    /* Reset any min-height */
    line-height: normal;
    text-transform: uppercase;
    font-weight: 700;
}

.product-flags {
    top: 10px !important;
    /* Adjust position if needed */
    left: 10px !important;
}

/* Custom Reassurance Block Styles */
#block-reassurance.custom-reassurance {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

#block-reassurance.custom-reassurance ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#block-reassurance.custom-reassurance li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
}

#block-reassurance.custom-reassurance li:last-child {
    margin-bottom: 0;
}

#block-reassurance.custom-reassurance .block-reassurance-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

#block-reassurance.custom-reassurance .material-icons {
    font-size: 24px;
    color: #2fb5d2;
    /* Theme primary color usually, adjust if needed */
}

#block-reassurance.custom-reassurance .reassurance-content {
    display: flex;
    flex-direction: column;
}

#block-reassurance.custom-reassurance .h6 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #232323;
}

#block-reassurance.custom-reassurance .reassurance-link {
    font-size: 0.8rem;
    color: #7a7a7a;
    text-decoration: none;
    transition: color 0.2s;
}

#block-reassurance.custom-reassurance .reassurance-link:hover {
    color: #2fb5d2;
    text-decoration: underline;
}

.commande {
    background: #fff !important;
}

/* ==========================================================================
   BLOCK REASSURANCE - CART SUMMARY
   ========================================================================== */
#block-reassurance {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #f0f0f0;
}

#block-reassurance ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#block-reassurance li {
    display: block;
}

#block-reassurance .block-reassurance-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#block-reassurance .block-reassurance-item:hover {
    background: #f9f9f9;
}

#block-reassurance .block-reassurance-item img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

#block-reassurance .block-reassurance-item span.h6 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color, #333);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    line-height: 1.4;
}

@media (max-width: 991px) {
    #block-reassurance .block-reassurance-item {
        padding: 5px;
    }
}

/* 
 * ==========================================
 * CHECKOUT STEP VISIBILITY FIX
 * ==========================================
 * Force hide content of non-current steps.
 */
body#checkout .checkout-step:not(.-current) .content {
    display: none !important;
}

/* Force "Continue" button visibility when step is current (Edit mode) */
body#checkout .checkout-step.-current .continue,
body#checkout .checkout-step.-current .form-footer {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 
 * ==========================================
 * PAYMENT CONDITIONS STYLING
 * ==========================================
 */
#conditions-to-approve ul {
    padding: 0;
    list-style: none;
}

#conditions-to-approve ul li {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    background: #f8f9fa;
    /* Light gray from theme */
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    margin-bottom: 15px;
    transition: all 0.2s ease;
}

#conditions-to-approve ul li:hover {
    border-color: #b0c4de;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#conditions-to-approve .custom-checkbox {
    margin-right: 15px;
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
}

#conditions-to-approve .condition-label {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #414141;
}

#conditions-to-approve .condition-label label {
    cursor: pointer;
}

#conditions-to-approve .condition-label a {
    color: #1B4965;
    /* Theme Primary */
    font-weight: 600;
    text-decoration: underline;
}

#conditions-to-approve .condition-label a:hover {
    color: #e67e22;
    /* Theme Accent */
    text-decoration: none;
}