@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
    --efx-ink: #1A2B3C;
    --efx-muted: #6B7787;
    --efx-bg: #F5F7FA;
    --efx-surface: #FFFFFF;
    --efx-border: #E1E6EC;
    --efx-imgbg: #EEF2F6;
    --efx-accent: #0B5FAE;
    --efx-accent-deep: #094A87;
    --efx-sale: #D6392E;
    --efx-accent-ink: #FFFFFF;
    --efx-focus: #0B5FAE;
    --font-display: 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--efx-bg);
    color: var(--efx-ink);
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--efx-focus);
    outline-offset: 2px;
}

.efx-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--efx-accent);
    margin-bottom: 0.4rem;
}

.efx-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 2rem;
    background: var(--efx-ink);
    color: #fff;
}

.efx-topbar__brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: #fff;
}

.efx-topbar__cart {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.efx-topbar__cart:hover { border-color: var(--efx-accent); background: rgba(226,88,46,0.12); }

.efx-cart__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--efx-surface);
    border: 1px solid var(--efx-border);
    border-radius: 8px;
    overflow: hidden;
}

.efx-cart__table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--efx-muted);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--efx-border);
}

.efx-cart__table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--efx-border);
    vertical-align: middle;
}

.efx-cart__prodcell { display: flex; align-items: center; gap: 0.75rem; }

.efx-cart__thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--efx-imgbg);
    border-radius: 6px;
    padding: 4px;
}

.efx-cart__name { font-weight: 600; font-size: 0.88rem; }
.efx-cart__sku { font-family: var(--font-mono); font-size: 0.7rem; color: var(--efx-muted); }

.efx-cart__qty {
    width: 70px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--efx-border);
    border-radius: 6px;
    font-size: 0.85rem;
}

.efx-cart__unit { font-size: 0.78rem; color: var(--efx-muted); margin-left: 0.4rem; }
.efx-cart__price { font-weight: 600; }

.efx-cart__remove {
    background: transparent;
    border: none;
    color: var(--efx-sale);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
}

.efx-cart__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.efx-cart__total { font-size: 1.05rem; font-weight: 700; }

.efx-checkout__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 760px) {
    .efx-checkout__grid { grid-template-columns: 1fr; }
}

.efx-form__section {
    background: var(--efx-surface);
    border: 1px solid var(--efx-border);
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
}

.efx-form__section h2 { font-size: 1rem; margin: 0 0 1rem; }

.efx-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.efx-form__row--single { grid-template-columns: 1fr; }

@media (max-width: 480px) {
    .efx-form__row { grid-template-columns: 1fr; }
}

.efx-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--efx-ink);
}

.efx-field input,
.efx-field select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--efx-border);
    border-radius: 6px;
    font-size: 0.87rem;
    font-family: var(--font-body);
}

.efx-field__error {
    font-size: 0.72rem;
    color: var(--efx-sale);
    margin-top: 0.25rem;
    display: none;
}

.efx-field.has-error .efx-field__error { display: block; }
.efx-field.has-error input { border-color: var(--efx-sale); }

.efx-summary-card {
    background: var(--efx-surface);
    border: 1px solid var(--efx-border);
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
    position: sticky;
    top: 1rem;
}

.efx-summary-card h2 { font-size: 1rem; margin: 0 0 1rem; }

.efx-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--efx-border);
}

.efx-payment-options { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }

.efx-payment-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--efx-border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.efx-payment-option input { margin: 0; }

.efx-checkout__submit {
    width: 100%;
    background: var(--efx-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.8rem;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
}

.efx-checkout__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.efx-checkout__status { margin-top: 0.75rem; font-size: 0.82rem; text-align: center; }
.efx-checkout__status--error { color: var(--efx-sale); }
.efx-checkout__status--ok { color: #1a7f4a; }

.efx-catalogo {
    max-width: 1180px;
    margin: 0 auto;
    padding: calc(3.5rem + 2cm) 2rem 5rem;
}

.efx-catalogo__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 1.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.efx-catalogo__header h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.efx-catalogo__count {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--efx-muted);
}

.efx-catalogo__filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.25rem;
}

.efx-filter-btn {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--efx-border);
    background: var(--efx-surface);
    color: var(--efx-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.efx-filter-btn:hover { border-color: var(--efx-ink); color: var(--efx-ink); }

.efx-filter-btn.is-active {
    background: var(--efx-ink);
    border-color: var(--efx-ink);
    color: #fff;
}

.efx-catalogo__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 1rem;
}

