/*
 * EasyLife – stili del tema child di Uncode
 *
 * Le pagine sono fatte con gli elementi nativi di Uncode: titoli, pulsanti,
 * colori, sfondi, spazi, angoli e ombre si impostano nel page builder e in
 * Uncode → Theme Options (font, dimensioni dei titoli, palette "EasyLife …").
 *
 * Qui resta solo quello che Uncode non ha:
 *   1. testo scuro sui pulsanti arancio e bianco (Uncode lo forza bianco: illeggibile)
 *   2. campi del modulo Contact Form 7 e margine della scheda su telefono
 *   3. fascia fiducia (classe "el-trust" sulla Riga)
 *   5. riquadri "Foto da inserire" (Testo con <div class="el-ph">)
 *   6. elenchi di link del footer (<ul class="el-links">)
 *   7. barra fissa in basso su mobile e header delle landing
 */

:root{
  --el-text:#1E2850; --el-text-3:#5F6884;
  --el-navy:#242F5A; --el-border:#D9DFE6; --el-border-hover:#8CB5D1;
  --el-bg:#F6F7F9; --el-alt:#EDF3F8; --el-sky:#8CB5D1;
  --el-on-accent:#1E1A12;
  --el-error:#B3261E;
  --el-tile:#E6ECF2; --el-grout:#D3DCE5;
}

/* pulsanti "link" di Uncode (es. "Vedi come funziona"): area di tocco di 44px */
.btn.btn-link{display:inline-flex;align-items:center;min-height:44px}

/* numeri di telefono nei Titoli e nei testi: area di tocco di almeno 44px senza spostare il testo */
.uncode_text_column a[href^="tel:"],.heading-text a[href^="tel:"]{display:inline-block;padding-block:10px;margin-block:-10px}

/* le ancore dei moduli non finiscono sotto il menu fisso */
#el-form-top,#el-form-bottom,#el-numeri,#living{scroll-margin-top:124px}
a[href^="tel:"]{white-space:nowrap;font-variant-numeric:tabular-nums}

/* =========================================================================
 * 1. Pulsante arancio (colore "EasyLife Arancio" della palette)
 *    Uncode mette sempre il testo bianco sui pulsanti: sull'arancio il
 *    contrasto è 2,3:1. Testo scuro = 8,9:1.
 * ====================================================================== */
.btn.btn-color-elaccent,
.btn.btn-color-elaccent:hover,
.btn.btn-color-elaccent:focus,
.btn.btn-color-elaccent:active{color:var(--el-on-accent) !important}
/* pulsante bianco (colore "White" della palette) nelle fasce promo colorate: testo navy */
.btn.btn-color-xsdn,
.btn.btn-color-xsdn:hover,
.btn.btn-color-xsdn:focus,
.btn.btn-color-xsdn:active{color:var(--el-text) !important}

/* sui telefoni i pulsanti del page builder (preventivo, chiamata) vanno a tutta larghezza:
   con i margini laterali di Uncode "Chiama gratis 800 …" non starebbe nello schermo */
@media (max-width:569px){
  .vc_row .btn-container .btn:not(.btn-link){display:flex;justify-content:center;align-items:center;gap:8px;width:100%;white-space:normal;padding-left:16px !important;padding-right:16px !important;margin-left:0 !important;margin-right:0 !important}
  /* 19px: il numero verde resta su una riga e il testo resta "grande" per il contrasto WCAG (≥18,66px in grassetto) */
  .vc_row .btn-container .btn.btn-lg{font-size:19px !important;padding-left:12px !important;padding-right:12px !important}
}

/* =========================================================================
 * 2. Modulo (Contact Form 7)
 * ====================================================================== */
