/*
 * Strato di override del tema "megastore". Viene caricato IN CASCATA dopo
 * themes/default/assets/theme.css (vedi themeStylesheets() in _theme.php):
 * qui stanno solo le regole che il markup del tema non può esprimere con le
 * utility Tailwind inline — stati hover composti, scrollbar, dropdown — e le
 * correzioni ai blocchi il cui markup arriva dal modulo (sidebar categorie,
 * paginazione, breadcrumb).
 */

body {
    font-family: var(--c-font-body);
    color: var(--c-text);
    background: var(--c-surface);
}

/* Ritmo verticale delle sezioni della home/viste */
.ms-section { margin-top: 3.5rem; margin-bottom: 3.5rem; }
@media (min-width: 768px) {
    .ms-section { margin-top: 5rem; margin-bottom: 5rem; }
}

/* Rail orizzontali: scorrimento pulito, niente scrollbar visiva */
.ms-rail { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.ms-rail::-webkit-scrollbar { display: none; }

/* Mega menu della barra categorie: apertura/chiusura in solo CSS.
   Il pannello è ancorato al contenitore relative del nav (non al li):
   vedi il commento nel markup di layouts/header.php sul clipping. */
.ms-mega {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: none;
}
.ms-nav-item:hover .ms-mega,
.ms-nav-item:focus-within .ms-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
/* La barra categorie scorre in orizzontale se le voci non entrano */
.ms-nav-scroll { scrollbar-width: none; }
.ms-nav-scroll::-webkit-scrollbar { display: none; }

/* Accordion nativo <details> del menu mobile */
.ms-mobile-group summary { list-style: none; }
.ms-mobile-group summary::-webkit-details-marker { display: none; }
.ms-mobile-group[open] > summary i { transform: rotate(180deg); }
.ms-mobile-group summary i { transition: transform .2s ease; }

/* Breadcrumb: il markup arriva da PwShop::renderBreadcrumb con classi scure */
.ms-breadcrumb a { color: var(--c-text-muted); }
.ms-breadcrumb a:hover { color: var(--c-primary); text-decoration: none; }
.ms-breadcrumb span { color: var(--c-text); }
.ms-breadcrumb-dark a,
.ms-breadcrumb-dark span { color: rgba(255, 255, 255, .85) !important; }
.ms-breadcrumb-dark a:hover { color: #fff !important; }

/* Sidebar categorie (markup dal modulo, non tematizzabile): ammorbidita */
.section-product .bb-sidebar,
.section-shop .bb-sidebar { border-radius: 1rem; }

/* Miniature della galleria prodotto desktop: le classi absolute/bottom-8/
   right-8 sul contenitore sono l'AGGANCIO di product-variants-script.php
   (querySelector per classi), non un posizionamento voluto. Qui si
   neutralizzano, così la strip sta in flusso SOTTO l'immagine. !important
   perché le utility Tailwind (runtime) vengono iniettate dopo questo file. */
.ms-static-thumbs {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
}

/* Card fluttuanti nell'hero della home. Si anima la proprietà `translate`
   (non `transform`): le card portano una rotazione via utility rotate-*,
   che vive su transform e verrebbe azzerata da keyframes su transform. */
@keyframes ms-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -14px; }
}
.ms-float-a { animation: ms-float 6s ease-in-out infinite; }
.ms-float-b { animation: ms-float 7.5s ease-in-out 0.9s infinite; }
.ms-float-c { animation: ms-float 9s ease-in-out 1.8s infinite; }
@media (prefers-reduced-motion: reduce) {
    .ms-float-a, .ms-float-b, .ms-float-c { animation: none; }
}

/* Box "La tua scelta" nella scheda prodotto: tinta chiara del primario,
   qualunque esso sia (prima era un bg-teal-50 fisso). */
.ms-variant-summary {
    background-color: color-mix(in srgb, var(--c-primary) 8%, white);
}

/* Card: l'immagine hover non deve lasciare bordi durante lo zoom */
.ms-card a { -webkit-tap-highlight-color: transparent; }

/* Paginazione (partial ereditato da default): allineamento e colori */
.ms-section nav[aria-label], .pagination { color: var(--c-text-muted); }

/* La barra mobile in basso non deve coprire il back-to-top */
.back-to-top { bottom: 90px; }
@media (min-width: 768px) {
    .back-to-top { bottom: 15px; }
}

/* ======================================================================
   PAGINE CORE (carrello, checkout, login, registrazione, profilo,
   contatti). Il loro markup NON è tematizzabile (core/views/), ma questo
   foglio è caricato ovunque: l'armonizzazione col tema si fa da qui,
   agganciandosi a body[data-pageid="<template>"] e alle classi/id che il
   markup core già possiede. La specificità (attributo+classe) batte le
   utility Tailwind — iniettate a runtime DOPO questo file — senza bisogno
   di !important, salvo dove indicato.
   ====================================================================== */