.efx-card {
    background: var(--efx-surface);
    border: 1px solid var(--efx-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.efx-card:hover {
    box-shadow: 0 16px 32px rgba(26,43,60,0.12);
    border-color: #C9D3DE;
    transform: translateY(-3px);
}

.efx-card__imgwrap {
    background: var(--efx-imgbg);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.efx-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform 0.35s ease;
}

.efx-card:hover .efx-card__img {
    transform: scale(1.06);
}

.efx-card__catbadge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--efx-surface);
    color: var(--efx-accent);
    border: 1px solid var(--efx-border);
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
}

.efx-card__fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--efx-surface);
    border: 1px solid var(--efx-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--efx-muted);
    cursor: pointer;
    font-size: 0.9rem;
}

.efx-card__body {
    padding: 0.9rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-grow: 1;
}

.efx-card__sku {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--efx-muted);
}

.efx-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--efx-ink);
}

.efx-card__variants {
    font-size: 0.76rem;
    color: var(--efx-muted);
}

.efx-card__priceRow {
    margin-top: 0.2rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.efx-card__price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--efx-ink);
}

.efx-card__price--onrequest {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--efx-accent);
}

.efx-card__priceUnit {
    font-size: 0.78rem;
    color: var(--efx-muted);
    margin-left: 0.3rem;
}

.efx-card__lot {
    font-size: 0.76rem;
    color: var(--efx-muted);
}

.efx-card__cta {
    margin-top: 0.6rem;
    width: 100%;
    background: var(--efx-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.efx-card__cta:hover { background: var(--efx-accent-deep); }

.efx-card__cta--ghost {
    margin-top: 0.4rem;
    background: transparent;
    color: var(--efx-accent);
    border: 1px solid var(--efx-border);
}

.efx-card__cta--ghost:hover { border-color: var(--efx-accent); background: var(--efx-bg); }

.efx-404 {
    max-width: 480px;
    margin: 5rem auto;
    text-align: center;
    color: var(--efx-muted);
}

@media (max-width: 480px) {
    .efx-catalogo { padding: calc(2.25rem + 2cm) 1.25rem 3.5rem; }
    .efx-catalogo__header { flex-direction: column; align-items: flex-start; }
    .efx-topbar { padding: 1rem 1.25rem; }
}

/* --- Hero --- */
.efx-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    background: url('/img/hero-bg.jpg') center/cover no-repeat;
    background-color: var(--efx-ink);
}

.efx-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(10,16,26,0.92) 0%, rgba(10,16,26,0.78) 45%, rgba(10,16,26,0.45) 100%);
}

.efx-hero__content {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 2rem;
    color: #fff;
    max-width: 620px;
}

.efx-hero__content h1 {
    font-size: 2.5rem;
    line-height: 1.15;
    font-weight: 700;
    margin: 0.5rem 0 1rem;
    letter-spacing: -0.01em;
}

.efx-hero__content p {
    font-size: 1.02rem;
    color: rgba(255,255,255,0.86);
    margin: 0 0 1.75rem;
    max-width: 480px;
}

