/* Material Icons — Classic ne les charge pas */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/**
 * CUBX Theme v1.0.1 — CSS principal (child of Classic)
 *
 * PHILOSOPHIE : Ce CSS est un SKIN LÉGER par-dessus Classic.
 * On surcharge UNIQUEMENT les couleurs. Classic gère TOUTE la structure.
 * Aucun display:flex, aucun grid, aucun positionnement custom sur le header.
 *
 * @author  H2J Ecosystem <info@h2j.pro>
 * @version 1.0.1
 */

/* ═══════════════════════════════════════════════════
   1. VARIABLES CSS — Fallbacks neutres
   ═══════════════════════════════════════════════════ */
:root {
    --cubx-primary: #6366f1;
    --cubx-secondary: #8b5cf6;
    --cubx-accent: #f59e0b;
    --cubx-success: #10b981;
    --cubx-danger: #ef4444;
    --cubx-warning: #f59e0b;
    --cubx-info: #3b82f6;

    --cubx-bg: #ffffff;
    --cubx-bg-card: #ffffff;
    --cubx-text: #1e293b;
    --cubx-text-light: #64748b;
    --cubx-border: #e2e8f0;

    --cubx-link: #6366f1;
    --cubx-link-hover: #4f46e5;

    --cubx-btn-bg: #6366f1;
    --cubx-btn-text: #ffffff;
    --cubx-btn-hover: #4f46e5;

    --cubx-header-bg: #1a1f2c;
    --cubx-header-text: #ffffff;
    --cubx-footer-bg: #1a1f2c;
    --cubx-footer-text: #94a3b8;

    --cubx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cubx-radius: 8px;
    --cubx-sidebar-w: 280px;
    --cubx-sticky-z: 900;

    --cubx-overlay-color: transparent;
    --cubx-overlay-opacity: 0;
    --cubx-blend-mode: normal;
    --cubx-grayscale: 0%;
    --cubx-gallery-enabled: 0;

    --h2j-badge-new-color: #27ae60;
    --h2j-badge-promo-color: #e74c3c;
    --h2j-badge-bestseller-color: #f39c12;
    --h2j-badge-stock-color: #e67e22;
}


/* ═══════════════════════════════════════════════════
   2. TYPO & COULEURS GLOBALES
   ═══════════════════════════════════════════════════ */
body {
    font-family: var(--cubx-font);
    color: var(--cubx-text);
    background-color: var(--cubx-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

.btn-primary {
    background-color: var(--cubx-btn-bg);
    border-color: var(--cubx-btn-bg);
    color: var(--cubx-btn-text);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--cubx-btn-hover);
    border-color: var(--cubx-btn-hover);
}


/* ═══════════════════════════════════════════════════
   3. HEADER — Couleurs UNIQUEMENT
   On ne touche PAS à la structure Bootstrap de Classic.
   ═══════════════════════════════════════════════════ */
#header {
    background: var(--cubx-header-bg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Top bar (nav) — fond légèrement plus sombre */
.header-nav {
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tous les textes et liens du header en blanc */
#header,
#header a,
#header .top-menu a,
.header-nav,
.header-nav a,
.header-nav span,
.header-nav label,
#contact-link a,
.user-info a,
.user-info span,
.blockcart .header a {
    color: rgba(255, 255, 255, 0.85);
}
#header a:hover,
.header-nav a:hover,
#contact-link a:hover,
.user-info a:hover,
.blockcart .header a:hover {
    color: #ffffff;
}

/* Dropdowns langue/devise sur fond sombre */
.language-selector .dropdown-menu,
.currency-selector .dropdown-menu {
    background: var(--cubx-header-bg);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.language-selector .dropdown-menu a,
.currency-selector .dropdown-menu a {
    color: rgba(255, 255, 255, 0.85);
}
.language-selector .dropdown-menu a:hover,
.currency-selector .dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Select natifs (mobile) — fond sombre */
.header-nav select,
.language-selector select,
.currency-selector select {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Panier — badge count */
.blockcart .cart-products-count {
    background: var(--cubx-primary);
    color: #fff;
}

/* Header-top — fond transparent pour laisser voir le header-bg */
.header-top {
    background: transparent;
}

/* Barre de recherche */
#search_widget form {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--cubx-radius);
}
#search_widget form:focus-within {
    border-color: var(--cubx-primary);
    background: rgba(255, 255, 255, 0.12);
}
#search_widget input[type="text"] {
    background: transparent;
    color: var(--cubx-header-text);
}
#search_widget input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
#search_widget button {
    color: var(--cubx-header-text);
}

/* Menu — texte blanc sur fond sombre */
#_desktop_top_menu .top-menu > li > a {
    color: rgba(255, 255, 255, 0.85);
}
#_desktop_top_menu .top-menu > li > a:hover,
#_desktop_top_menu .top-menu > li.current > a {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Sous-menus */
#_desktop_top_menu .sub-menu {
    background: var(--cubx-header-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
#_desktop_top_menu .sub-menu a {
    color: rgba(255, 255, 255, 0.8);
}
#_desktop_top_menu .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Top menu — liens catégories en blanc */
.top-menu a,
.top-menu .sub-menu a {
    color: rgba(255, 255, 255, 0.85);
}
.top-menu a:hover {
    color: #ffffff;
}


