/* ============================================================
   NOTIFICHE WooCommerce — Hornoi Core

   Copre le due famiglie di avvisi che WooCommerce può stampare:

   1) Notice "classiche" (shop, scheda prodotto, account, mini-cart AJAX):
      .woocommerce-message / .woocommerce-error / .woocommerce-info,
      emesse da woocommerce_output_all_notices dentro
      .woocommerce-notices-wrapper (o, sulla scheda prodotto, dentro
      .product-single__notices).
   2) Notice dei blocchi Gutenberg (carrello e checkout):
      .wc-block-components-notice-banner.is-success|is-error|is-info|is-warning.

   Il linguaggio visivo è quello del resto del sito: card bianca appena
   tinta, raggio 14px, ombra morbida (come --cart-shadow), barra d'accento a
   sinistra, icona in SVG inline e bottone nero maiuscolo come nel minicart.

   Nota sui selettori: le regole dei blocchi partono sempre dalla coppia
   classe base + modificatore (.wc-block-components-notice-banner.is-error →
   specificità 0,2,0) perché il bundle di WooCommerce Blocks può essere
   stampato DOPO questo foglio; con la sola classe base vincerebbe lui.
   Sulle notice classiche basta l'ordine di caricamento (enqueue a priorità
   20, dopo woocommerce-general).
   ============================================================ */

/* I toni sono quelli dell'Accademia tenuti bassi: non il verde semaforo, il
   rosso allarme e l'arancio del negozio, che su pagine di crema e inchiostro
   urlavano da soli. E non il nero pieno al loro posto — un avviso non è un
   titolo: deve farsi leggere, non prendersi la pagina. Restano tre colori
   distinguibili a colpo d'occhio, ma spenti, e il testo è il bruno scuro del
   sito invece del nero. */
:root {
    --notice-radius: 14px;
    --notice-shadow: 0 6px 20px rgba(14, 14, 14, .05);
    --notice-ink:     #33302b;   /* = --mca-body-dark */
    --notice-success: #6f8f74;   /* salvia */
    --notice-error:   #a86458;   /* terracotta */
    --notice-info:    #8a8580;   /* = --mca-muted */
}

/* Il wrapper resta nel DOM anche senza avvisi: senza questo lascerebbe un
   margine fantasma sopra la griglia prodotti. */
.woocommerce-notices-wrapper:empty,
.product-single__notices:empty {
    display: none;
}

/* ============================================================
   CARD — base condivisa
   ============================================================ */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 18px;
    padding: 15px 20px 15px 56px;
    list-style: none;
    border: 1px solid color-mix(in srgb, var(--notice-accent) 26%, #fff);
    border-left: 3px solid var(--notice-accent);
    border-radius: var(--notice-radius);
    background: color-mix(in srgb, var(--notice-accent) 7%, #fdfcfb);
    box-shadow: var(--notice-shadow);
    color: var(--notice-ink);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    animation: hornoi-notice-in .35s cubic-bezier(.22, .61, .36, 1) both;
}

/* Icona: pastiglia SVG colorata con l'accento della notice. `mask` invece di
   `background-image` così un solo file serve tutte e tre le varianti. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before,
.wc-block-components-notice-banner.is-success::before,
.wc-block-components-notice-banner.is-error::before,
.wc-block-components-notice-banner.is-info::before,
.wc-block-components-notice-banner.is-warning::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 18px;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    background: var(--notice-accent);
    -webkit-mask: var(--notice-icon) no-repeat center / 22px 22px;
    mask: var(--notice-icon) no-repeat center / 22px 22px;
}

/* WooCommerce porta il fuoco sulla notice appena compare, perché chi naviga
   con la tastiera o con uno screen reader se la trovi subito: giusto, ma il
   contorno di serie del browser è un anello blu che sulla pagina non c'entra
   niente. Qui diventa un alone dello stesso colore dell'avviso — resta ben
   visibile, senza portarsi dietro un colore che il sito non usa. */
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-info:focus,
.woocommerce-message:focus-visible,
.woocommerce-error:focus-visible,
.woocommerce-info:focus-visible {
    outline: none;
    box-shadow: var(--notice-shadow), 0 0 0 3px color-mix(in srgb, var(--notice-accent) 26%, transparent);
}

/* L'ultima notice del gruppo non deve staccare dal contenuto che segue. */
.woocommerce-notices-wrapper > :last-child,
.product-single__notices > :last-child {
    margin-bottom: 24px;
}

/* ============================================================
   VARIANTI
   ============================================================ */

/* Successo — spunta */
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
    --notice-accent: var(--notice-success);
    --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.6 2.6L16 9.6'/%3E%3C/svg%3E");
}

