/*
 Theme Name:  Woodmart Xmas Child
 Theme URI:   https://www.igiardinidimercurio.it
 Description: Tema child natalizio di Woodmart per I Giardini di Mercurio
 Author:      LeoneMedia / Francesco
 Author URI:  https://www.leonemedia.it
 Template:    woodmart
 Version:     1.0
*/

/*************************************************
 * NATALE – SKIN I GIARDINI DI MERCURIO
 * Tema child dedicato (sempre attivo quando il tema è attivo)
 *************************************************/

/* Palette natalizia globale */
:root {
    --xmas-green: #0d3d2c;      /* verde abete */
    --xmas-green-light: #145c43;
    --xmas-red: #b8132b;        /* rosso elegante */
    --xmas-gold: #d9c27c;       /* oro caldo soft */
    --xmas-cream: #faf7f0;      /* avorio */
}

/* Background generale leggermente più caldo */
body {
    background-color: var(--xmas-cream);
    box-shadow: inset 0 0 0 8px rgba(0,0,0,0.02); /* cornice soft */
}

/* ================================================
   HEADER WOODMART – base Natale
   ================================================ */

/* Header principale (Woodmart) */
.whb-main-header {
    background-color: var(--xmas-green) !important;
    border-bottom: 2px solid var(--xmas-gold);
}

/* Link del menu e icone header */
.whb-main-header .wd-header-nav a,
.whb-main-header .wd-header-nav a span,
.wd-header-cart a,
.wd-header-search .search-button,
.whb-main-header .wd-tools-icon,
.whb-main-header .whb-general-header .wd-dropdown-cart {
    color: #ffffff !important;
}

/* Hover menu leggero */
.whb-main-header .wd-header-nav a:hover {
    color: var(--xmas-gold) !important;
}

/* Logo leggermente “accentuato” */
.whb-main-header .wd-logo img {
    filter: brightness(0.98) saturate(1.05);
}

/* Top bar Woodmart */
.whb-top-bar {
    background: var(--xmas-green-light) !important;
    color: var(--xmas-cream) !important;
}

.whb-top-bar a {
    color: var(--xmas-cream) !important;
}

/* ================================================
   HEADER – rinforzo globale (altri wrapper possibili)
   ================================================ */

header,
.site-header,
.whb-header,
.header-wrapp,
.whb-general-header {
    background-color: var(--xmas-green) !important;
    border-bottom: 2px solid var(--xmas-gold) !important;
}

/* Menu di navigazione generico */
header .menu > li > a,
.site-header .menu > li > a,
.header-wrapp .menu > li > a {
    color: #ffffff !important;
}

header .menu > li > a:hover,
.site-header .menu > li > a:hover,
.header-wrapp .menu > li > a:hover {
    color: var(--xmas-gold) !important;
}

/* Icone carrello, account, search generiche */
.header-wrapp .wd-header-cart a,
.header-wrapp .wd-header-search .search-button,
.header-wrapp .wd-tools-icon {
    color: #ffffff !important;
}

/* TOP BAR (altro wrapper possibile) */
.topbar-wrapp {
    background: var(--xmas-green-light) !important;
    color: var(--xmas-cream) !important;
}

.topbar-wrapp a {
    color: var(--xmas-cream) !important;
}

/* Testo barra promo natalizia */
.whb-top-bar .wd-header-text,
.topbar-wrapp .wd-header-text {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.main-page-wrapper,
.site-content,
#main {
    background-color: var(--xmas-cream);
}

/* Box contenuto principale */
.main-page-wrapper .container,
.site-content .container {
    border-radius: 16px;
    padding-bottom: 20px;
}

/* ================================================
   BOTTONI PRINCIPALI (WooCommerce + generici)
   ================================================ */

.button,
.btn,
.wd-btn,
.single_add_to_cart_button,
button[type="submit"],
.checkout-button,
.woocommerce-message a.button {
    background-color: var(--xmas-red) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    border: none !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    text-transform: none;
    transition: all 0.2s ease;
}

.button:hover,
.btn:hover,
.wd-btn:hover,
.single_add_to_cart_button:hover,
button[type="submit"]:hover,
.checkout-button:hover,
.woocommerce-message a.button:hover {
    background-color: var(--xmas-green-light) !important;
    transform: translateY(-1px);
}

/* Mini link tipo “continua lo shopping” */
.woocommerce a.button.wc-forward {
    background-color: var(--xmas-green) !important;
}

/* ================================================
   PAGINE CARRELLO E CHECKOUT
   ================================================ */

/* Titoli sezioni cart/checkout */
.cart_totals h2,
.woocommerce-billing-fields h3,
#order_review_heading {
    color: var(--xmas-green) !important;
}

/* Tabella riepilogo ordine */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.shop_table th,
.shop_table td {
    border-color: var(--xmas-green) !important;
}

/* Messaggi WooCommerce */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top-color: var(--xmas-red) !important;
}

/* ================================================
   LISTE PRODOTTI, BADGE E LABEL
   ================================================ */

/* Etichette tipo “Sale”, “New”, ecc. Woodmart */
.product-label,
.onsale {
    background-color: var(--xmas-red) !important;
    color: #ffffff !important;
    border-radius: 4px;
}