/* ═══════════════════════════════════════════════════
   4. SIDEBAR — Couleurs uniquement
   ═══════════════════════════════════════════════════ */
#left-column {
    background: var(--cubx-header-bg);
}
#left-column,
#left-column a,
#left-column .block-categories .category-sub-menu a {
    color: rgba(255, 255, 255, 0.85);
}
#left-column a:hover {
    color: #ffffff;
}
/* Titres blocs sidebar */
#left-column .block-categories .h6,
#left-column h4 {
    color: #ffffff;
}
/* Masquer sidebar sur homepage */
body#index #left-column { display: none; }
body#index #content-wrapper { width: 100%; max-width: 100%; flex: 0 0 100%; }


/* ═══════════════════════════════════════════════════
   5. FOOTER
   ═══════════════════════════════════════════════════ */
#footer {
    background: var(--cubx-footer-bg);
    color: var(--cubx-footer-text);
}
#footer a { color: var(--cubx-footer-text); }
#footer a:hover { color: var(--cubx-primary); }
#footer h4, #footer .h4 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.block_newsletter input[type="email"] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--cubx-radius);
    color: #ffffff;
}
.block_newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}


/* ═══════════════════════════════════════════════════
   6. PRODUCT CARDS
   ═══════════════════════════════════════════════════ */
.product-miniature {
    border: 1px solid var(--cubx-border);
    border-radius: var(--cubx-radius);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    background: var(--cubx-bg-card);
}
.product-miniature:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.product-miniature .product-title a { color: var(--cubx-text); }
.product-miniature .product-title a:hover { color: var(--cubx-primary); }
.product-miniature .price { color: var(--cubx-primary); }
.product-miniature .regular-price {
    text-decoration: line-through;
    color: var(--cubx-text-light);
}

/* Badges produit */
.product-flag {
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
}
.product-flag.new { background: var(--h2j-badge-new-color); }
.product-flag.on-sale,
.product-flag.discount { background: var(--h2j-badge-promo-color); }


/* ═══════════════════════════════════════════════════
   7. BREADCRUMB
   ═══════════════════════════════════════════════════ */
.breadcrumb { background: transparent; }
.breadcrumb li, .breadcrumb a { color: var(--cubx-text-light); }
.breadcrumb a:hover { color: var(--cubx-primary); }


/* ═══════════════════════════════════════════════════
   8. PAGES SPÉCIFIQUES
   ═══════════════════════════════════════════════════ */
body#product .product-prices .current-price {
    color: var(--cubx-primary);
    font-weight: 700;
}
body#product .add-to-cart {
    background: var(--cubx-btn-bg);
    border-color: var(--cubx-btn-bg);
    border-radius: var(--cubx-radius);
}
body#product .add-to-cart:hover {
    background: var(--cubx-btn-hover);
    border-color: var(--cubx-btn-hover);
}


/* ═══════════════════════════════════════════════════
   9. STICKY ADD TO CART (futur — page produit)
   ═══════════════════════════════════════════════════ */
.cubx-sticky-atc {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: var(--cubx-sticky-z);
    background: #ffffff;
    border-top: 1px solid var(--cubx-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cubx-sticky-atc.cubx-visible { transform: translateY(0); }
.cubx-sticky-atc__btn {
    background: var(--cubx-btn-bg);
    color: var(--cubx-btn-text);
    border: none;
    border-radius: var(--cubx-radius);
    padding: 12px 24px;
    font-weight: 600;
    cursor: pointer;
}
.cubx-sticky-atc__btn:hover { background: var(--cubx-btn-hover); }


/* ═══════════════════════════════════════════════════
   10. SIDEBAR GALLERY & CATEGORY IMAGE (futur)
   ═══════════════════════════════════════════════════ */
.cubx-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
}
.cubx-gallery__item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
}
.cubx-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(var(--cubx-grayscale));
    transition: filter 0.3s ease;
}
.cubx-gallery__item:hover img { filter: grayscale(0%); }


/* ═══════════════════════════════════════════════════
   11. PREFERS REDUCED MOTION
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ═══════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 991px) {
    #left-column { display: none; }
    #content-wrapper { width: 100%; max-width: 100%; flex: 0 0 100%; }
}