/*
Theme Name:   Shoptimizer Child
Theme URI:    https://citadelgrill.com
Description:  Child theme de Shoptimizer pour Citadel Grill.
Author:       Citadel Grill
Author URI:   https://citadelgrill.com
Template:     shoptimizer
Version:      1.1.4
Text Domain:  shoptimizer-child
*/

/* === PDP — image height fix (clone Comptoir de la Beauté) === */
/* Limite la hauteur de l'image produit principale + centre */
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a,
.single-product .cgkit-pdp-gallery .swiper-slide,
.single-product .cgkit-pdp-gallery .swiper-slide a {
    text-align: center;
}

.single-product .woocommerce-product-gallery__image img,
.single-product .cgkit-pdp-gallery .swiper-slide img,
.single-product .product-images-wrapper img {
    max-height: 70vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

@media (max-width: 992px) {
    .single-product .woocommerce-product-gallery__image img,
    .single-product .cgkit-pdp-gallery .swiper-slide img {
        max-height: 60vh !important;
    }
}

/* ============================================================== */
/* HOMEPAGE — corrections mobile (< 640px)                        */
/* Cibles : sections "split image+texte" qui restent côte à côte  */
/* en mobile, et grilles qui clip leurs titres.                   */
/* ============================================================== */
@media (max-width: 639px) {

    /* --- ROOT CAUSE du débordement horizontal en mobile ---
       Le header desktop (logo + search bar + compte + favoris + cart)
       n'a pas de version mobile et force le body à ~741px de large.
       Conséquence : tout le layout est décalé vers la droite. */

    /* 1) Sécurité globale : aucun élément ne doit créer de scroll horizontal */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* 2) Header : on cache compte + favoris en mobile (ils sont dans le burger).
       Layout : MENU + LOGO + PANIER sur une ligne, barre de recherche en
       2e ligne full-width. */
    .main-header.col-full > .cg-header-compte,
    .main-header.col-full > .cg-header-favoris,
    body.sticky-d .main-header.col-full > .cg-header-compte,
    body.sticky-d .main-header.col-full > .cg-header-favoris,
    body.sticky-m .main-header.col-full > .cg-header-compte,
    body.sticky-m .main-header.col-full > .cg-header-favoris {
        display: none !important;
    }
    /* Override height fixe (70px) que Shoptimizer/Kirki impose en mobile.
       C'est ÇA qui empêchait le wrap d'élargir le header → la 2e ligne
       (cart, search) se rendait par-dessus le hero. */
    html body .site-header .main-header,
    html body .site-header .main-header.col-full,
    html body .site-header .site-branding,
    body.theme-shoptimizer .site-header .main-header,
    body.theme-shoptimizer .site-header .site-branding {
        height: auto !important;
        min-height: 0 !important;
    }
    /* Layout header en CSS Grid 3 colonnes (au lieu de flex+absolute trickery).
       Grid-template-areas permet d'aligner MENU à gauche, LOGO au centre, CART
       à droite, tous parfaitement centrés verticalement par align-items:center.
       La barre de recherche est en 2e ligne full-width via une 2e zone grid.

       `display: contents` sur .site-branding expose le burger + le logo
       directement à la grille parente, sans wrap intermédiaire qui casse l'align. */
    html body .site-header .main-header.col-full {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        grid-template-areas:
            "menu logo cart"
            "search search search" !important;
        align-items: center !important;
        justify-items: stretch !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        min-height: 60px !important;
    }
    /* Le wrapper .site-branding disparaît du layout : ses enfants (burger + logo)
       sont exposés directement à la grille parente. */
    html body .site-header .main-header.col-full > .site-branding {
        display: contents !important;
    }
    /* Burger MENU : zone "menu", aligné à gauche */
    html body .site-header .main-header.col-full > .site-branding > button.menu-toggle {
        grid-area: menu !important;
        justify-self: start !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 6px 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
        position: static !important;
    }
    /* Masquer le label "MENU" — les 3 traits suffisent (aria-label="Menu"
       reste pour l'accessibilité). */
    html body .site-header .main-header.col-full > .site-branding > button.menu-toggle > .bar-text {
        display: none !important;
    }
    /* Logo : zone "logo", centré horizontalement et verticalement */
    html body .site-header .main-header.col-full > .site-branding > .custom-logo-link,
    body.theme-shoptimizer .site-header .main-header.col-full .custom-logo-link,
    body.wp-custom-logo .site-header .main-header.col-full .custom-logo-link {
        grid-area: logo !important;
        justify-self: center !important;
        align-self: center !important;
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        display: inline-block !important;
        line-height: 0 !important;
    }
    html body .site-header .main-header.col-full > .site-branding .custom-logo-link img,
    body.theme-shoptimizer .site-header .custom-logo-link img,
    body.wp-custom-logo .site-header .custom-logo-link img {
        height: 38px !important;
        max-width: 160px !important;
        width: auto !important;
        margin: 0 !important;
        display: block !important;
    }
    /* Cart : zone "cart", aligné à droite, centré verticalement.
       Specificité boostée pour gagner sur l'override Shoptimizer mobile qui met
       position:absolute top:21px right:15px sur .site-header-cart à <=992px. */
    html body.theme-shoptimizer .site-header .main-header.col-full > .site-header-cart,
    html body .site-header .main-header.col-full > .site-header-cart,
    html body.sticky-d .site-header .main-header.col-full > .site-header-cart,
    html body.sticky-m .site-header .main-header.col-full > .site-header-cart {
        grid-area: cart !important;
        justify-self: end !important;
        align-self: center !important;
        position: static !important;
        right: auto !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        height: auto !important;
        line-height: 1 !important;
        transform: none !important;
        z-index: 2 !important;
    }
    /* En mobile : on convertit le pill "Panier 0" en une simple icône
       panier en haut à droite (pattern e-commerce mobile standard). */
    html body .main-header .shoptimizer-cart a.cart-contents {
        background: transparent !important;
        padding: 6px !important;
        border-radius: 8px !important;
        gap: 2px !important;
        color: var(--cg-charcoal, #1A1A1A) !important;
    }
    /* Supprime le mot "Panier" injecté en ::before */
    html body .main-header .shoptimizer-cart a.cart-contents .shoptimizer-cart-icon::before {
        content: none !important;
        display: none !important;
    }
    /* Icône SVG plus visible (charcoal au lieu de blanc) */
    html body .main-header .shoptimizer-cart a.cart-contents .shoptimizer-cart-icon svg {
        width: 26px !important;
        height: 26px !important;
        stroke: var(--cg-charcoal, #1A1A1A) !important;
        color: var(--cg-charcoal, #1A1A1A) !important;
    }
    html body .main-header .shoptimizer-cart a.cart-contents .shoptimizer-cart-icon svg path {
        stroke: var(--cg-charcoal, #1A1A1A) !important;
    }
    /* Petit badge corten avec le nombre, collé en haut-droite de l'icône */
    html body .main-header .shoptimizer-cart a.cart-contents .shoptimizer-cart-icon {
        position: relative !important;
    }
    html body .main-header .shoptimizer-cart a.cart-contents .shoptimizer-cart-icon .mini-count {
        position: absolute !important;
        top: -6px !important;
        right: -8px !important;
        background: var(--cg-corten, #B7541C) !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 99 !important;
        margin: 0 !important;
    }
    /* Hover en corten léger */
    html body .main-header .shoptimizer-cart a.cart-contents:hover {
        background: rgba(183, 84, 28, 0.08) !important;
    }
    /* Barre de recherche : 2e ligne grid, full-width */
    html body .site-header .main-header.col-full > .site-search {
        grid-area: search !important;
        max-width: 100% !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* --- HERO "Vos soirées au coin du feu" ---
       Tailwind text-6xl ne se compile pas toujours via CDN à temps en mobile,
       résultat la h2 retombe à 22px. On force une taille lisible (40px) et on
       ancre le titre vers le bas du hero pour qu'il soit "plus bas" comme
       demandé. bottom:X (depuis le bas du container) est plus stable que top
       car la hauteur du hero peut varier selon la taille d'écran. */
    body.home .citadel-home section .relative.h-full h2.font-serif,
    body.home .citadel-home section h2.font-serif.text-6xl,
    body.home .citadel-home section h2.font-serif.absolute {
        font-size: 2.5rem !important;       /* 40px au lieu de 22px */
        line-height: 1.05 !important;
        top: auto !important;
        bottom: 90px !important;            /* 90px depuis le bas du hero */
        max-width: 80% !important;
    }

    /* 3) Mini-cart drawer : forcer position:fixed translaté off-screen
       au lieu de l'autoriser à étendre le body. */
    #shoptimizerCartDrawer,
    .shoptimizer-mini-cart-wrap {
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        max-width: 100vw !important;
        transform: translateX(100%);
    }
    #shoptimizerCartDrawer.is-open,
    .shoptimizer-mini-cart-wrap.is-open {
        transform: translateX(0);
    }

    /* --- Section 6 : cards "Grands formats" / "Mosaïque céramique" ---
       Layout flex items-stretch (texte | image w-2/5) → stack vertical.
       L'image passe en bandeau au-dessus, le texte en dessous. */
    body.home .citadel-home .card-tile.flex {
        flex-direction: column !important;
    }
    body.home .citadel-home .card-tile.flex > .flex-1 {
        order: 2;
    }
    body.home .citadel-home .card-tile.flex > img.w-2\/5 {
        width: 100% !important;
        height: 160px !important;
        border-radius: 0 !important;
        order: 1;
        object-position: center;
    }

    /* --- Sections 6B + 11 : grands bandeaux "L'ACIER NOIR" + "PRÉPAREZ VOS SOIRÉES"
       Stack vertical : image full-width au-dessus, texte dessous. Le produit
       est complètement visible (pas masqué par un dégradé blanc). */
    body.home .citadel-home a.block.rounded-lg.overflow-hidden.relative[style*="height: 200px"] {
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    body.home .citadel-home a.block.rounded-lg.overflow-hidden.relative[style*="height: 200px"] > img.absolute.right-0 {
        position: relative !important;
        width: 100% !important;
        height: 180px !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        inset: auto !important;
        object-fit: cover !important;
        object-position: center;
        order: 1 !important;
    }
    body.home .citadel-home a.block.rounded-lg.overflow-hidden.relative[style*="height: 200px"] > div.relative {
        background: transparent !important;
        padding: 16px 20px 20px !important;
        height: auto !important;
        order: 2 !important;
        display: block !important;
    }
    body.home .citadel-home a.block.rounded-lg.overflow-hidden.relative[style*="height: 200px"] h2 {
        font-size: 1.375rem !important;
        line-height: 1.15 !important;
        margin-bottom: 6px !important;
    }
    body.home .citadel-home a.block.rounded-lg.overflow-hidden.relative[style*="height: 200px"] p {
        font-size: 0.8125rem !important;
        margin-bottom: 12px !important;
    }

    /* --- Section 10 : "Tendances de saison" — titres clippés par
       overflow-hidden. On réduit légèrement la typo pour qu'elle
       tienne dans la card (mobile 2-col ≈ 170px de large). */
    body.home .citadel-home .card-tile h3.font-serif.text-base {
        font-size: 0.875rem !important;
        line-height: 1.15 !important;
    }
    body.home .citadel-home .card-tile p.text-xs {
        font-size: 0.6875rem !important;
        line-height: 1.25 !important;
    }
    /* Et on permet le wrap propre des titres dans toutes les card-tiles */
    body.home .citadel-home .card-tile h3 {
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* --- Section 7 : "Pensez à offrir" — réduire l'image w-32 qui
       prend trop de place dans une cellule mobile de ~170px. */
    body.home .citadel-home .gift-card img.w-32 {
        width: 6rem !important; /* 96px au lieu de 128px */
    }
    body.home .citadel-home .gift-card h3 {
        font-size: 0.875rem !important;
        line-height: 1.2 !important;
    }
}

/* ============================================================
   Notice "ajouté au panier" — alignement charte Citadel Grill
   ------------------------------------------------------------
   Shoptimizer hardcode #3bb54a (vert) sur .woocommerce-message
   dans son main.min.css. On remplace par le corten de marque.
   ============================================================ */
.woocommerce-message {
    background-color: var(--cg-corten, #B7541C) !important;
}

/* Lien inline "Voir le panier" dans le texte — doublon avec .buttons-wrapper, on le cache */
.woocommerce-message .message-content a.button.wc-forward {
    display: none !important;
}

/* Les 2 boutons de la notice (Voir le panier + Commander) — base partagée */
.woocommerce-message .buttons-wrapper a.button.cart,
.woocommerce-message .buttons-wrapper a.button.checkout {
    border-radius: 4px !important;
    padding: 0.55em 1.25em !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.1px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    text-transform: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}

/* "Voir le panier" — secondaire : ghost transparent + bordure blanche */
.woocommerce-message .buttons-wrapper a.button.cart {
    background-color: transparent !important;
    border: 1.5px solid #fff !important;
    color: #fff !important;
}

.woocommerce-message .buttons-wrapper a.button.cart:hover,
.woocommerce-message .buttons-wrapper a.button.cart:focus {
    background-color: #fff !important;
    color: var(--cg-charcoal, #1A1A1A) !important;
    border-color: #fff !important;
}

/* "Commander" — primaire : fond blanc + texte charcoal pour pousser la conversion */
.woocommerce-message .buttons-wrapper a.button.checkout {
    background-color: #fff !important;
    border: 1.5px solid #fff !important;
    color: var(--cg-charcoal, #1A1A1A) !important;
}

.woocommerce-message .buttons-wrapper a.button.checkout:hover,
.woocommerce-message .buttons-wrapper a.button.checkout:focus {
    background-color: var(--cg-charcoal, #1A1A1A) !important;
    border-color: var(--cg-charcoal, #1A1A1A) !important;
    color: #fff !important;
}

/* Force aussi sur les <span> internes (Shoptimizer wrappe le label) */
.woocommerce-message .buttons-wrapper a.button.cart span,
.woocommerce-message .buttons-wrapper a.button.checkout span {
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
}

/* Icône flèche ::after de "Commander" : Shoptimizer la dessine en blanc
   masqué — sur fond blanc elle disparaît, on la repasse en charcoal. */
.woocommerce-message .buttons-wrapper a.button.checkout::after {
    background: var(--cg-charcoal, #1A1A1A) !important;
    top: 2px !important;
}
.woocommerce-message .buttons-wrapper a.button.checkout:hover::after {
    background: #fff !important;
}

/* ============================================================
   Sous-menu nav — typo Fraunces (éditorial / premium)
   ------------------------------------------------------------
   Par défaut Shoptimizer hérite d'Inter sur les sub-menu links.
   On passe à Fraunces pour donner un feel curated qui matche
   le wordmark logo + l'esprit boutique premium.
   ============================================================ */
.main-navigation .sub-menu-wrapper .sub-menu a.cg-menu-link,
.main-navigation .sub-menu-wrapper .sub-menu a.sub-menu-link,
.main-navigation .sub-menu-wrapper .sub-menu .menu-item > a span {
    font-family: 'Fraunces', 'Times New Roman', serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
}


/* ============================================================
   Pages catégorie produit — masquer titre + description
   ------------------------------------------------------------
   Yanis veut un layout épuré : pas de H1 visible, pas de bandeau
   beige avec la description. H1 conservé dans le DOM (clip:rect)
   pour le SEO/accessibilité.
   ============================================================ */
.tax-product_cat .woocommerce-products-header__title.page-title,
.post-type-archive-product .woocommerce-products-header__title.page-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.tax-product_cat header.woocommerce-products-header,
.post-type-archive-product header.woocommerce-products-header,
.tax-product_cat .shoptimizer-category-banner {
    display: none !important;
}

/* ============================================================
   Fiche produit variable — <select> attributs (taille, couleur)
   ------------------------------------------------------------
   Shoptimizer fixe height:40px + padding 12px + border 1px + font-size:14px
   + overflow:hidden sur les <select> via la règle :
       body.single-product .variations select { ... !important }
   En box-sizing border-box ça coupe les descendants (p, g, j, q, y).

   Spécificité à battre : body(1) + .single-product(1) + .variations(1)
   + select(1) = (0,2,2). On préfixe par html.body.single-product +
   form.variations_form pour passer à (0,4,3) et gagner la cascade.
   ============================================================ */
html body.single-product form.variations_form table.variations select,
html body.single-product form.variations_form select,
html body.single-product .cgkit-product-attributes select,
html body.single-product form.cart select {
    height: auto !important;
    min-height: 48px !important;
    line-height: 1.6 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* ============================================================
   Pagination — fix : page active = fond brun + texte BLANC
   Sans cet override, Shoptimizer met le texte de la même couleur
   que le fond (#dc9814) → chiffre invisible.
   ============================================================ */
.woocommerce-pagination .page-numbers li .page-numbers.current,
.woocommerce-pagination .page-numbers.current,
ul.page-numbers li .page-numbers.current,
ul.page-numbers .page-numbers.current {
    color: #fff !important;
}