/**
 * Design tweaks — Ink & Gold + trust signals + sticky CTA mobile.
 *
 * Palette "Ink & Gold" (révisable par master-eye via :root variables).
 * 3 alternatives possibles documentées dans CLAUDE.md handoff design.
 */

/* =========================================================
 * 1. Palette "Ink & Gold" — surcharge Astra global colors
 * ========================================================= */
:root {
    /* Couleur primaire = noir profond (texte + boutons primary) */
    --eyewearista-color-primary: #111111;
    --eyewearista-color-primary-rgb: 17, 17, 17;

    /* Accent or champagne (CTA, prix, highlights) */
    --eyewearista-color-accent: #B89C64;
    --eyewearista-color-accent-soft: #D4BC8A;

    /* Fonds */
    --eyewearista-color-bg: #FBFBF8;       /* ivoire ultra-clair */
    --eyewearista-color-surface: #FFFFFF;   /* cards / sections */

    /* Texte */
    --eyewearista-color-text: #1A1A1A;
    --eyewearista-color-text-soft: #555555;
    --eyewearista-color-text-muted: #888888;
    --eyewearista-color-border: #E8E4DC;

    /* Surcharge Astra global colors si le thème n'a pas été customisé */
    --ast-global-color-0: var(--eyewearista-color-primary);
    --ast-global-color-1: var(--eyewearista-color-accent);
}

/* =========================================================
 * 2. Hide "X in stock" + double H1
 * ========================================================= */

/* Backup CSS — le filter PHP devrait suffire mais on garde le filet */
.single-product .stock.in-stock {
    /* Le compteur "1 in stock" devient juste "In stock" via filter PHP.
       Si une variation theme l'override, on cache visuellement le chiffre. */
    color: #2c7a39;
    font-size: 0.85rem;
    font-weight: 500;
}
.single-product .stock.in-stock::before {
    content: "● ";
    color: #2c7a39;
}

/* H1 fix (couvert par PHP, mais filet CSS) */
.single-product .entry-header > .entry-title:not(.product_title) {
    display: none !important;
}

/* =========================================================
 * 3. Trust signals (sous le prix)
 * ========================================================= */
.eyewearista-trust {
    list-style: none;
    margin: 1.5em 0;
    padding: 1em 1.25em;
    background: var(--eyewearista-color-bg);
    border: 1px solid var(--eyewearista-color-border);
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6em 1.25em;
    font-size: 0.92rem;
}
.eyewearista-trust__item {
    display: flex;
    align-items: center;
    gap: 0.55em;
    color: var(--eyewearista-color-text-soft);
    line-height: 1.3;
}
.eyewearista-trust__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--eyewearista-color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
}

/* =========================================================
 * 4. Sticky add-to-cart mobile (bottom bar)
 * ========================================================= */
.eyewearista-sticky-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 998;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.75em 1em calc(0.75em + env(safe-area-inset-bottom, 0px));
    background: var(--eyewearista-color-surface);
    border-top: 1px solid var(--eyewearista-color-border);
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(110%);
    transition: transform 0.25s ease;
}
.eyewearista-sticky-cta.is-visible {
    transform: translateY(0);
}
.eyewearista-sticky-cta__price {
    font-weight: 700;
    color: var(--eyewearista-color-text);
    font-size: 1.05rem;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eyewearista-sticky-cta__price .woocommerce-Price-amount {
    color: var(--eyewearista-color-primary);
}
.eyewearista-sticky-cta__btn {
    flex: 0 0 auto;
    background: var(--eyewearista-color-primary) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 0.85em 1.5em !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    white-space: nowrap;
    text-decoration: none !important;
}
.eyewearista-sticky-cta__btn:hover {
    background: var(--eyewearista-color-accent) !important;
    color: var(--eyewearista-color-primary) !important;
}

/* Show on mobile only (< 768px) */
@media (max-width: 767px) {
    .single-product .eyewearista-sticky-cta {
        display: flex;
    }
}

/* =========================================================
 * 5. Accents Astra → palette luxe
 * ========================================================= */

/* Boutons principaux WC (Add to cart, Place order) */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.button[name="add-to-cart"],
.single_add_to_cart_button {
    background: var(--eyewearista-color-primary) !important;
    color: #fff !important;
    border-radius: 999px !important;
    border: 0 !important;
    padding: 0.85em 1.75em !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, transform 0.15s ease;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.single_add_to_cart_button:hover {
    background: var(--eyewearista-color-accent) !important;
    color: var(--eyewearista-color-primary) !important;
    transform: translateY(-1px);
}

/* Prix produit en accent or */
.woocommerce-Price-amount.amount,
.price .woocommerce-Price-amount {
    color: var(--eyewearista-color-primary);
    font-weight: 700;
    letter-spacing: 0.01em;
}
/* Prix soldé (ins) = primaire foncé + gras. L'ancien prix barré (del) suffit
 * à signaler la promo. L'or champagne (#B89C64) sur ivoire ne passe que ~2.3:1
 * → échec WCAG 4.5:1 (axe color-contrast sur /shop/). On garde un contraste
 * fort sur le prix actif (le seul que le client doit lire). */
.price ins .woocommerce-Price-amount {
    color: var(--eyewearista-color-primary);
}
.price ins {
    text-decoration: none;
}
/* Ancien prix barré : WooCommerce core applique `opacity: .5` au <del>, ce qui
 * fait chuter le contraste sous 4.5:1 même sur du texte foncé. On rétablit un
 * gris pleinement opaque qui passe WCAG AA (#595959 ≈ 6.5:1 sur ivoire). */
.woocommerce del,
.woocommerce del .woocommerce-Price-amount,
.price del .woocommerce-Price-amount {
    opacity: 1;
    color: #595959;
}

/* Liens accentués */
.entry-content a:not(.button):not(.wp-block-button__link) {
    color: var(--eyewearista-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.entry-content a:hover:not(.button):not(.wp-block-button__link) {
    color: var(--eyewearista-color-accent);
}

/* =========================================================
 * 6. Fluid typography (mobile = moins gros)
 * ========================================================= */
h1, .entry-title, .product_title {
    font-size: clamp(1.75rem, 3.5vw, 3.25rem) !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
h2 {
    font-size: clamp(1.5rem, 2.75vw, 2.5rem) !important;
    line-height: 1.2;
}

/* =========================================================
 * 7. Card produit hover (boutique)
 * ========================================================= */
.products .product {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.products .product:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.woocommerce ul.products li.product .price {
    color: var(--eyewearista-color-primary);
    font-weight: 700;
}

/* =========================================================
 * 8. Home — section "Every piece, authenticated" : stop image-bleed
 *    Le conteneur UAGB de cette section porte hero-02.png en
 *    background-image ; son unique enfant etant transparent, l'image
 *    floue transparait en lilas et casse la coherence (les sections
 *    About / Visit boutique ont, elles, un fond opaque).
 *    Fix : fond ivoire opaque, image neutralisee.
 *    NB : selecteur lie a l'ID de bloc genere par UAGB (propre a
 *    l'install staging) -- a revalider lors de la migration prod.
 * ========================================================= */
.uagb-block-1a890db6 {
    background-image: none !important;
    background-color: var(--eyewearista-color-bg, #FBFBF8) !important;
}