.efx-hero__cta {
    display: inline-block;
    background: var(--efx-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 0.85rem 1.6rem;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: background 0.15s ease, transform 0.15s ease;
}

.efx-hero__cta:hover { background: var(--efx-accent-deep); transform: translateY(-1px); }

@media (max-width: 640px) {
    .efx-hero { min-height: 340px; }
    .efx-hero__content h1 { font-size: 1.7rem; }
}

/* --- Trust bar --- */
.efx-trustbar {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.75rem 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.efx-trustbar__item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.efx-trustbar__item svg {
    width: 26px;
    height: 26px;
    color: var(--efx-accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.efx-trustbar__item strong {
    display: block;
    font-size: 0.88rem;
    margin-bottom: 0.15rem;
}

.efx-trustbar__item span {
    font-size: 0.78rem;
    color: var(--efx-muted);
}

@media (max-width: 860px) {
    .efx-trustbar { grid-template-columns: repeat(2, 1fr); }
}

/* --- Footer --- */
.efx-footer {
    background: var(--efx-ink);
    color: rgba(255,255,255,0.75);
    margin-top: 3rem;
}

.efx-footer__grid {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 2rem 2rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
}

.efx-footer__grid h3 {
    color: #fff;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem;
}

.efx-footer__grid p {
    font-size: 0.85rem;
    margin: 0 0 0.4rem;
    color: rgba(255,255,255,0.7);
}

.efx-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 1rem 2rem;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

@media (max-width: 640px) {
    .efx-footer__grid { grid-template-columns: 1fr; }
}

/* --- Sezioni marketing generiche --- */
.efx-section__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3.5rem 2rem;
}

.efx-section__inner > h2 {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0.4rem 0 2rem;
    letter-spacing: -0.01em;
    max-width: 560px;
}

/* --- Come funziona --- */
.efx-howitworks { background: var(--efx-surface); }

.efx-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.efx-step__num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--efx-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.85rem;
}

.efx-step h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.efx-step p { font-size: 0.87rem; color: var(--efx-muted); margin: 0; }

@media (max-width: 760px) {
    .efx-steps { grid-template-columns: 1fr; }
}

/* --- Perché sceglierci --- */
.efx-why { background: var(--efx-bg); }

.efx-why__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.efx-why__item {
    background: var(--efx-surface);
    border: 1px solid var(--efx-border);
    border-radius: 10px;
    padding: 1.4rem;
}

.efx-why__item svg {
    width: 28px;
    height: 28px;
    color: var(--efx-accent);
    margin-bottom: 0.75rem;
}

.efx-why__item h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }
.efx-why__item p { font-size: 0.82rem; color: var(--efx-muted); margin: 0; }

@media (max-width: 860px) {
    .efx-why__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Recensioni --- */
.efx-reviews { background: var(--efx-surface); }

.efx-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.efx-review {
    border: 1px solid var(--efx-border);
    border-radius: 10px;
    padding: 1.4rem;
}

.efx-review--placeholder {
    border-style: dashed;
    background: var(--efx-bg);
}

.efx-review__stars { color: var(--efx-accent); letter-spacing: 0.1em; margin-bottom: 0.6rem; font-size: 0.9rem; }
.efx-review p { font-size: 0.87rem; color: var(--efx-muted); font-style: italic; margin: 0 0 0.75rem; }
.efx-review__author { font-size: 0.8rem; font-weight: 600; }

@media (max-width: 860px) {
    .efx-reviews__grid { grid-template-columns: 1fr; }
}

/* --- FAQ --- */
.efx-faq { background: var(--efx-bg); }

.efx-faq__list { max-width: 720px; }

.efx-faq__item {
    background: var(--efx-surface);
    border: 1px solid var(--efx-border);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
}

.efx-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    list-style: none;
}

.efx-faq__item summary::-webkit-details-marker { display: none; }

.efx-faq__item summary::after {
    content: '+';
    float: right;
    font-weight: 400;
    color: var(--efx-muted);
}

.efx-faq__item[open] summary::after { content: '−'; }

.efx-faq__item p {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--efx-muted);
}

/* --- Overlay pagine legali --- */
.efx-legal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20,23,31,0.6);
    z-index: 1000;
    padding: 2rem 1rem;
    overflow-y: auto;
}

.efx-legal-overlay.is-open { display: block; }

.efx-legal-panel {
    background: #fff;
    max-width: 720px;
    margin: 0 auto;
    border-radius: 12px;
    padding: 2rem 2.25rem;
    position: relative;
}

.efx-legal-panel__close {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--efx-muted);
}

#efx-legal-panel__content h2 { font-size: 1.35rem; margin: 0 0 0.5rem; }
#efx-legal-panel__content h3 { font-size: 1rem; margin: 1.4rem 0 0.5rem; }
#efx-legal-panel__content p, #efx-legal-panel__content li { font-size: 0.87rem; color: var(--efx-muted); line-height: 1.6; }
#efx-legal-panel__content ul { padding-left: 1.2rem; }

