/*
Theme Name:   Storefront Diggers
Theme URI:    https://diggers.fr
Description:  Theme enfant Storefront pour Diggers.fr — Vinyl Shop Techno
Author:       Diggers Dev
Template:     storefront
Version:      1.0.0
*/

:root {
    --dg-corail: #DC7059;
    --dg-noir:   #0a0a0a;
    --dg-noir-2: #111111;
    --dg-noir-3: #1a1a1a;
    --dg-texte:  #e2e2e2;
}

/* BASE */
body { background-color: var(--dg-noir) !important; color: var(--dg-texte) !important; }
a { color: var(--dg-corail); }
a:hover { color: #fff; }
p, li, td, th { color: var(--dg-texte); }
h1,h2,h3,h4,h5,h6 { color: #fff; }

/* HEADER */
.site-header { background: var(--dg-noir-2) !important; border-bottom: 1px solid rgba(220,112,89,0.3) !important; }
.site-title a, .site-title a:visited { color: #fff !important; font-weight: 900 !important; text-decoration: none !important; }
.site-description { color: var(--dg-corail) !important; font-size: 11px !important; }

/* NAV */
.main-navigation ul li a { color: #fff !important; background: transparent !important; }
.main-navigation ul li a:hover { color: var(--dg-corail) !important; }
.main-navigation ul li.current-menu-item > a { color: var(--dg-corail) !important; }

/* CONTENU */
.site-main, .content-area, #main, #content,
.storefront-full-width-content .site-main,
.woocommerce-page { background: var(--dg-noir) !important; }
.site-content { padding: 0 !important; }

/* LARGEUR GLOBALE 1920px */
.col-full,
.storefront-full-width-content .col-full,
.site-content > .col-full {
    max-width: 1920px !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* LAYOUT — sidebar gauche, contenu droite, pleine largeur */
.site-content .col-full {
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 20px !important;
    align-items: flex-start !important;
    max-width: 1920px !important;
    width: 100% !important;
}
.content-area {
    flex: 1 !important;
    width: auto !important;
    float: none !important;
    min-width: 0 !important;
    max-width: none !important;
}
#primary {
    width: 100% !important;
    float: none !important;
}
.widget-area {
    width: 220px !important;
    min-width: 220px !important;
    flex-shrink: 0 !important;
    float: none !important;
}
.woocommerce-products-header,
.woocommerce-ordering,
.woocommerce-result-count {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    margin-bottom: 8px !important;
}
.woocommerce-ordering select { background: var(--dg-noir-2) !important; color: #fff !important; border-color: rgba(255,255,255,0.1) !important; }

/* Barre de tri — force hors grille */
.storefront-sorting,
.woocommerce-products-header {
    width: 100% !important;
    clear: both !important;
    display: block !important;
    float: none !important;
}
.storefront-sorting select, .woocommerce-ordering select {
    background: var(--dg-noir-2) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.woocommerce-result-count { color: rgba(255,255,255,0.4) !important; font-size: 11px !important; }

/* GRILLE BOUTIQUE — 8 colonnes */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 8px !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
/* Force le premier produit en colonne 1 */
.woocommerce ul.products li.product:first-child,
.woocommerce ul.products li.product.first {
    grid-column-start: 1 !important;
}
.woocommerce ul.products li.product,
.woocommerce ul.products li.first,
.woocommerce ul.products li.last,
.woocommerce-page ul.products li.product {
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    left: 0 !important;
    position: relative !important;
    background: var(--dg-noir-2) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
.woocommerce ul.products li.product:hover { transform: translateY(-2px); transition: transform 0.15s; }
.woocommerce ul.products li.product img { width: 100% !important; aspect-ratio: 1/1 !important; object-fit: cover !important; display: block !important; margin: 0 !important; }
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button { display: none !important; }

/* SIDEBAR dark */
.widget-area { background: var(--dg-noir-2) !important; padding: 16px !important; border-radius: 4px !important; }
.widget-title { color: #DC7059 !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid rgba(220,112,89,0.3) !important; padding-bottom: 8px !important; }
.widget { color: var(--dg-texte) !important; }
.widget a { color: var(--dg-texte) !important; }
.widget a:hover { color: #DC7059 !important; }

/* Écrase exactement la règle Storefront */
ul.products li.product,
ul.products .wc-block-grid__product,
.wc-block-grid__products li.product,
.wc-block-grid__products .wc-block-grid__product {
    text-align: left !important;
}

/* VIGNETTES — partie basse */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 12px !important; font-weight: 700 !important; color: #fff !important;
    padding: 6px 8px 2px !important; margin: 0 !important; line-height: 1.3 !important;
}
.woocommerce ul.products li.product .price { display: none !important; }
.dg-meta   { padding: 2px 8px 6px; display: flex; flex-direction: column; gap: 2px; }
.dg-artist { font-size: 11px; font-weight: 600; color: #fff; }
.dg-label  { font-size: 10px; color: #DC7059; }
.dg-genre  { font-size: 9px; color: rgba(255,255,255,0.35); font-style: italic; }
.dg-sku    { font-size: 9px; color: rgba(255,255,255,0.4); }
.dg-format { font-size: 9px; color: rgba(255,255,255,0.4); }

/* Barre bas */
.dg-actions {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px 7px; border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
}
.dg-btn-cart {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; background: rgba(255,255,255,0.08);
    border-radius: 4px; cursor: pointer; flex-shrink: 0;
    text-decoration: none !important; transition: background 0.15s;
}
.dg-btn-cart:hover { background: #DC7059; }
.dg-btn-cart svg { stroke: #fff; }
.dg-btn-waitlist {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; background: rgba(255,255,255,0.08);
    border-radius: 4px; cursor: pointer; flex-shrink: 0; transition: background 0.15s;
}
.dg-btn-waitlist:hover { background: rgba(220,112,89,0.3); }
.dg-btn-waitlist svg { stroke: rgba(255,255,255,0.6); }    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; background: rgba(255,255,255,0.08);
    border-radius: 4px; cursor: pointer; flex-shrink: 0; transition: background 0.15s;
}
.dg-btn-wish:hover { background: rgba(220,112,89,0.3); }
.dg-btn-wish svg { stroke: rgba(255,255,255,0.6); }
.dg-price { flex: 1; text-align: right; font-size: 11px; font-weight: 700; color: #DC7059; }
.dg-price .amount { color: #DC7059; }

/* Wrapper image — pour centrer le bouton ▶ */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
    display: block !important;
    position: relative !important;
}

/* Bouton ▶ — fixe, centré sur l'image */
.dg-play-btn {
    position: absolute !important;
    top: calc(var(--img-h, 50%) / 2) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 44px; height: 44px;
    background: rgba(0,0,0,0.55) !important;
    border: 2px solid rgba(255,255,255,0.8) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    z-index: 10 !important; padding: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
}
.woocommerce ul.products li.product:hover .dg-play-btn { opacity: 1 !important; }
.dg-play-btn.playing { opacity: 1 !important; background: rgba(220,112,89,0.85) !important; border-color: #DC7059 !important; }
.dg-play-btn svg { fill: #fff !important; margin-left: 3px; }
@media (max-width: 767px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}