/* Errore — punto esclamativo */
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
    --notice-accent: var(--notice-error);
    --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4h.01'/%3E%3C/svg%3E");
}

/* Info e avviso — "i" (l'arancio è lo stesso accento della scheda prodotto) */
.woocommerce-info,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
    --notice-accent: var(--notice-info);
    --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.2v5.3'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E");
}

/* ============================================================
   CONTENUTO
   ============================================================ */

/* .woocommerce-error è una <ul>: gli <li> tornano righe semplici e, se sono
   più d'uno, si impilano occupando tutta la card. */
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
    flex: 1 1 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-message a:not(.button),
.woocommerce-error a:not(.button),
.woocommerce-info a:not(.button),
.wc-block-components-notice-banner a {
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wc-block-components-notice-banner__content {
    flex: 1 1 auto;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary {
    margin-bottom: 4px;
    font-weight: 700;
}

/* L'icona nativa del banner a blocchi è sostituita dalla nostra pastiglia.
   Solo figlia diretta: la <svg> del pulsante di chiusura resta al suo posto. */
.wc-block-components-notice-banner > svg {
    display: none;
}

/* ============================================================
   BOTTONE ("Visualizza carrello", "Torna al negozio", …)

   Nel markup di Woo il bottone PRECEDE il testo: `order` lo rimanda in coda
   e `margin-left:auto` lo spinge a destra. Woo lo fa flottare: qui il float
   va azzerato o esce dal flusso flex.
   ============================================================ */

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
    order: 9;
    float: none;
    margin: 0 0 0 auto;
    padding: 10px 20px;
    /* Contorno invece del nero pieno: dentro un avviso il bottone è un
       «se vuoi», non la chiamata all'azione della pagina — e un pieno nero qui
       peserebbe più del messaggio. */
    border: 1px solid color-mix(in srgb, var(--notice-ink) 28%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--notice-ink);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
    background: color-mix(in srgb, var(--notice-ink) 6%, transparent);
    border-color: color-mix(in srgb, var(--notice-ink) 55%, transparent);
    color: var(--notice-ink);
}

/* ============================================================
   CHIUSURA (solo notice a blocchi)
   ============================================================ */

.wc-block-components-notice-banner__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: color-mix(in srgb, var(--notice-ink) 55%, transparent);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.wc-block-components-notice-banner__dismiss:hover {
    background: color-mix(in srgb, var(--notice-accent) 14%, transparent);
    color: var(--notice-ink);
}

/* ============================================================
   AVVISO DEL NEGOZIO (demo store notice)
   Di serie è una barra fucsia: qui diventa la barra nera del tema.
   ============================================================ */

.woocommerce-store-notice,
p.demo_store {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px 20px;
    background: var(--primary-color, #000);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
}

.woocommerce-store-notice a,
p.demo_store a {
    color: #fff;
    text-underline-offset: 3px;
}

/* ============================================================
   INGRESSO
   ============================================================ */

@keyframes hornoi-notice-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .wc-block-components-notice-banner.is-success,
    .wc-block-components-notice-banner.is-error,
    .wc-block-components-notice-banner.is-info,
    .wc-block-components-notice-banner.is-warning {
        animation: none;
    }

}

/* ============================================================
   MOBILE — il bottone va a capo a tutta larghezza
   ============================================================ */

@media (max-width: 575px) {
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .wc-block-components-notice-banner.is-success,
    .wc-block-components-notice-banner.is-error,
    .wc-block-components-notice-banner.is-info,
    .wc-block-components-notice-banner.is-warning {
        padding: 14px 16px 14px 50px;
        font-size: 14px;
    }

    .woocommerce-message::before,
    .woocommerce-error::before,
    .woocommerce-info::before,
    .wc-block-components-notice-banner.is-success::before,
    .wc-block-components-notice-banner.is-error::before,
    .wc-block-components-notice-banner.is-info::before,
    .wc-block-components-notice-banner.is-warning::before {
        left: 15px;
        width: 20px;
        height: 20px;
        -webkit-mask-size: 20px 20px;
        mask-size: 20px 20px;
    }

    .woocommerce-message .button,
    .woocommerce-error .button,
    .woocommerce-info .button {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
}