/* Differenzia “Best” o simili, se usate */
.product-label.best,
.product-label.new,
.wd-label.wd-label-new {
    background-color: var(--xmas-green) !important;
}

/* Card prodotto */
.product-grid-item,
.wd-products-with-bg .product-grid-item,
.product-element-top,
.wd-hover-buttons {
    border-radius: 16px;
    overflow: hidden;
}

.product-grid-item {
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.04);
}

.product-grid-item:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

/* Titolo prodotto in griglia */
.product-grid-item .product-title a {
    color: var(--xmas-green) !important;
}

/* ================================================
   PAGINA PRODOTTO
   ================================================ */

/* Titolo prodotto */
.product_title {
    color: var(--xmas-green) !important;
}

/* Prezzo prodotto */
.summary .price,
.wd-single-price {
    color: var(--xmas-red) !important;
    font-weight: 600;
}

/* Tabs prodotto */
.woocommerce-tabs .tabs li a {
    color: var(--xmas-green) !important;
}

.woocommerce-tabs .tabs li.active a {
    border-color: var(--xmas-green) !important;
}

/* ================================================
   FOOTER
   ================================================ */

.site-footer,
footer[role="contentinfo"],
.wd-footer,
.footer-container,
footer {
    background-color: var(--xmas-green) !important;
    color: var(--xmas-cream) !important;
    border-top: 3px solid var(--xmas-gold) !important;
}

/* Link footer */
.site-footer a,
.wd-footer a,
footer a {
    color: var(--xmas-cream) !important;
}

.site-footer a:hover,
.wd-footer a:hover,
footer a:hover {
    color: var(--xmas-gold) !important;
}

/* Titoli widget footer */
.site-footer .widget-title,
.wd-footer .widget-title,
footer .widget-title {
    color: var(--xmas-gold) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ================================================
   DIVISORI & DETTAGLI ELEGANTI
   ================================================ */

/* Divider dorati */
hr,
.wp-block-separator {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--xmas-gold), transparent);
    opacity: 0.8;
}

/* Titoli sezioni (es. blocchi homepage) */
h1,
h2,
h3 {
    color: var(--xmas-green) !important;
}

/* Link principali nel contenuto */
a {
    color: var(--xmas-green-light);
}

a:hover {
    color: var(--xmas-red);
}

/* ================================================
   DECORAZIONI LATERALI (facoltative)
   Cambia gli URL con i tuoi SVG o commenta se non li usi
   ================================================ */

body:before,
body:after {
    content: "";
    position: fixed;
    top: 0;
    width: 120px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

/* Sostituisci gli URL con icone tue oppure commenta se non li hai ancora */
body:before {
    left: 0;
    background-image: url('/wp-content/uploads/xmas-left.svg');
}

body:after {
    right: 0;
    background-image: url('/wp-content/uploads/xmas-right.svg');
}
/* ================================================
   PRODUCT WRAPPER – Sfondo crema coerente col tema Xmas
   ================================================ */

.product-wrapper,
.products .product,
.shop-loop .product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background-color: var(--xmas-cream) !important;
    border-radius: 16px;
    padding: 15px;
}
/* ================================================
   AGGIUNTE RICHIESTE – SFONDI NATALIZI COERENTI
   ================================================ */

/* Sfondo crema per main wrapper */
.main-page-wrapper {
    background-color: var(--xmas-cream) !important;
}

/* Sfondo crema per wrapper tab prodotto */
.product-tabs-wrapper {
    background-color: var(--xmas-cream) !important;
}

/* Se usate anche queste varianti, le uniformiamo */
.woocommerce-tabs,
.wd-tabs-wrapper,
.single-product-tabs {
    background-color: var(--xmas-cream) !important;
}

/* Elementor – Sezione verde scuro */
.elementor-element-664b3c9 {
    background-color: var(--xmas-green) !important;
}

/* Elementor – Sezione rosso scuro */
.elementor-element-2521f30 {
    background-color: var(--xmas-red) !important;
}
/* ============================================================
   LOGO NATALIZIO BIANCO – WOODMART (HEADER, STICKY, MOBILE)
   ============================================================ */

/* LOGO PRINCIPALE (header) */
.site-logo.wd-switch-logo .wd-main-logo img {
    content: url('https://igiardinidimercurio.it/wp-content/uploads/2025/11/mercurio_white.png') !important;
}

/* LOGO RETINA (quando WordPress chiede lo scaling @2x)
   Woodmart non sempre usa srcset retina per il logo, ma lo forziamo lo stesso */
.site-logo.wd-switch-logo .wd-main-logo img[src*="retina"],
.site-logo.wd-switch-logo .wd-main-logo img[srcset*="retina"] {
    content: url('https://igiardinidimercurio.it/wp-content/uploads/2025/11/mercurio_retina_white.png') !important;
}

/* LOGO STICKY (header compatto allo scroll) */
.site-logo.wd-switch-logo .wd-sticky-logo img {
    content: url('https://igiardinidimercurio.it/wp-content/uploads/2025/11/mercurio_white.png') !important;
}

