/*
Theme Name: Letizia Lu
Theme URI: https://letizialu.it
Description: Tema della boutique Letizia Lu — Randazzo. Figlio di Twenty Twenty-Five.
Author: Letizia Lu
Template: twentytwentyfive
Version: 1.0
Text Domain: letizialu
*/

/* ---- Barra annuncio ---- */
.ll-annuncio {
    background: var(--wp--preset--color--carbone);
    color: var(--wp--preset--color--oro-chiaro);
    text-align: center;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: .6rem 1rem;
}

/* ---- Intestazione ---- */
.wp-site-blocks .wp-block-site-title a {
    font-family: var(--wp--preset--font-family--serif);
    font-style: italic;
    font-weight: 600;
    font-size: 2rem;
    text-decoration: none;
    color: var(--wp--preset--color--carbone);
}

.wp-block-navigation {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---- Titoli in stile boutique ---- */
h1, h2, h3, .wp-block-post-title, .woocommerce-loop-product__title, .product_title {
    font-family: var(--wp--preset--font-family--serif) !important;
    font-weight: 600;
    letter-spacing: -.01em;
}

h1, h2, .product_title {
    font-style: italic;
}

/* ---- Schede prodotto ---- */
ul.products li.product img {
    border-radius: 6px;
    transition: transform .5s ease;
}

ul.products li.product:hover img {
    transform: scale(1.03);
}

ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.15rem !important;
    padding-top: .6rem !important;
}

ul.products li.product .price {
    color: var(--wp--preset--color--carbone);
    font-size: .95rem;
}

ul.products li.product .price del {
    opacity: .45;
    margin-right: .35rem;
}

ul.products li.product .price ins {
    text-decoration: none;
    font-weight: 600;
}

/* ---- Pulsanti ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
    background: var(--wp--preset--color--carbone);
    color: var(--wp--preset--color--crema);
    border-radius: 4px;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    padding: .9rem 1.8rem;
    transition: background .3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.wp-block-button__link:hover {
    background: var(--wp--preset--color--oro-scuro);
    color: var(--wp--preset--color--crema);
}

.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
    background: var(--wp--preset--color--carbone);
}

/* ---- Etichetta saldo ---- */
.woocommerce span.onsale {
    background: var(--wp--preset--color--carbone);
    color: var(--wp--preset--color--oro-chiaro);
    border-radius: 999px;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    min-height: auto;
    min-width: auto;
    line-height: 1;
    padding: .5rem .9rem;
}

/* ---- Scheda prodotto singolo ---- */
.woocommerce div.product .price {
    color: var(--wp--preset--color--carbone);
    font-size: 1.6rem;
}

.woocommerce div.product form.cart .variations label {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
}

.woocommerce div.product form.cart .variations select {
    border: 1px solid var(--wp--preset--color--sabbia);
    border-radius: 4px;
    padding: .6rem;
    background: #fff;
}

/* ---- Riquadro promesse del negozio ---- */
.ll-promesse {
    background: color-mix(in srgb, var(--wp--preset--color--sabbia) 50%, transparent);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
    font-size: .9rem;
    line-height: 2;
}

.ll-promesse span {
    color: var(--wp--preset--color--oro-scuro);
    font-weight: 700;
    margin-right: .5rem;
}

/* ---- Bottone WhatsApp ---- */
.ll-whatsapp {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 999;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    transition: transform .25s ease;
}

.ll-whatsapp:hover {
    transform: scale(1.06);
}

.ll-whatsapp svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .ll-whatsapp,
    ul.products li.product img {
        transition: none;
    }
}