/* Il gruppo di template core interessati, riusato in ogni regola. */
body:is([data-pageid="cart"], [data-pageid="checkout"], [data-pageid="login"],
        [data-pageid="signup"], [data-pageid="forgot"], [data-pageid="reset-password"],
        [data-pageid="profile"], [data-pageid="profile_orders"],
        [data-pageid="profile_addresses"], [data-pageid="profile_gdpr"],
        [data-pageid="contact"]) {
    background: var(--c-surface-alt);
}

/* Card e pannelli: stessi raggi e bordi delle card prodotto del tema. */
body:is([data-pageid="cart"], [data-pageid="checkout"], [data-pageid="login"],
        [data-pageid="signup"], [data-pageid="forgot"], [data-pageid="reset-password"],
        [data-pageid="profile"], [data-pageid="profile_orders"],
        [data-pageid="profile_addresses"], [data-pageid="profile_gdpr"],
        [data-pageid="contact"]) :is(.shadow-md, .shadow, .shadow-sm):is(.bg-white, .rounded-lg, .rounded-md):not(input):not(select):not(textarea):not(button) {
    border-radius: 1rem;
    border: 1px solid var(--c-border);
    box-shadow: 0 8px 24px -12px rgb(15 23 42 / 0.10);
}

/* Campi form: bordi e focus del tema, raggio coerente. */
body:is([data-pageid="cart"], [data-pageid="checkout"], [data-pageid="login"],
        [data-pageid="signup"], [data-pageid="forgot"], [data-pageid="reset-password"],
        [data-pageid="profile"], [data-pageid="profile_orders"],
        [data-pageid="profile_addresses"], [data-pageid="profile_gdpr"],
        [data-pageid="contact"]) :is(input[type="text"], input[type="email"], input[type="password"],
        input[type="tel"], input[type="number"], select, textarea) {
    border-radius: 0.65rem;
    border-color: var(--c-border);
    background-color: #fff;
}
body:is([data-pageid="cart"], [data-pageid="checkout"], [data-pageid="login"],
        [data-pageid="signup"], [data-pageid="forgot"], [data-pageid="reset-password"],
        [data-pageid="profile"], [data-pageid="profile_orders"],
        [data-pageid="profile_addresses"], [data-pageid="profile_gdpr"],
        [data-pageid="contact"]) :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--c-ui-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-ui-focus) 22%, transparent);
}

/* CTA principali: colore accent del tema (come "Aggiungi al carrello").
   #proceed-checkout (carrello), #confirm-order (checkout, "Conferma e
   Paga"), #login-submit, #submit-btn (registrazione/profilo/contatti). */
#proceed-checkout, #confirm-order, #login-submit, #submit-btn {
    background-color: var(--c-accent) !important; /* le utility bg-* sono sullo stesso elemento */
    border-radius: 0.75rem !important;
    font-weight: 700;
    transition: background-color .2s ease;
}
#proceed-checkout:hover, #confirm-order:hover, #login-submit:hover, #submit-btn:hover {
    background-color: var(--c-accent-hover) !important;
}

/* Navigazione fra gli step del checkout (Continua / Torna): resta scura
   ma con la tinta e i raggi del tema. */
#continue-to-payment {
    background-color: var(--c-dark) !important;
    border-radius: 0.75rem !important;
    font-weight: 600;
}
#continue-to-payment:hover { background-color: #1e293b !important; }

/* Bottoni secondari (Continua lo shopping, Vai al carrello...). */
#continue-shopping {
    border-radius: 0.75rem !important;
    border-color: var(--c-border);
}

/* Accenti teal/cyan hardcoded nel markup core → primario del tema. */
body:is([data-pageid="cart"], [data-pageid="checkout"], [data-pageid="login"],
        [data-pageid="signup"], [data-pageid="forgot"], [data-pageid="reset-password"],
        [data-pageid="profile"], [data-pageid="profile_orders"],
        [data-pageid="profile_addresses"], [data-pageid="profile_gdpr"],
        [data-pageid="contact"]) :is(.text-teal-600, .text-teal-500, .text-cyan-500, .text-cyan-700) {
    color: var(--c-primary);
}

/* Menu del profilo: tutti i teal fissi del markup core rimappati sul
   primario del tema (il celeste del logo). Copre voce attiva (bg-teal-600),
   avatar, chip icona, variante mobile (teal-50/700) e focus ring. */
body:is([data-pageid="profile"], [data-pageid="profile_orders"],
        [data-pageid="profile_addresses"], [data-pageid="profile_gdpr"]) .bg-teal-600 {
    background-color: var(--c-primary);
}
body:is([data-pageid="profile"], [data-pageid="profile_orders"],
        [data-pageid="profile_addresses"], [data-pageid="profile_gdpr"]) .bg-teal-50 {
    background-color: color-mix(in srgb, var(--c-primary) 10%, white);
}
body:is([data-pageid="profile"], [data-pageid="profile_orders"],
        [data-pageid="profile_addresses"], [data-pageid="profile_gdpr"]) :is(.text-teal-600, .text-teal-700) {
    color: var(--c-primary);
}
body:is([data-pageid="profile"], [data-pageid="profile_orders"],
        [data-pageid="profile_addresses"], [data-pageid="profile_gdpr"]) .focus\:ring-teal-500:focus {
    --tw-ring-color: var(--c-primary);
}