.efx-footer__grid a { color: rgba(255,255,255,0.7); text-decoration: none; }
.efx-footer__grid a:hover { color: #fff; text-decoration: underline; }

/* --- Scheda prodotto: galleria, tier-card scaglioni (stile ripreso dal listino) --- */
.efx-prod__head {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 2rem;
    margin: 1.5rem 0 2.5rem;
}

@media (max-width: 760px) {
    .efx-prod__head { grid-template-columns: 1fr; }
}

.efx-prod__gallery { display: flex; flex-direction: column; gap: 0.6rem; }

.efx-prod__mainimg {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    background: var(--efx-imgbg);
    border: 1px solid var(--efx-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.efx-prod__thumbimg {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: var(--efx-imgbg);
    border: 1px solid var(--efx-border);
    border-radius: 8px;
    padding: 0.4rem;
    cursor: pointer;
}

.efx-section-num {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--efx-accent);
    border: 1px solid var(--efx-accent);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    margin-bottom: 0.5rem;
}

.efx-prod__title {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
}

.efx-prod__title small {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--efx-muted);
    margin-top: 0.25rem;
}

.efx-prod__desc { color: var(--efx-muted); font-size: 0.92rem; line-height: 1.6; }

.efx-conai-note {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: #1a7f4a;
    background: #eafaf1;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
}

.efx-size-block { margin-bottom: 2.25rem; }

.efx-size-label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 0.85rem; }
.efx-size-label .efx-mm { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--efx-ink); }
.efx-size-label .efx-desc { font-size: 0.72rem; color: var(--efx-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.efx-tier-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.efx-tier-card {
    position: relative;
    background: var(--efx-surface);
    border: 1px solid var(--efx-border);
    border-radius: 10px;
    padding: 0.9rem 0.8rem;
    text-align: center;
}

.efx-tier-card.is-best { border: 2px solid var(--efx-accent); background: #fff7f4; }
.efx-tier-card.is-max { border: 2px solid var(--efx-ink); }

.efx-tier-card__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--efx-accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.efx-tier-card.is-max .efx-tier-card__badge { background: var(--efx-ink); }

.efx-tier-card__qty { font-size: 0.72rem; color: var(--efx-muted); margin-bottom: 0.5rem; min-height: 2rem; }
.efx-tier-card__price { font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem; color: var(--efx-ink); }
.efx-tier-card.is-best .efx-tier-card__price { color: var(--efx-accent-deep); }
.efx-tier-card__unit { font-size: 0.72rem; color: var(--efx-muted); }

.efx-matrix-selector { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }

.efx-matrix-btn {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--efx-border);
    background: var(--efx-surface);
    cursor: pointer;
}

.efx-matrix-btn.is-active { background: var(--efx-ink); border-color: var(--efx-ink); color: #fff; }

.efx-order-widget {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--efx-bg);
    border: 1px solid var(--efx-border);
    border-radius: 10px;
    padding: 1rem;
}

.efx-order-widget label { font-size: 0.8rem; font-weight: 600; }

.efx-order-widget input {
    width: 110px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--efx-border);
    border-radius: 6px;
    font-size: 0.9rem;
}

.efx-liveprice { font-size: 0.85rem; font-weight: 600; flex-grow: 1; }
.efx-liveprice--ok { color: #1a7f4a; }
.efx-liveprice--error { color: var(--efx-sale); }

.efx-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: var(--efx-bg);
    border: 1px dashed var(--efx-accent);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.efx-callout h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.efx-callout p { margin: 0; font-size: 0.82rem; color: var(--efx-muted); max-width: 480px; }

.efx-callout__amount {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--efx-accent);
    text-align: center;
    white-space: nowrap;
}

.efx-callout__amount small {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.68rem;
    color: var(--efx-muted);
}

/* --- Selettore colore in scheda prodotto --- */
.efx-color-picker { margin: 1.25rem 0; }

.efx-color-picker label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: var(--efx-muted);
}

.efx-color-picker label strong { color: var(--efx-ink); }

.efx-color-swatches { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.efx-color-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    background: var(--efx-surface);
    border: 2px solid var(--efx-border);
    border-radius: 10px;
    padding: 0.5rem;
    cursor: pointer;
    width: 74px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.efx-color-swatch:hover { border-color: #C9D3DE; }

.efx-color-swatch.is-active {
    border-color: var(--efx-accent);
    box-shadow: 0 0 0 2px rgba(11,95,174,0.15);
}

.efx-color-swatch img {
    width: 100%;
    height: 44px;
    object-fit: contain;
    background: var(--efx-imgbg);
    border-radius: 6px;
}

.efx-color-swatch span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--efx-ink);
    text-align: center;
}

/* ── Area riservata: tendina cambio stato ordine ──
   Colore del bordo sinistro allineato al significato dello stato, per
   riconoscerlo a colpo d'occhio senza dover leggere il testo. */