/* STICKY retina (se Woodmart lo usa via srcset) */
.site-logo.wd-switch-logo .wd-sticky-logo img[src*="retina"],
.site-logo.wd-switch-logo .wd-sticky-logo img[srcset*="retina"] {
    content: url('https://igiardinidimercurio.it/wp-content/uploads/2025/11/mercurio_retina_white.png') !important;
}


/* ============================================================
   LOGO MOBILE (menu mobile, hamburger menu)
   Woodmart lo richiama come varianti della classe .wd-logo
   ============================================================ */

.wd-logo.wd-mobile-logo img,
.wd-mobile-header .wd-logo img {
    content: url('https://igiardinidimercurio.it/wp-content/uploads/2025/11/mercurio_white.png') !important;
}

.wd-logo.wd-mobile-logo img[src*="retina"],
.wd-mobile-header .wd-logo img[srcset*="retina"] {
    content: url('https://igiardinidimercurio.it/wp-content/uploads/2025/11/mercurio_retina_white.png') !important;
}


/* ============================================================
   LOGO NEL FOOTER (se usato nel blocco Elementor o widget)
   ============================================================ */

.site-footer img[src*="mercurio_retina"],
.site-footer img[src*="mercurio_"] {
    content: url('https://igiardinidimercurio.it/wp-content/uploads/2025/11/mercurio_white.png') !important;
}

.site-footer img[srcset*="retina"],
.wd-footer img[srcset*="retina"] {
    content: url('https://igiardinidimercurio.it/wp-content/uploads/2025/11/mercurio_retina_white.png') !important;
}
/* ============================================================
   LOGO NATALIZIO – OVUNQUE ESISTA IL LOGO MARRONE
   ============================================================ */

/* Qualsiasi immagine che contiene "mercurio_retina" → sostituisci col logo bianco retina */
img[src*="mercurio_retina"] {
    content: url('https://igiardinidimercurio.it/wp-content/uploads/2025/11/mercurio_retina_white.png') !important;
    filter: none !important;
}

/* Qualsiasi immagine che contiene "mercurio_" (versione normale) */
img[src*="mercurio_"] {
    content: url('https://igiardinidimercurio.it/wp-content/uploads/2025/11/mercurio_white.png') !important;
    filter: none !important;
}

/* Anche per gli srcset (Woodmart duplica spesso questi attributi) */
img[srcset*="mercurio_retina"] {
    content: url('https://igiardinidimercurio.it/wp-content/uploads/2025/11/mercurio_retina_white.png') !important;
}

img[srcset*="mercurio_"] {
    content: url('https://igiardinidimercurio.it/wp-content/uploads/2025/11/mercurio_white.png') !important;
}
/* ================================================
   MOBILE HEADER – colore icone e label carrello
   ================================================ */

/* Icone strumenti (carrello, account, search) in mobile */
.wd-mobile-header .wd-tools-icon,
.wd-header-mobile .wd-tools-icon,
.wd-tools-element .wd-tools-icon,
.mobile-nav .wd-tools-icon {
    color: #000 !important;
}

/* Label sotto le icone (testo "Carrello", "Account", ecc.) */
.wd-mobile-header .wd-toolbar-label,
.wd-toolbar .wd-toolbar-label,
.mobile-nav .wd-toolbar-label {
    color: #000 !important;
}

/* Forza il colore anche sugli <i> e svg delle icone */
.wd-tools-icon i,
.wd-tools-icon svg {
    fill: #000 !important;
    stroke: #000 !important;
    color: #000 !important;
}

/* Toolbar mobile di Woodmart (sticky in basso) */
.wd-toolbar,
.wd-sticky-toolbar,
.wd-sticky-toolbar .wd-tools-icon,
.wd-sticky-toolbar .wd-toolbar-label {
    color: #000 !important;
}
/* ============================================================
   1. MENU ITEM SPECIFICO → colore oro
   ============================================================ */

#menu-item-17015 a:link,
#menu-item-17015 a:visited {
    color: #ecb900 !important; /* oro */
}


/* ============================================================
   2. SEARCH ICON → ridotta del 10%
   ============================================================ */

/* Woodmart usa classi come .searchsubmit, .search-button, .wd-search-button */
.searchsubmit,
.searchsubmit i,
.searchsubmit svg,
.wd-search-button,
.wd-search-button i,
.wd-search-button svg,
.whb-main-header .wd-header-search .search-button i,
.whb-main-header .wd-header-search .search-button svg {
    transform: scale(0.90) !important; /* 10% più piccola */
    transform-origin: center center;
}


/* ============================================================
   3. CATEGORIE HEADER (wd-header-cats) → sfondo verde scuro
   ============================================================ */

.wd-header-cats,
.wd-header-cats .wd-cat-title,
.wd-header-cats .wdb-cats-dropdown {
    background-color: #145c43 !important; /* verde scuro tema natalizio */
    color: #fff !important;
}

/* Link interni del menu categorie */
.wd-header-cats a {
    color: #fff !important;
}

.wd-header-cats a:hover {
    color: #ecb900 !important; /* oro per hover */
}