.el-site .wpcf7-form{display:flex;flex-direction:column;gap:16px;margin:0}
.el-site .wpcf7-form > p{margin:0}
.el-site .wpcf7 .el-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.el-site .wpcf7 .el-label{font-weight:700;font-size:.95rem;color:var(--el-text);padding:0;margin:0 0 6px;line-height:1.3;border:0;width:auto;text-transform:none;letter-spacing:0}
.el-site .wpcf7 .el-opt{font-weight:400;color:var(--el-text-3)}
.el-site .wpcf7-form-control-wrap{display:block;min-width:0}
.el-site .wpcf7 :is(input[type="text"],input[type="tel"],input[type="email"],select){
  font:inherit;font-size:1.05rem;padding:12px 14px;border:2px solid var(--el-border);border-radius:6px;background-color:var(--el-bg);color:var(--el-text);width:100%;min-width:0;min-height:56px;margin:0;box-shadow:none}
.el-site .wpcf7 :is(input,select):hover{border-color:var(--el-border-hover)}
.el-site .wpcf7 :is(input,select):focus{border-color:var(--el-navy);outline:none;box-shadow:0 0 0 3px rgba(36,47,90,.15)}
.el-site .wpcf7 .el-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:420px){.el-site .wpcf7 .el-row2{grid-template-columns:minmax(0,1fr)}}
/* privacy e consensi */
.el-site .wpcf7 .el-check{display:flex;flex-direction:column;gap:2px;font-size:.88rem;line-height:1.45}
.el-site .wpcf7 .el-check .wpcf7-list-item{margin:0}
/* Uncode mette .wpcf7-acceptance label in linea con !important: la casella va affiancata al testo */
.el-site .wpcf7 .el-check label:not(#el-x){display:flex !important;gap:12px;align-items:flex-start;cursor:pointer;margin:0;min-height:44px;padding-top:2px}
.el-site .wpcf7 .el-check input{width:22px;height:22px;min-height:0;margin-top:1px;flex:none;accent-color:var(--el-navy)}
/* "Ho letto l'informativa privacy": tutta la riga è il link, sottolineato solo "informativa privacy" */
.el-site .wpcf7 a.el-privacy-line{color:inherit;text-decoration:none;display:inline-block;padding-block:4px}
.el-site .wpcf7 a.el-privacy-line span{text-decoration:underline;text-underline-offset:3px;font-weight:700}
.el-site .wpcf7 a.el-privacy-line:hover span{text-decoration-thickness:2px}
/* errori: messaggio sotto il campo, con icona */
/* Uncode colora i messaggi con l'accento (!important) a 13px: qui rossi e leggibili */
.el-site .wpcf7 span.wpcf7-not-valid-tip:not(#el-x){display:flex;gap:8px;align-items:flex-start;color:var(--el-error) !important;font-size:.92rem;font-weight:700;line-height:1.35;margin-top:6px}
.el-site .wpcf7 span.wpcf7-not-valid-tip::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;background:currentColor;
  -webkit-mask: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'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.01'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: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'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.01'/%3E%3C/svg%3E") center/contain no-repeat}
.el-site .wpcf7 :is(input,select)[aria-invalid="true"]:not(#el-x){border-color:var(--el-error)}
.el-site .wpcf7 input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(179,38,30,.2)}
.el-site .wpcf7 .el-check:has([aria-invalid="true"]) input[type="checkbox"]{outline:2px solid var(--el-error);outline-offset:2px}
.el-site .wpcf7-response-output{margin:0 !important;padding:10px 12px !important;border-radius:4px;font-size:.92rem;font-weight:700}
.el-site .wpcf7 form.invalid .wpcf7-response-output,
.el-site .wpcf7 form.unaccepted .wpcf7-response-output{border-color:var(--el-error) !important;color:var(--el-error)}
.el-site .wpcf7-spinner{display:none}
.el-site .wpcf7 form.submitting .wpcf7-spinner{display:block;margin:0 auto}
.el-site .wpcf7 .wpcf7-submit.btn{margin:0;white-space:normal;line-height:1.25;padding-inline:16px}
/* scheda del modulo (Colonna interna con classe "el-form-card"): su telefono 20px di margine invece di 36 */
@media (max-width:569px){.el-form-card > .uncol > .uncoltable > .uncell{padding:24px 20px !important}}
.el-site .wpcf7 .wpcf7-submit:disabled{opacity:.6;cursor:progress}

/* scheda del modulo con lo sfondo del colore del prodotto (Colonna interna "el-form-card el-form-accent",
   Skin dark): etichette bianche, campi bianchi, messaggi d'errore su fondo bianco per restare leggibili */
.el-form-accent .wpcf7 .el-label,
.el-form-accent .wpcf7 .el-check,
.el-form-accent .wpcf7 a.el-privacy-line{color:#fff}
.el-form-accent .wpcf7 .el-opt{color:#fff}
.el-form-accent .wpcf7 :is(input[type="text"],input[type="tel"],select){background-color:#fff;border-color:transparent}
.el-form-accent .wpcf7 :is(input,select):focus{border-color:var(--el-text);box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.el-form-accent .wpcf7 span.wpcf7-not-valid-tip:not(#el-x){background:#fff;border-radius:4px;padding:6px 8px;width:fit-content}
.el-form-accent .wpcf7 :is(input,select)[aria-invalid="true"]:not(#el-x){border-color:#fff;box-shadow:0 0 0 2px var(--el-error)}
.el-form-accent .wpcf7-response-output{background:#fff;color:var(--el-text)}

/* dati in evidenza della prima schermata (Colonna interna "el-fact", riquadro bianco con bordo)
   e box dei blocchi a più colonne:
   Uncode offre solo 0 o 36px di margine interno, qui serve una via di mezzo */
.el-fact > .uncol > .uncoltable > .uncell{padding:14px 16px !important}
/* box dei blocchi a più colonne (Colonna interna "el-card": passaggi, galleria, modelli) */
.el-card > .uncol > .uncoltable > .uncell{padding:20px !important}

/* =========================================================================
 * 3. Fascia fiducia: Riga con classe "el-trust", Testo con un elenco
 * ====================================================================== */
.el-trust ul{display:flex;flex-wrap:wrap;gap:10px 0;margin:0;padding:0;list-style:none}
.el-trust li{font-weight:500;font-size:.95rem;color:var(--el-text);padding-right:14px;margin:0 14px 0 0;border-right:1px solid var(--el-border);display:flex;align-items:center;gap:10px;line-height:1.4}
.el-trust li:last-child{border-right:0}
.el-trust .el-flag{display:inline-flex;gap:3px}
.el-trust .el-flag i{width:7px;height:16px;transform:skewX(-24deg);border-radius:2px;background:#2BAA5E}
.el-trust .el-flag i + i{background:#E2141B}
@media (max-width:640px){.el-trust li{border-right:0;margin-right:0;width:100%;padding-right:0}}

/* =========================================================================
 * 5. Riquadri "Foto da inserire" e "Video": sostituiscili con un'Immagine singola
 * ====================================================================== */
.el-ph{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/3;display:flex;align-items:flex-end;background-color:var(--el-tile);
  background-image:linear-gradient(var(--el-grout) 2px,transparent 2px),linear-gradient(90deg,var(--el-grout) 2px,transparent 2px);background-size:36px 36px}
.el-ph-wide .el-ph{aspect-ratio:auto;min-height:110px}
.el-ph-label{margin:12px;background:#fff;color:var(--el-text-3);font-size:.78rem;font-weight:500;padding:5px 10px;border-radius:3px;line-height:1.3}

/* =========================================================================
 * 6. Footer: elenchi di link e icone social con area di tocco da 44px
 * ====================================================================== */
ul.el-links:not(#el-x){list-style:none;margin:0;padding:0}
ul.el-links:not(#el-x) li{list-style:none}
ul.el-links li{padding-block:10px;line-height:1.35}
ul.el-links a{display:inline-block;padding-block:12px;margin-block:-12px;overflow-wrap:anywhere;text-decoration:none}
ul.el-links a:hover{text-decoration:underline}
.el-legal-row .uncont{border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
/* icone social (elemento Social di Uncode): area di tocco da 44px */
.uncode-vc-social .social-icon a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.uncode-vc-social .social-icon:first-child a{justify-content:flex-start;min-width:32px}

/* =========================================================================
 * 7. Landing /promo/: niente voci di menu, resta "Chiamaci gratis".
 *    Barra fissa in basso su mobile (aggiunta dal tema, inc/layout.php).
 * ====================================================================== */
.el-landing .menu-primary-inner > li:not(.menu-item-button),
.el-landing .mobile-menu-button{display:none !important}

.el-mbar{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:#fff;border-top:1px solid var(--el-border);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));display:none;gap:10px}
.el-mbar .btn{flex:1;margin:0 !important;min-height:52px;padding:8px 10px !important;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:normal}
@media (max-width:569px){.el-mbar{display:flex}body.el-site{padding-bottom:76px}}
/* tablet e desktop: "isola" centrata che galleggia a 20px dal fondo dello schermo */
@media (min-width:570px){
  .el-mbar{display:flex;left:50%;right:auto;bottom:20px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);padding:10px;border:1px solid var(--el-border);border-radius:16px;box-shadow:0 12px 32px rgba(30,40,80,.18)}
  .el-mbar .btn{flex:0 0 auto;min-width:220px;min-height:48px;padding:8px 24px !important}
  body.el-site{padding-bottom:100px}
}

/* =========================================================================
   Megamenu (Content Block con Menu Block "el-mega"): schede con immagine
   ========================================================================= */
.el-mega li > a{display:flex !important;flex-direction:column;align-items:stretch !important;text-align:left;padding:0 0 4px !important}
.el-mega .menu-media{display:block !important;position:relative !important;width:100% !important;min-width:0 !important;height:auto !important;margin:0 0 12px !important;aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:var(--el-tile);line-height:0}
/* immagine ancorata ai bordi del riquadro: con height:100% su un riquadro alto solo per aspect-ratio
   Safari su iPhone la spingeva in basso e se ne vedeva solo una striscia */
.el-mega .menu-media img{position:absolute;inset:0;display:block;width:100% !important;height:100% !important;max-width:none;object-fit:cover;transition:transform .35s ease}
.el-mega li > a:hover .menu-media img,.el-mega li > a:focus-visible .menu-media img{transform:scale(1.04)}
.el-mega li > a > span:last-child{font-size:16px;line-height:1.3;color:var(--el-text)}
.el-mega li > a:hover > span:last-child{text-decoration:underline;text-underline-offset:3px}
.el-mega .menu-item-description{display:block;margin-top:4px;font-weight:400;font-size:14px;line-height:1.4;color:var(--el-text-3)}
.el-mega .menu-badge{margin-left:8px;vertical-align:2px}
.el-mega .menu-badge__text{font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.el-mega .menu-media img{transition:none}}
/* menu mobile: schede su due colonne, foto intera sopra il nome */
@media (max-width:959px){
  .el-mega{--block_menu_col_s:2 !important;--block_menu_col_m:3 !important}
  .el-mega li > a{padding:6px 0 10px !important}
  .el-mega .menu-media{margin:0 0 8px !important;border-radius:6px}
  .el-mega li > a > span:last-child{font-size:15px}
  .el-mega .menu-item-description{font-size:13px}
  .el-mega .menu-badge{display:inline-block;margin:4px 0 0}
}

/* menu mobile: freccia delle voci servizio grande, in un riquadro del colore del prodotto */
@media (max-width:959px){
  .menu-smart > li.menu-item-has-children > a{display:flex !important;align-items:center;justify-content:space-between;gap:12px}
  .menu-smart > li.menu-item-has-children > a .fa-dropdown{display:inline-flex !important;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;margin:0 !important;position:static !important;border-radius:8px;background:var(--el-navy);color:#fff !important;font-size:22px !important;line-height:1 !important;transition:transform .2s ease}
  .menu-smart > li > a[href$="/vasca-in-doccia/"] .fa-dropdown{background:#116190}
  .menu-smart > li > a[href$="/vasca-con-sportello/"] .fa-dropdown{background:#7A5F89}
  .menu-smart > li > a[href$="/ristrutturazione-bagno/"] .fa-dropdown{background:var(--el-text)}
  .menu-smart > li > a[aria-expanded="true"] .fa-dropdown,.menu-smart > li > a.highlighted .fa-dropdown{transform:rotate(180deg)}
}

/* badge "Promo in corso": pallino rosso lampeggiante e conto alla rovescia (assets/js/easylife.js) */
.el-promo-live{display:inline-flex !important;align-items:center;flex-wrap:wrap;gap:6px 10px}
.el-promo-dot{width:10px;height:10px;border-radius:50%;background:#E5251B;box-shadow:0 0 0 0 rgba(229,37,27,.6);animation:el-blink 1.4s ease-in-out infinite}
.el-promo-timer{font-variant-numeric:tabular-nums;font-weight:700;text-transform:none;letter-spacing:0;padding-left:10px;border-left:1px solid currentColor}
@media (max-width:569px){.el-promo-live{display:inline-grid !important;grid-template-columns:auto auto;row-gap:2px;column-gap:8px}.el-promo-timer{grid-column:2;padding-left:0;border-left:0}}
@keyframes el-blink{0%{opacity:1;box-shadow:0 0 0 0 rgba(229,37,27,.6)}50%{opacity:.35}70%{box-shadow:0 0 0 8px rgba(229,37,27,0)}100%{opacity:1;box-shadow:0 0 0 0 rgba(229,37,27,0)}}
@media (prefers-reduced-motion:reduce){.el-promo-dot{animation:none}.menu-smart .fa-dropdown{transition:none}}

/* pagine prodotto: ritorno al servizio e a tutti i servizi, sotto gli altri modelli */
.btn-container:has(.el-back){display:inline-block;margin-right:20px;margin-top:8px}

/* header desktop su schermi medi (960–1439px): voci più compatte; sotto i 1320px il pulsante
   "Chiamaci gratis" dell'header lascia spazio al menu (i numeri verdi restano in ogni pagina) */
@media (min-width:960px) and (max-width:1439px){
  .menu-horizontal ul.menu-smart > li > a{padding-left:10px !important;padding-right:10px !important;font-size:15px !important}
}
@media (min-width:960px) and (max-width:1319px){
  .menu-horizontal .navbar-nav-last.navbar-cta{display:none !important}
}
@media (min-width:960px) and (max-width:1059px){
  .menu-horizontal ul.menu-smart > li > a{padding-left:8px !important;padding-right:8px !important;font-size:14px !important}
}

/* Living Colors: la foto ambientata occupa metà riga; quando le colonne si impilano le serve un'altezza */
@media (max-width:959px){
  .el-lc-photo .uncoltable{min-height:360px}
}
@media (max-width:569px){
  .el-lc-photo .uncoltable{min-height:260px}
}
/* su mobile Uncode toglie l'altezza uguale alle colonne interne: la ripristino per le card colore, 2 per riga */
@media (max-width:569px){
  .row:has(.el-lc-photo) .row-inner:has(> .el-card){display:flex}
  .row:has(.el-lc-photo) .row-inner > .wpb_column{display:block}
  .row:has(.el-lc-photo) .el-card > .uncol,
  .row:has(.el-lc-photo) .el-card .uncoltable{height:100%}
  .row:has(.el-lc-photo) .el-card .uncell{padding:14px}
  .row:has(.el-lc-photo) .el-card h3{font-size:17px}
  .row:has(.el-lc-photo) .el-card p{font-size:15px}
}

/* interlinea su tutto il sito: paragrafi 1.6, titoli 1.2 */
body.el-site p,
body.el-site .text-lead,
body.el-site .text-lead:not(ul):not(ol) > *{line-height:1.6}
body.el-site :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6),
body.el-site .heading-text :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) > *{line-height:1.2}

/* riga EasyCAD: video YouTube in 16:9; finché il banner cookie lo blocca resta un riquadro con l'avviso */
.el-easycad .wpb_video_wrapper{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--el-tile)}
.el-easycad .wpb_video_wrapper iframe{position:absolute;inset:0;width:100% !important;height:100% !important}
.el-easycad .wpb_video_wrapper:has(iframe:not([src]))::before{content:"Accetta i cookie di marketing per vedere il video di EasyCAD";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--el-text-3);font-size:15px;line-height:1.4}

/* menu mobile: freccia disegnata in CSS (il glifo del font icone non è centrato nel quadrato),
   immagini del sottomenu intere e tutte le voci di primo livello alla stessa altezza */
@media (max-width:959px){
  .menu-primary-inner > li.menu-item > a .fa-dropdown{padding:0 !important;box-sizing:border-box}
  .menu-smart > li.menu-item-has-children > a .fa-dropdown::before{content:"" !important;display:block;width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  .menu-primary-inner > li.menu-item > a{display:flex !important;align-items:center;justify-content:space-between;gap:12px;min-height:62px}
  .menu-primary-inner > li.menu-item:not(.menu-item-has-children) > a .fa-dropdown{display:inline-flex !important;align-items:center;justify-content:center;flex:0 0 44px;width:44px;margin:0 !important;position:static !important}
  .el-mega .menu-media img{object-fit:contain}
}

/* moduli: campo per allegare file (curriculum) nello stile degli altri campi */
.el-site .wpcf7 input[type=file]{display:block;width:100%;padding:10px 12px;background:#f6f7f9;border:2px dashed #d9dfe6;border-radius:6px;font-size:.9rem;color:var(--el-text-3);cursor:pointer}
.el-site .wpcf7 input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:6px;background:var(--el-navy);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.el-site .wpcf7 input[type=file]:focus-visible{outline:2px solid var(--el-navy);outline-offset:2px}

/* =========================================================
   Box doccia: sezione "Misure e personalizzazioni" (Misure · Cristalli e profili · Piatto doccia)
   ========================================================= */
.el-cfg-card > .uncol > .uncoltable > .uncell{border:1px solid var(--el-border)}
.el-cfg-card h3{margin-top:0 !important}
.el-size{margin:12px 0 0}
.el-size:first-child{margin-top:0}
.el-size-label{margin:0 !important;font-size:.85rem;font-weight:700;color:var(--el-text-3);text-transform:uppercase;letter-spacing:.05em}
.el-size-value{margin:2px 0 0 !important;font-size:1.35rem;font-weight:700;line-height:1.3;color:var(--el-text);font-variant-numeric:tabular-nums}
.el-caption{margin:8px 0 0 !important;font-size:.88rem;line-height:1.4;color:var(--el-text-3)}
.el-diagram-col .el-diagram{margin-top:18px}
.el-diagram-col .el-diagram:first-child{margin-top:0}
/* profili e cristalli: elenco verticale con campione colore */
ul.el-options{display:grid;gap:12px;margin:0;padding:0 !important;list-style:none !important}
ul.el-options li{display:flex;align-items:center;gap:16px;margin:0;padding:12px 16px 12px 12px;list-style:none !important;background:#fff;border:1px solid var(--el-border);border-radius:8px}
ul.el-options li > span:last-child{display:flex;flex-direction:column;line-height:1.3}
ul.el-options strong{font-size:1.05rem;color:var(--el-text)}
ul.el-options small{display:block;margin:2px 0 0 !important;font-size:.85rem;line-height:1.3;color:var(--el-text-3)}
.el-swatch{flex:0 0 64px;width:64px;height:64px;border-radius:6px;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(30,40,80,.12)}
.el-swatch-acciaio{background:linear-gradient(135deg,#f4f5f7 0%,#b8bec6 38%,#fdfdfd 55%,#9aa1aa 80%,#dfe2e6 100%)}
.el-swatch-satinato{background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),linear-gradient(135deg,#d6d9dd,#b3b8bf 60%,#c9cdd2)}
.el-swatch-black{background:linear-gradient(135deg,#3a3c40 0%,#151618 55%,#2b2d31 100%)}
.el-tray-name{margin:6px 0 0 !important;font-size:.9rem;font-weight:700;line-height:1.3;color:var(--el-text)}
.el-cfg-misure .el-tray + .el-tray{margin-top:0}
ul.el-feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:28px 0 0;padding:0 !important;list-style:none !important}
ul.el-feat li{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;padding:16px 10px;list-style:none !important;background:#fff;border:1px solid var(--el-border);border-radius:8px;text-align:center;font-size:.88rem;font-weight:600;line-height:1.3;color:var(--el-text)}
ul.el-feat img{width:56px;height:56px;object-fit:contain}
@media (max-width:959px){
  .el-cfg-vetri .row-inner > .wpb_column + .wpb_column{margin-top:24px}
  .el-diagram-col .el-diagram{max-width:240px;margin-left:auto !important;margin-right:auto !important}
  .el-diagram-col .el-caption{text-align:center}
}
@media (max-width:569px){
  ul.el-feat{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  ul.el-feat li{padding:10px 6px;font-size:.78rem}
  ul.el-feat img{width:40px;height:40px}
  .el-tray-name{font-size:.8rem}
  .el-cfg-card > .uncol > .uncoltable > .uncell{padding:20px 18px !important}
  .el-size-value{font-size:1.2rem}
  .el-swatch{flex-basis:52px;width:52px;height:52px}
}

/* =========================================================
   Box doccia: Content Block "Rivestimenti e pavimenti" (copertine delle serie)
   ========================================================= */
.el-rp .el-tiles-title{margin-top:36px !important}
.el-rp .el-tiles + .el-tiles{margin-top:24px}
.el-tile .uncode-single-media img{transition:transform .4s ease}
.el-tile .uncode-single-media-wrapper{overflow:hidden;border-radius:var(--el-radius,8px)}
.el-tile:hover .uncode-single-media img{transform:scale(1.04)}
.el-tile-name{margin:10px 0 0 !important;font-size:1rem;font-weight:700;line-height:1.3;color:var(--el-text)}
.el-tile-sub{margin:2px 0 0 !important;font-size:.85rem;line-height:1.35;color:var(--el-text-3)}
@media (max-width:959px){
  .el-rp .el-tiles .wpb_column{margin-bottom:20px}
  .el-rp .el-tiles + .el-tiles{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.el-tile .uncode-single-media img{transition:none}}
@media (max-width:959px){.el-rp .el-tile-empty{display:none !important}.el-rp .el-tiles-title{margin-top:8px !important}}
/* blocchi che proseguono la sezione (colonne doccia, rubinetteria bagno) */
.el-rp-more .el-tiles-title{margin-top:0 !important}

/* =========================================================
   Titoli nel colore di accento del prodotto (classe el-svc-… sul body, inc/layout.php).
   Restano bianchi nelle righe e colonne scure. Vasca: il viola #8F729E ha contrasto 4,15:1,
   basta solo per i titoli grandi (H1, H2); da H3 in giù il viola scuro #7A5F89 (5,5:1).
   Bagno: l'accento è già il colore dei titoli (#1E2850).
   ========================================================= */
body.el-svc-doccia{--el-head:#116190}
body.el-svc-vasca{--el-head:#8F729E;--el-head-small:#7A5F89}
body.el-svc-bagno{--el-head:#1E2850}
body[class*="el-svc-"] .main-container :is(h1,h2):not(.style-dark *){color:var(--el-head)}
body[class*="el-svc-"] .main-container :is(h3,h4,h5,h6):not(.style-dark *){color:var(--el-head-small,var(--el-head))}