.efx-status-select {
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--efx-border, #ddd);
    border-left-width: 4px;
    background: #fff;
    cursor: pointer;
    color: var(--efx-ink);
}
.efx-status-select--in_attesa_pagamento { border-left-color: #f0ad4e; }
.efx-status-select--pagato              { border-left-color: #1a7f4a; }
.efx-status-select--in_lavorazione      { border-left-color: #0b5fae; }
.efx-status-select--spedito             { border-left-color: #6f42c1; }
.efx-status-select--consegnato          { border-left-color: #1a7f4a; }
.efx-status-select--annullato           { border-left-color: var(--efx-sale, #E63946); }

/* ── Scroll orizzontale per tabelle su schermi stretti (mobile/tablet) ──
   Le tabelle con più colonne (carrello, elenco clienti, storico ordini)
   restavano tagliate su viewport stretti perché .efx-cart__table ha
   "overflow: hidden" diretto e nessun contenitore scrollabile attorno.
   Questo wrapper permette di scorrere ORIZZONTALMENTE SOLO la tabella,
   senza spingere in overflow l'intera pagina. */
.efx-table-scroll {
    overflow-x: scroll !important;
    border-radius: 8px;
    /* Colore scrollbar per Firefox: (colore barra, colore sfondo) */
    scrollbar-color: var(--efx-accent) var(--efx-imgbg);
    scrollbar-width: auto;
    /* "scroll" invece di "auto" mantiene sempre visibile lo spazio della scrollbar,
       invece di farla comparire solo mentre si scrolla attivamente.
       NOTA: tolto "-webkit-overflow-scrolling: touch" - su iOS quella proprietà
       attiva lo stile di scroll "overlay" nativo di Apple, che nasconde SEMPRE
       la scrollbar quando non stai toccando lo schermo in quel momento: è un
       comportamento di sistema operativo che nessun CSS può forzare a restare
       visibile. Toglierla dà la scrollbar "classica" invece di quella overlay. */
}
.efx-table-scroll .efx-cart__table {
    min-width: 640px;
}
/* Colore scrollbar per Chrome/Safari/Edge (mobile compreso) */
.efx-table-scroll::-webkit-scrollbar {
    height: 8px !important;
    -webkit-appearance: none;
    display: block !important;
    opacity: 1 !important;
}
.efx-table-scroll::-webkit-scrollbar-track {
    background: var(--efx-imgbg) !important;
    border-radius: 8px;
}
.efx-table-scroll::-webkit-scrollbar-thumb {
    background: var(--efx-accent) !important;
    border-radius: 8px;
    opacity: 1 !important;
}

/* ── Barra indicatore di scroll DISEGNATA A MANO, non è la scrollbar del
   browser: su mobile molti browser nascondono la scrollbar nativa dopo lo
   scroll, a prescindere da come la si colora via CSS. Questa barra invece è
   un semplice div che controlliamo noi (aggiornato via JS in core.js), quindi
   resta SEMPRE visibile, su qualunque telefono/browser. ── */
.efx-scroll-indicator {
    height: 6px;
    background: var(--efx-imgbg);
    border-radius: 3px;
    margin-top: 0.5rem;
    overflow: hidden;
}
.efx-scroll-indicator__bar {
    height: 100%;
    background: var(--efx-accent);
    border-radius: 3px;
    transition: transform 0.05s linear;
}

/* ── Nota "+30%" per film estensibile colorato (card catalogo + scheda prodotto) ── */
.efx-card__colornote {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--efx-accent-deep);
    background: var(--efx-imgbg);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    display: inline-block;
    margin: 0.2rem 0 0.6rem;
}
.efx-color-note {
    font-size: 1rem;
    font-weight: 700;
    color: var(--efx-accent-deep);
    margin: 0.6rem 0 0;
}

/* ── Nota "Contributo CONAI Assolto" accanto al campo Quantità (scheda prodotto) ── */
.efx-conai-inline {
    font-size: 0.7rem;
    font-weight: 600;
    color: #1a7f4a;
    text-transform: none;
    letter-spacing: normal;
    margin-left: auto;
    white-space: nowrap;
}

/* ── Nota "Contributo CONAI Assolto" nel carrello e nel riepilogo checkout
   (oltre alla scheda prodotto, dove ha già il suo stile .efx-conai-inline) ── */
.efx-cart__conai {
    font-size: 0.68rem;
    color: #1a7f4a;
    font-weight: 600;
    margin-top: 0.15rem;
}
.efx-conai-note-inline {
    color: #1a7f4a;
    font-weight: 600;
    font-size: 0.72rem;
}

/* ── Riduzione Cumulative Layout Shift (CLS) ──
   #app-viewport parte vuoto e viene riempito da JS dopo il caricamento
   (è una SPA). Senza altezza riservata, il salto da "vuoto" a "pieno" sposta
   bruscamente tutto il contenuto sotto (incluso il footer), il che viene
   penalizzato pesantemente da Google PageSpeed.

   NOTA: prima era 70vh (percentuale dell'altezza SCHERMO) - funzionava su
   mobile per puro caso di proporzioni, ma su desktop lo schermo è largo e
   basso mentre la home page reale è molto più alta di 70vh, quindi il salto
   restava enorme (confermato da PageSpeed: il footer da solo valeva 0,300
   punti di CLS su 0,304 totali). Un valore fisso in px, tarato sull'altezza
   reale approssimativa della home page, funziona meglio perché il contenuto
   non dipende dall'altezza dello schermo, solo dalla sua larghezza. */
#app-viewport {
    min-height: 1800px;
    display: block;
}

/* ── Sezione CTA finale persuasiva, sotto le FAQ in home page ── */
.efx-final-cta {
    padding: 4rem 1rem;
    background: linear-gradient(90deg, #EA580C, #F97316);
    text-align: center;
}
.efx-final-cta__inner {
    max-width: 48rem;
    margin: 0 auto;
}
.efx-final-cta__title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.25;
}
.efx-final-cta__text {
    font-size: 1rem;
    color: #fff;
    opacity: 0.92;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.efx-final-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #fff;
    color: #EA580C;
    font-weight: 900;
    font-size: 1rem;
    padding: 1rem 2rem;
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    text-decoration: none;
    transition: background 0.2s ease;
    width: 100%;
}
.efx-final-cta__btn:hover {
    background: #FFF7ED;
}
@media (min-width: 640px) {
    .efx-final-cta__title { font-size: 2.25rem; }
    .efx-final-cta__text { font-size: 1.125rem; }
    .efx-final-cta__btn { font-size: 1.25rem; padding: 1.25rem 3rem; width: auto; }
}

/* ── Pulsante "Procedi con l'acquisto" nel carrello: verde, testo nero, freccia a dx ── */
.efx-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: #22C55E;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s ease;
}
.efx-checkout-btn:hover {
    background: #16A34A;
}
.efx-checkout-btn__arrow {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
}

/* ── Righe cliccabili nella tabella clienti (Area riservata) ── */
.efx-admin__row {
    cursor: pointer;
    transition: background 0.15s ease;
}
.efx-admin__row:hover {
    background: var(--efx-imgbg);
}

/* ── .efx-btn / .efx-btn--ghost: usati in 3 punti (bottone "Esci" account,
   CTA "Vai al catalogo" a carrello/checkout vuoti) ma MAI stilizzati prima
   d'ora - trovato durante audit generale del sito. ── */
.efx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.efx-btn--ghost {
    background: transparent;
    border: 1px solid var(--efx-border);
    color: var(--efx-ink);
}
.efx-btn--ghost:hover {
    background: var(--efx-imgbg);
    border-color: var(--efx-accent);
}

/* ── Notifica "toast" (es. Aggiunto al carrello): sempre visibile, sopra
   tutto il resto, indipendentemente da dove sei scrollato nella pagina.
   Prima la conferma era solo un testo piccolo sotto il bottone, facile da
   non vedere mai su mobile. ── */
#efx-toast-container {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    max-width: 420px;
    padding: 0 1rem;
    pointer-events: none;
}
.efx-toast {
    background: #1a7f4a;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    text-align: center;
    width: 100%;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.efx-toast--error {
    background: var(--efx-sale);
}
.efx-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Pulsante carrello fluttuante permanente (speculare a .wa-float) ── */
.efx-cart-float {
    position: fixed;
    bottom: 28px;
    left: 28px;
    z-index: 900;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--efx-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.efx-cart-float:hover {
    transform: scale(1.06);
    box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.efx-cart-float__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--efx-sale);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
}