/*-----------------------------------------------------------------------------------
    Della Roscia Lubrificanti Srl — custom.css

    Livello sottile sopra il tema Adina: il layout e i componenti restano quelli
    del tema, qui cambiano solo i colori di brand e le poche regole necessarie
    all'hero diviso sui due settori.
    Caricare SEMPRE dopo main.css.

    01. Design tokens
    02. Applicazione colori al tema
    03. Hero diviso (2 settori)
    04. Icone nei box del tema
    05. Correzioni minori
    06. Movimento
    07. Preloader
    08. Aree del sito (Lubrificanti / Abbigliamento)
    09. Header: menu centrato, schede d'area, header chiaro Abbigliamento
-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  01. DESIGN TOKENS
/*----------------------------------------*/
:root {
   /* Primario — blu navy del marchio */
   --dr-primary: #1b3668;
   --dr-primary-dark: #12264a;
   --dr-primary-darker: #0c1a33;

   /* Secondario — oro di DR Lubrificanti / DR Wear */
   --dr-secondary: #c8932a;
   --dr-secondary-light: #e0b45c;

   /* Accent — ambra della goccia d'olio */
   --dr-accent: #e8a317;

   /* Oro per i testi su fondo chiaro: #c8932a su bianco arriva solo a 2,7:1.
      text 4,8:1 (testi piccoli), strong 3,9:1 (numeri e titoli grandi) */
   --dr-secondary-text: #94691a;
   --dr-secondary-strong: #a8791c;
}

/*----------------------------------------*/
/*  02. APPLICAZIONE COLORI AL TEMA
/*----------------------------------------*/
:root {
   /* Il tema usa questo token per titoli, bottoni e fondali: lo portiamo sul navy */
   --td-theme-primary: #1b3668;
   --td-common-bg: #12264a;
}

.td-black-bg { background: var(--dr-primary-dark); }
.td-black-bg-2 { background: var(--dr-primary-darker); }
.td-header-sticky.td-header-sticky-black { background: var(--dr-primary-dark); }

/* L'occhiello di sezione e gli accenti passano all'oro */
.td-section-title-pre { color: var(--dr-secondary-text); }
.td-hero-4-title span { color: var(--dr-secondary-light); }
.td-brand-counter-title { color: var(--dr-secondary-strong); }
.td-btn-4 { background: var(--dr-secondary); color: var(--dr-primary-darker); }
.td-btn-4:hover { background: var(--dr-accent); color: var(--dr-primary-darker); }

/*----------------------------------------*/
/*  03. HERO DIVISO (2 SETTORI)
/*----------------------------------------*/
.dr-hero-split { display: flex; flex-wrap: wrap; }

.dr-hero-half {
   position: relative;
   flex: 1 1 50%;
   max-width: 50%;
}
.dr-hero-half + .dr-hero-half { border-left: 1px solid rgba(255, 255, 255, .14); }

/* Tutta la meta e un link. Il bottone interno e diventato uno <span>: un <a>
   dentro un <a> non e valido, e comunque punterebbe allo stesso posto. */
a.dr-hero-half {
   display: block;
   color: inherit;
   text-decoration: none;
   cursor: pointer;
}
a.dr-hero-half:focus-visible {
   outline: 2px solid var(--dr-secondary-light);
   outline-offset: -8px;
}

.dr-hero-half .td-hero-4-singles {
   position: relative;
   height: 100%;
   padding-left: 6%;
   padding-right: 6%;
   /* Il blocco marchio + titolo + bottone sta al centro della meta,
      sia in orizzontale sia in verticale */
   display: flex;
   align-items: center;
   justify-content: center;
}
.dr-hero-half .td-hero-4-content {
   width: 100%;
   text-align: center;
}
/* Velo scuro tra foto e testo: ::after per restare sopra a .td-hero-4-bg-home */
.dr-hero-half .td-hero-4-singles::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: rgba(12, 26, 51, .58);
   transition: background .6s cubic-bezier(.16, 1, .3, 1);
}
/* Sulla meta attiva il velo si alleggerisce: il video si legge meglio e
   l'altra meta arretra da sola, senza doverla scurire. */
.dr-hero-half:hover .td-hero-4-singles::after { background: rgba(12, 26, 51, .38); }

/* Il video copre la foto di sfondo restando sotto al velo scuro: tutti e tre
   i livelli stanno a z-index -1, quindi a decidere e l'ordine nel markup
   (foto, video, ::after). La foto resta come rete di sicurezza: se il browser
   non disegna il primo fotogramma, o il video non carica, si vede quella. */
.dr-hero-video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -1;
   pointer-events: none;
}

.dr-hero-split .td-hero-4-title { font-size: 56px; }

/* La seconda parte del titolo va su una riga propria */
.dr-hero-split .td-hero-4-title span { display: block; }

/* Marchi trasparenti, senza riquadro: i riempimenti bianchi interni li
   tengono leggibili sopra il velo scuro */
.dr-hero-mark {
   display: inline-block;
   height: 86px;
   width: auto;
}

/*--- Hover sulla meta: marchio, titolo e bottone rispondono insieme ---------*/
/* Le transizioni vanno scritte annidate: marchio e titolo portano anche la
   classe .dr-reveal, che dichiara una sua transition, e vincerebbe. */
.dr-hero-half .dr-hero-mark {
   transition: transform .7s cubic-bezier(.16, 1, .3, 1),
               opacity .9s cubic-bezier(.16, 1, .3, 1);
}
.dr-hero-half:hover .dr-hero-mark { transform: translateY(-8px); }

.dr-hero-half .td-hero-4-title {
   transition: transform .7s cubic-bezier(.16, 1, .3, 1),
               opacity .9s cubic-bezier(.16, 1, .3, 1);
}
.dr-hero-half:hover .td-hero-4-title { transform: translateY(-4px); }

/* Il bottone e il punto di arrivo: passa all'oro di brand e si stacca */
.dr-hero-btn {
   transition: background .45s cubic-bezier(.16, 1, .3, 1),
               color .45s cubic-bezier(.16, 1, .3, 1),
               transform .7s cubic-bezier(.16, 1, .3, 1);
}
.dr-hero-half:hover .dr-hero-btn {
   background: var(--dr-secondary);
   color: var(--dr-primary-darker);
   transform: translateY(-4px);
}

/* La freccia del tema si anima al passaggio sul bottone: qui deve partire
   ovunque si passi dentro la meta. */
.dr-hero-half:hover .td-arrow-angle path:nth-of-type(1) {
   transform: translateX(var(--qode-hover-move-x)) translateY(calc(-1 * var(--qode-hover-move-y)));
   opacity: 0;
   transition-delay: 0s, 0s;
}
.dr-hero-half:hover .td-arrow-angle path:nth-of-type(2) {
   transform: translateX(0) translateY(0);
   opacity: 1;
   transition-delay: .15s, .15s;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
   .dr-hero-split .td-hero-4-title { font-size: 46px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
   .dr-hero-split .td-hero-4-title { font-size: 38px; }
   .dr-hero-mark { height: 76px; }
}

@media (max-width: 991px) {
   .dr-hero-half,
   .dr-hero-half + .dr-hero-half {
      flex: 1 1 100%;
      max-width: 100%;
      border-left: 0;
   }
   .dr-hero-half + .dr-hero-half { border-top: 1px solid rgba(255, 255, 255, .14); }
   .dr-hero-split .td-hero-4-singles {
      padding-top: 120px;
      padding-bottom: 110px;
      padding-left: 30px;
      padding-right: 30px;
   }
   .dr-hero-split .td-hero-4-title { font-size: 44px; }
   .dr-hero-mark { height: 72px; }
}

@media (max-width: 575px) {
   .dr-hero-split .td-hero-4-singles { padding-top: 90px; padding-bottom: 80px; }
   .dr-hero-split .td-hero-4-title { font-size: 34px; }
   .dr-hero-mark { height: 60px; }
}

/*--- Index: pagina di scelta a tutto schermo --------------------------------*/
.dr-splash { min-height: 100vh; min-height: 100svh; }
.dr-splash .dr-hero-half { min-height: 100vh; min-height: 100svh; }
.dr-splash .td-hero-4-singles { padding-top: 60px; padding-bottom: 90px; }
.dr-splash .dr-hero-mark { height: 150px; }

.dr-splash-legal {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 6px 22px;
   padding: 16px 20px;
   font-size: 13px;
   line-height: 1.5;
   color: rgba(255, 255, 255, .85);
   background: linear-gradient(0deg, rgba(9, 20, 40, .7), rgba(9, 20, 40, 0));
   pointer-events: none;
}
.dr-splash-legal a { color: inherit; pointer-events: auto; }
.dr-splash-legal a:hover { color: #fff; }

@media only screen and (min-width: 992px) and (max-width: 1399px) {
   .dr-splash .dr-hero-mark { height: 120px; }
}
@media (max-width: 991px) {
   .dr-splash .dr-hero-half { min-height: 50vh; min-height: 50svh; }
   .dr-splash .td-hero-4-singles { padding-top: 50px; padding-bottom: 50px; }
   .dr-splash .dr-hero-mark { height: 96px; }
   .dr-splash .td-hero-4-title { font-size: 36px; }
   /* Impilata, la barra scorre sotto la seconda meta invece di coprirla */
   .dr-splash-legal { position: relative; flex: 1 1 100%; background: var(--dr-primary-darker); }
}
@media (max-width: 575px) {
   .dr-splash .dr-hero-mark { height: 76px; }
   .dr-splash .td-hero-4-title { font-size: 30px; }
   .dr-splash-legal { font-size: 12px; gap: 4px 16px; }
}

/*----------------------------------------*/
/*  04. ICONE NEI BOX DEL TEMA
/*----------------------------------------*/
/* Le icone SVG originali del tema sono a tema finanziario: negli stessi
   contenitori usiamo le icone Font Awesome Pro gia incluse nel tema. */
.dr-icon {
   font-size: 56px;
   line-height: 1;
   color: var(--dr-primary);
}
.dr-icon-sm { font-size: 46px; }

.dr-wear-mark { display: block; height: 78px; width: auto; }

/* Le foto dei settori hanno proporzioni diverse fra loro: nel componente
   del tema vanno uniformate al formato previsto dal template (4:5). */
.td-service-3-thumb img {
   aspect-ratio: 4 / 5;
   object-fit: cover;
}

/* Le foto del tema sono scure, le nostre no: serve un velo perche il testo
   bianco resti leggibile quando la foto si scopre. */
.td-service-3-thumb::after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(12, 26, 51, .66);
}

/* I titoli italiani sono piu lunghi di quelli del template: 46px sfora la cella */
.td-service-3-title { font-size: 36px; }
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
   .td-service-3-title { font-size: 32px; }
}

/* --- Banda "Le linee di prodotto" (#linee) ------------------------------- */

/* Il tema rimanda a --tp-common-black-12, che non e mai dichiarato: senza
   questo fallback la banda resta senza fondo finche non carica la foto. */
#service-bg-img { background-color: var(--dr-primary-darker); }

/* Il velo del tema e grigio ardesia: lo portiamo sul navy di brand */
#service-bg-img .service-bg::after { background-color: rgba(12, 26, 51, .55); }

/* Le foto dei prodotti hanno zone molto chiare proprio dove il tema appoggia i
   titoli: una sfumatura verso il basso li tiene leggibili su tutte e sei. */
#service-bg-img::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg,
      rgba(12, 26, 51, .25) 0%,
      rgba(12, 26, 51, .10) 40%,
      rgba(9, 20, 40, .88) 100%);
}

/* L'altezza della banda la detta il padding sotto al numero: nel tema la
   sezione sta da sola, qui ha sopra il titolo e ne risultava sproporzionata.
   Sotto i 1200px il tema e gia a 100px e le colonne si impilano: non si tocca. */
@media (min-width: 1400px) {
   #linee .td-service-number { padding-bottom: 210px; }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
   #linee .td-service-number { padding-bottom: 100px; }
}

/* Il tema affianca 5 colonne, noi 6: sopra i 1600px il titolo va rimpicciolito */
@media (min-width: 1600px) {
   #linee .td-service-title { font-size: 26px; }
}

/* L'occhiello verticale nel tema e ruotato e riallineato a mano colonna per
   colonna, con offset tarati sulla lunghezza dell'etichetta inglese. Con
   writing-mode la posizione non dipende piu dal testo e vale per tutte. */
#linee .td-service-cetagory {
   writing-mode: vertical-rl;
   transform: none;
   right: 0;
   top: 40px;
   padding: 11px 6px;
}

/* Il blocco abbigliamento usa lo sfondo del tema virato sul navy di brand */
.td-expreance-item::before { background: var(--dr-primary-darker); }
/* Sotto i 375px "Abbigliamento" a 50px esce dallo schermo */
@media (max-width: 575px) {
   .td-expreance-main-title { font-size: clamp(34px, 11.5vw, 50px); }
}

/* Tutta la riga e cliccabile: nel tema .td-expreance-item e un <div>, qui e un
   <a>. La freccia resta decorativa perche un <a> dentro un <a> non e valido. */
a.td-expreance-item {
   display: block;
   color: inherit;
   text-decoration: none;
   cursor: pointer;
}
a.td-expreance-item:focus-visible {
   outline: 2px solid var(--dr-secondary-light);
   outline-offset: -6px;
}

.td-expreance-arrow {
   display: inline-block;
   color: var(--td-common-white);
   opacity: .2;
   transition: all .3s 0s ease-out;
   position: relative;
   z-index: 1;
}
.td-expreance-content-wrap:hover .td-expreance-arrow { opacity: 1; }

/* Da tastiera il focus deve scoprire la riga come fa il passaggio del mouse */
.td-expreance-content-wrap:focus-within .td-expreance-item { border-color: transparent; }
.td-expreance-content-wrap:focus-within .td-expreance-item::before { height: 0; top: auto; bottom: 0; }
.td-expreance-content-wrap:focus-within .td-expreance-thumb { opacity: 1; visibility: visible; }
.td-expreance-content-wrap:focus-within .td-expreance-title-pre,
.td-expreance-content-wrap:focus-within .td-expreance-btn-wrap p { opacity: 1; visibility: visible; }
.td-expreance-content-wrap:focus-within .td-expreance-arrow { opacity: 1; }
.td-expreance-content-wrap:focus-within .td-expreance-title span { color: var(--td-common-white); }

/* Senza hover (touch) i componenti del tema resterebbero muti: foto e testi
   sono sempre visibili su tablet e smartphone. */
@media (hover: none) {
   .td-service-3-item::before { width: 0; left: auto; right: 0; }
   .td-service-3-thumb { opacity: 1; }
   .td-service-3-para p { opacity: .8; visibility: visible; }
   .td-service-3-title,
   .td-service-3-title .grey,
   .td-service-3-title a { color: #fff; }
   .td-service-3-number :is(h2, .dr-hx) {
      -webkit-text-fill-color: #fff;
      -webkit-text-stroke-color: #fff;
   }

   .td-expreance-thumb { opacity: 1; visibility: visible; }
   .td-expreance-item { border-color: transparent; }
   .td-expreance-item::before { height: 0; top: auto; bottom: 0; }
   .td-expreance-title-pre,
   .td-expreance-btn-wrap p { opacity: 1; visibility: visible; }
   .td-expreance-arrow { opacity: 1; }

   #linee .td-service-content { transform: none; }
   #linee .td-service-content-inner { opacity: 1; visibility: visible; }
   #linee .td-service-number { display: none; }
}

/* Voci di menu piu compatte: in italiano sono piu lunghe dell'originale */
@media only screen and (min-width: 992px) and (max-width: 1799px) {
   .td-main-menu nav ul li { margin-left: 22px; }
}
.td-header-4-email a,
.td-header-right-2-btn .td-btn { white-space: nowrap; }

/*----------------------------------------*/
/*  05. CORREZIONI MINORI
/*----------------------------------------*/
/* Il logo Della Roscia e molto piu grande di quello fornito col tema:
   nei contenitori del tema va vincolato in altezza. */
.td-header-logo img { max-height: 54px; width: auto; }
.tdoffcanvas__logo img { max-height: 56px; width: auto; }
.td-footer-logo img { max-height: 108px; width: auto; }
.td-brand-logo-2 { max-height: 70px; max-width: 72%; width: auto; }

/* Il tema applica capitalize alle voci di menu: sulle voci italiane va tolto */
.td-main-menu nav ul li a,
.td-main-menu-mobile ul li > a { text-transform: none; }

/* Il pannello offcanvas e parcheggiato a right:-100% e su mobile genera
   qualche px di scroll orizzontale. L'header sticky usa position:fixed. */
body { overflow-x: hidden; }

/*----------------------------------------*/
/*  06. MOVIMENTO (vedi assets/js/dr-motion.js)
/*----------------------------------------*/
/* Bootstrap imposta scroll-behavior:smooth su :root. Ogni window.scrollTo()
   diventerebbe cosi un'animazione nativa che riparte a ogni frame e blocca
   sia l'inerzia sia lo scorrimento sugli anchor: l'easing lo gestiamo in JS.
   Serve :root (non html) per pareggiare la specificita della regola Bootstrap. */
:root { scroll-behavior: auto; }

/* Ingresso: fade + traslazione, con curva lenta in uscita e ritardo
   impostato via --dr-delay dal motore JS. */
.dr-reveal {
   opacity: 0;
   transition: opacity .9s cubic-bezier(.16, 1, .3, 1),
               transform 1.05s cubic-bezier(.16, 1, .3, 1);
   transition-delay: var(--dr-delay, 0ms);
   will-change: opacity, transform;
}
.dr-from-bottom { transform: translate3d(0, 46px, 0); }
.dr-from-top { transform: translate3d(0, -32px, 0); }
.dr-from-left { transform: translate3d(-54px, 0, 0); }
.dr-from-right { transform: translate3d(54px, 0, 0); }
.dr-from-fade { transform: none; }

.dr-reveal.dr-in {
   opacity: 1;
   transform: translate3d(0, 0, 0);
}

/* Una volta entrato l'elemento torna libero, cosi gli hover del tema
   non restano bloccati da will-change. */
.dr-reveal.dr-in { will-change: auto; }

/* Chi ha chiesto meno animazioni vede tutto fermo e visibile */
.dr-no-motion .dr-reveal,
.dr-no-motion .wow {
   opacity: 1 !important;
   transform: none !important;
   transition: none !important;
   animation: none !important;
}

/* Micro-movimenti coerenti sui blocchi che il tema anima all'hover */
.td-service-3-thumb img,
.td-expreance-thumb img {
   transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.td-service-3-item:hover .td-service-3-thumb img { transform: scale(1.05); }

.td-brand-logo-wrap-2 img {
   transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
}

/* Il back-to-top del tema entra con la stessa curva */
.back-to-top-wrapper {
   transition: opacity .5s cubic-bezier(.16, 1, .3, 1),
               visibility .5s cubic-bezier(.16, 1, .3, 1),
               transform .5s cubic-bezier(.16, 1, .3, 1);
}

 
@media (min-width: 992px) {
   ._widget_center{
      padding-right: 56px;
   }
}

.td-main-menu-2 nav ul li a{
   padding: 16px 0;
}
/* Con il padding ridotto la linea del tema (bottom:30px) tagliava il testo:
   la riportiamo sotto la parola, nel colore della voce, e resta sulla corrente */
.td-main-menu-2 nav ul li a::before {
   bottom: 12px;
   opacity: 1;
   background: currentColor;
}
.td-main-menu-2 nav ul li a[aria-current="page"]::before { width: 100%; }

.td-faq-4-item .td-faq-4-btn .accordion-btn{
   top: 37px;
}

.td-footer-widget-para{
   padding-left: 20px;
   padding-right: 20px;
   font-size: 25px;
}

.td-footer-widget-content ul li a { font-size: 24px; }

.td-header-right-border::before{
   display: none;
}

.td-header-right-border{
   padding-left: 40px;
}

.td-header-right,
.td-header-4-time span{
   opacity: 0.8;
   color: #fff;
}

.col.td-service-border.service__item-8.dr-reveal.dr-from-bottom.dr-in.active {
    backdrop-filter: blur(12px);
}
/*----------------------------------------*/
/*  07. PRELOADER
/*----------------------------------------*/
/* Al posto dei pilastrini animati del tema, una barra che si riempie.
   Il riempimento lo pilota dr-motion.js sui contenuti effettivamente caricati. */
.dr-loader {
   width: min(280px, 60vw);
   height: 3px;
   background: rgba(27, 54, 104, .14);
   border-radius: 3px;
   overflow: hidden;
}
.dr-loader-fill {
   display: block;
   width: 0;
   height: 100%;
   background: var(--dr-primary);
   border-radius: 3px;
   transition: width .3s cubic-bezier(.16, 1, .3, 1);
}

/* Al load main.js mette display:none inline di colpo: !important lo tiene a
   schermo il tempo della dissolvenza, cosi la barra si vede arrivare in fondo. */
#preloader { transition: opacity .45s ease; }
#preloader.dr-loader-done {
   display: flex !important;
   opacity: 0;
}
/* Pagine successive della visita: niente preloader (classe messa in <head>) */
.dr-seen #preloader { display: none !important; }

/*----------------------------------------*/
/*  08. AREE DEL SITO (Lubrificanti / Abbigliamento)
/*----------------------------------------*/

/*--- Header: cambio area e voce corrente -----------------------------------*/
.dr-area-switch a[aria-current] { color: var(--dr-secondary-light); }
.td-main-menu-content ul li > a[aria-current="page"] { color: var(--dr-secondary-light); }

/*--- Hero della home di area ----------------------------------------------*/
.dr-area-hero .td-hero-4-singles {
   position: relative;
   min-height: 82vh;
   padding: 170px 6% 140px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}
.dr-area-hero .td-hero-4-singles::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: rgba(12, 26, 51, .62);
}
.dr-area-hero .td-hero-4-content { max-width: 980px; }
.dr-area-hero .td-hero-4-title { font-size: 64px; }
.dr-area-hero .td-hero-4-title span { display: block; }
.dr-area-hero-pre { display: block; color: var(--dr-secondary-light); }
.dr-area-hero-para {
   max-width: 640px;
   margin-left: auto;
   margin-right: auto;
   font-size: 18px;
   line-height: 1.6;
   color: rgba(255, 255, 255, .82);
}
.dr-area-hero-btns {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   justify-content: center;
   align-items: center;
}

@media only screen and (min-width: 992px) and (max-width: 1399px) {
   .dr-area-hero .td-hero-4-title { font-size: 52px; }
}
@media (max-width: 991px) {
   .dr-area-hero .td-hero-4-singles { min-height: 70vh; padding: 140px 24px 100px; }
   .dr-area-hero .td-hero-4-title { font-size: 40px; }
}
@media (max-width: 575px) {
   .dr-area-hero .td-hero-4-title { font-size: 32px; }
   .dr-area-hero-para { font-size: 16px; }
}

/*--- Blocco Filtri ---------------------------------------------------------*/
/* Le due foto hanno proporzioni diverse da quelle previste dal componente */
.dr-filtri .td-about-4-thumb-2 img {
   width: 600px;
   max-width: 100%;
   aspect-ratio: 3 / 4;
   object-fit: cover;
}
.dr-filtri .td-about-4-thumb img { aspect-ratio: 23 / 16; object-fit: cover; }

.dr-check-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px 24px;
   padding: 0;
   list-style: none;
}
.dr-check-list li { color: var(--td-common-black); font-weight: 500; }
.dr-check-list i { color: var(--dr-secondary-text); margin-right: 8px; }
@media (max-width: 575px) {
   .dr-check-list { grid-template-columns: 1fr; }
}

.dr-logo-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 18px 28px;
}
.dr-logo-row img { height: 42px; width: auto; max-width: 130px; object-fit: contain; }

/*--- Punti di forza sotto il titolo delle categorie -----------------------*/
.dr-benefits {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 14px 44px;
   margin: 32px 0 0;
   padding: 0;
   list-style: none;
}
.dr-benefits li { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 500; color: var(--td-common-black); }
.dr-benefits .dr-icon { font-size: 28px; color: var(--dr-secondary-text); }
@media (max-width: 767px) {
   .dr-benefits { flex-direction: column; align-items: flex-start; width: fit-content; margin-inline: auto; }
   .dr-benefits li { font-size: 16px; text-align: left; }
}

/* Frase di servizio in evidenza (Filtrazione) */
.dr-highlight {
   display: flex;
   align-items: center;
   gap: 18px;
   padding: 22px 26px;
   font-size: 18px;
   font-weight: 500;
   line-height: 1.5;
   color: var(--td-common-white);
   background: var(--dr-primary);
   border-left: 4px solid var(--dr-secondary);
}
.dr-highlight .dr-icon { flex: none; font-size: 32px; color: var(--dr-secondary); }

/*--- Blocco Prodotti chimici ----------------------------------------------*/
.dr-chimici .td-service-6-item,
.dr-features .td-service-6-item {
   height: calc(100% - 60px);
   background: var(--td-common-white);
}
.dr-chimici .td-service-6-title,
.dr-features .td-service-6-title { font-size: 28px; line-height: 1.15; }
.dr-chimici .dr-icon,
.dr-features .dr-icon { font-size: 48px; }
.dr-chimici-intro {
   display: flex;
   align-items: center;
   gap: 30px;
}
.dr-chimici-intro p { margin: 0; }
.dr-chimici-intro img { height: 64px; width: auto; flex: none; }
@media (max-width: 575px) {
   .dr-chimici-intro { flex-direction: column; align-items: flex-start; gap: 16px; }
   .dr-chimici .td-service-6-title { font-size: 24px; }
}
.dr-inline-link { color: var(--dr-primary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dr-inline-link:hover { color: var(--dr-secondary-text); }

/* Batterie: fascia unica sotto la griglia, con il marchio trattato */
.dr-battery-band {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px 60px;
   margin-bottom: 60px;
   padding: 40px 50px;
   background: var(--td-common-white);
   border-left: 4px solid var(--dr-secondary);
}
.dr-battery-band-text { display: flex; align-items: center; gap: 30px; }
.dr-battery-band-text p { margin: 0; }
.dr-battery-band-icon { flex: none; }
.dr-battery-band-brand {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   flex: none;
   font-size: 14px;
   color: var(--td-grey-2);
}
.dr-battery-band-brand img { height: 56px; width: auto; transition: transform .3s; }
.dr-battery-band-brand:hover { color: var(--dr-primary); }
.dr-battery-band-brand:hover img { transform: scale(1.06); }
.dr-battery-band-brand:hover .td-arrow-angle path:nth-of-type(1) {
   transform: translateX(var(--qode-hover-move-x)) translateY(calc(-1 * var(--qode-hover-move-y)));
   opacity: 0;
   transition-delay: 0s, 0s;
}
.dr-battery-band-brand:hover .td-arrow-angle path:nth-of-type(2) {
   transform: translateX(0) translateY(0);
   opacity: 1;
   transition-delay: .15s, .15s;
}
@media (max-width: 767px) {
   .dr-battery-band { flex-direction: column; align-items: flex-start; padding: 30px 24px; }
   .dr-battery-band-text { flex-direction: column; align-items: flex-start; gap: 16px; }
   .dr-battery-band-brand { align-items: flex-start; }
}

/*--- Griglia marchi: logo mancante e rimando alla pagina Brand ------------*/
.dr-brand-wordmark {
   display: flex;
   align-items: center;
   justify-content: center;
}
.dr-brand-wordmark > span:first-child {
   font-size: 26px;
   font-weight: 800;
   letter-spacing: .06em;
   color: var(--dr-primary);
}

a.dr-brand-cta {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   color: var(--td-common-black);
   transition: background .45s cubic-bezier(.16, 1, .3, 1), color .45s cubic-bezier(.16, 1, .3, 1);
}
.dr-brand-cta-title { font-size: 26px; font-weight: 600; }
.dr-brand-cta-link { font-size: 15px; color: var(--td-grey-2); transition: color .45s cubic-bezier(.16, 1, .3, 1); }
a.dr-brand-cta:hover { background: var(--dr-primary); color: #fff; }
a.dr-brand-cta:hover .dr-brand-cta-link { color: var(--dr-secondary-light); }

/*--- Bollino WhatsApp (guida widget-whatsapp-sergio.md) ------------------*/
/* right 22px: stesso asse verticale del tasto "torna su" del tema */
.wa-link {
   width: 40px;
   height: 40px;
   line-height: 40px;
   background-color: #25D366;
   color: #fff !important;
   font-size: 16px;
   text-align: center;
   z-index: 99;
   position: fixed;
   bottom: 80px;
   right: 22px;
   display: none;
   transition: all 0.5s ease;
}
.wa-link:hover {
   transform: scale(1.1);
   background-color: #128C7E;
}
@media (max-width: 768px) {
   .wa-link {
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 20px;
   }
}

/* Bottone secondario sui fondi scuri: stesse misure di .td-btn-7, solo contorno */
.dr-btn-ghost {
   display: inline-flex;
   align-items: center;
   padding: 18px 24px;
   font-size: 14px;
   font-weight: 600;
   line-height: 14px;
   color: #fff;
   border: 1px solid rgba(255, 255, 255, .55);
   transition: background .45s cubic-bezier(.16, 1, .3, 1), color .45s cubic-bezier(.16, 1, .3, 1), border-color .45s cubic-bezier(.16, 1, .3, 1);
}
.dr-btn-ghost:hover {
   background: #fff;
   border-color: #fff;
   color: var(--dr-primary);
}

/*--- Intestazione delle pagine interne --------------------------------------*/
/* Nel tema l'header e trasparente sopra la testata: qui e pieno, quindi lo
   spazio sopra il titolo si riduce. Il velo tiene il titolo leggibile sulla foto. */
.dr-breadcrumb { position: relative; padding-top: 150px; }
.dr-breadcrumb::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(12, 26, 51, .78), rgba(12, 26, 51, .55));
}
.dr-breadcrumb > * { position: relative; }
.dr-breadcrumb .td-breadcrumb-list a { color: inherit; }
/* il tema mette le iniziali maiuscole: "Calzature e DPI", non "Calzature E DPI" */
.dr-breadcrumb .td-breadcrumb-title { text-transform: none; }
@media (max-width: 1679px) {
   .dr-breadcrumb { padding-top: 100px; }
   .dr-breadcrumb .td-breadcrumb-title { font-size: 66px; }
   .dr-breadcrumb .td-breadcrumb-big-text { padding-top: 30px; }
}
@media (max-width: 991px) {
   .dr-breadcrumb { padding-top: 80px; }
   .dr-breadcrumb .td-breadcrumb-title { font-size: 52px; }
}

/*--- Pagina Brand: schede con rimando al sito ufficiale ------------------*/
.dr-brand-grid { padding-left: 1px; padding-top: 1px; }
a.dr-brand-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100%;
   padding: 34px 24px 32px;
   text-align: center;
   color: var(--td-common-black);
   transition: background .45s cubic-bezier(.16, 1, .3, 1);
}
.dr-brand-card-sector {
   align-self: flex-start;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--dr-secondary-text);
}
.dr-brand-card-logo {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 130px;
   width: 100%;
   margin: 18px 0 20px;
}
.dr-brand-card-logo img {
   max-height: 90px;
   max-width: 72%;
   width: auto;
   object-fit: contain;
   transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.dr-brand-card-wordmark {
   font-size: 26px;
   font-weight: 800;
   letter-spacing: .06em;
   color: var(--dr-primary);
}
.dr-brand-card-name { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.dr-brand-card-link {
   font-size: 14px;
   line-height: 1.5;
   color: var(--td-grey-2);
   transition: color .45s cubic-bezier(.16, 1, .3, 1);
}
/* Griglia compatta (home Abbigliamento, 4 per riga): schede più basse */
.dr-brand-grid-compact a.dr-brand-card { padding: 26px 14px 24px; }
.dr-brand-grid-compact .dr-brand-card-sector { padding-left: 6px; }
.dr-brand-grid-compact .dr-brand-card-link { font-size: 13px; text-wrap: balance; }
.dr-brand-grid-compact .dr-brand-card-logo { height: 100px; margin: 12px 0 14px; }
.dr-brand-grid-compact .dr-brand-card-logo img { max-height: 70px; max-width: 78%; }
.dr-brand-grid-compact .dr-brand-card-name { font-size: 18px; }
a.dr-brand-card:hover { background: var(--td-grey-bg, #F5F9FF); }
a.dr-brand-card:hover .dr-brand-card-logo img { transform: scale(1.06); }
a.dr-brand-card:hover .dr-brand-card-link { color: var(--dr-primary); }
a.dr-brand-card:focus-visible { outline: 2px solid var(--dr-secondary-text); outline-offset: -4px; }
/* Freccia del tema: parte al passaggio su tutta la scheda */
a.dr-brand-card:hover .td-arrow-angle path:nth-of-type(1) {
   transform: translateX(var(--qode-hover-move-x)) translateY(calc(-1 * var(--qode-hover-move-y)));
   opacity: 0;
   transition-delay: 0s, 0s;
}
a.dr-brand-card:hover .td-arrow-angle path:nth-of-type(2) {
   transform: translateX(0) translateY(0);
   opacity: 1;
   transition-delay: .15s, .15s;
}
.dr-brand-note { color: var(--td-grey-2); }
.dr-brand-note a { color: var(--dr-primary); font-weight: 600; text-decoration: underline; }

/*--- Pagina Azienda --------------------------------------------------------*/
.dr-gallery .td-poerfolio-thumb img { aspect-ratio: 4 / 3; object-fit: cover; }
/* Frecce della galleria: al centro delle foto (le foto hanno 30px di margine sotto) */
.dr-gallery > .container-fluid > .row { position: relative; }
.dr-gallery-arrow {
   position: absolute;
   top: calc(50% - 15px);
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 56px;
   height: 56px;
   margin-top: -28px;
   padding: 0;               /* la .row di Bootstrap da ai figli il padding del gutter */
   border: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, .92);
   color: var(--dr-primary-darker);
   box-shadow: 0 10px 30px rgba(12, 26, 51, .18);
   transition: background .35s cubic-bezier(.16, 1, .3, 1), color .35s cubic-bezier(.16, 1, .3, 1);
}
.dr-gallery-arrow:hover,
.dr-gallery-arrow:focus-visible { background: var(--dr-primary); color: #fff; }
.dr-gallery-prev { left: calc(30px + var(--bs-gutter-x) * .5); }   /* la .row sborda di mezzo gutter */
.dr-gallery-next { right: calc(30px + var(--bs-gutter-x) * .5); }
@media (max-width: 767px) {
   .dr-gallery-arrow { width: 44px; height: 44px; margin-top: -22px; }
   .dr-gallery-prev { left: calc(12px + var(--bs-gutter-x) * .5); }
   .dr-gallery-next { right: calc(12px + var(--bs-gutter-x) * .5); }
}
.dr-history .td-history-year { font-size: 76px; }
/* il tema mette le iniziali maiuscole: in italiano non si usa */
.dr-history .td-history-title { text-transform: none; }
@media (max-width: 575px) {
   .dr-history .td-history-year { font-size: 60px; }
}
.dr-counter .td-counter-thumb img { min-height: 520px; }
.dr-counter .td-counter-logo :is(h3, .dr-hx) { color: var(--dr-primary); }
/* Quattro contatori: numeri un po' più piccoli e unità di misura accanto */
.dr-counter .td-counter-count { font-size: clamp(44px, 3.6vw, 60px); white-space: nowrap; }
.dr-counter-unit { font-size: .45em; font-weight: 500; line-height: 1; margin-left: 6px; }
@media (max-width: 1199px) {
   .dr-counter .td-counter-count-wrap { flex-wrap: wrap; gap: 30px 0; }
   .dr-counter .td-counter-single { flex: 0 0 50%; margin: 0; padding-right: 20px; }
}

/*--- Pagina Contatti --------------------------------------------------------*/
.dr-contact-wa { color: #0d7064; font-weight: 600; }   /* 6:1 su bianco: il verde WhatsApp si ferma a 4,1 */
.dr-contact-wa:hover { color: #0a5a50; }
.dr-contact-wa i,
.td-contact-4-phone i { margin-right: 6px; }

/* Il menu a tendina (nice-select) prende il filo sottile dei campi del tema */
.dr-contact-form .nice-select {
   float: none;
   width: 100%;
   height: auto;
   padding: 13px 30px 13px 0;
   line-height: 1.5;
   font-size: 16px;
   color: var(--td-grey-2);
   border: 0;
   border-bottom: 1px solid var(--td-common-line);
   border-radius: 0;
   box-shadow: none;
   background: transparent;
}
.dr-contact-form .nice-select::after { right: 4px; }
.dr-contact-form .nice-select .list { width: 100%; }
.dr-contact-form .nice-select.open,
.dr-contact-form .nice-select:focus { border-bottom-color: var(--td-theme-primary); }

/* Invio del modulo (dr-contact.js): errori sotto i campi, honeypot nascosto */
.dr-contact-form .is-invalid { border-bottom-color: #b42318 !important; }
.dr-field-error { display: block; margin: -4px 0 12px; font-size: 14px; line-height: 1.4; color: #b42318; }
.dr-field-error:empty { display: none; }
.dr-consent .dr-field-error { margin: 0; padding-left: 28px; }
.dr-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dr-contact-form .g-recaptcha { min-height: 78px; }
.dr-contact-form button[type="submit"]:disabled { opacity: .6; cursor: wait; }

/* Consensi standard (testo, dimensioni e margini inline come da modello):
   la spunta sta fuori dal testo, che va a capo allineato */
.dr-consent p {
   position: relative;
   padding-left: 28px;
   color: var(--td-grey-2);
}
.dr-consent input[type="checkbox"] {
   position: absolute;
   left: 0;
   top: 3px;
   width: 16px;
   height: 16px;
   margin: 0;
   padding: 0;
   border: 0;
   accent-color: var(--dr-primary);
   cursor: pointer;
}
.dr-consent a { color: var(--dr-primary); }

/* Vecchia spunta, usata solo dalla copia statica contatti.html */
.dr-privacy { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--td-grey-2); cursor: pointer; }
.dr-privacy input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin-top: 3px; padding: 0; border: 0; accent-color: var(--dr-primary); }
.dr-privacy a { color: var(--dr-primary); text-decoration: underline; }

a.dr-mail-card {
   display: flex;
   flex-direction: column;
   height: 100%;
   padding: 36px 32px 32px;
   border: 1px solid rgba(27, 54, 104, .12);
   border-radius: 14px;
   background: #fff;
   color: var(--td-common-black);
   position: relative;
   overflow: hidden;
   transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s cubic-bezier(.16, 1, .3, 1), border-color .45s cubic-bezier(.16, 1, .3, 1);
}
/* filetto oro che si allunga all'hover */
a.dr-mail-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 48px;
   height: 3px;
   background: var(--dr-secondary);
   transition: width .45s cubic-bezier(.16, 1, .3, 1);
}
.dr-mail-card-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
   width: 64px;
   height: 64px;
   margin-bottom: 24px;
   border-radius: 50%;
   background: rgba(27, 54, 104, .07);
   color: var(--dr-primary);
   font-size: 26px;
   transition: background .45s cubic-bezier(.16, 1, .3, 1), color .45s cubic-bezier(.16, 1, .3, 1);
}
.dr-mail-card-label { font-size: 20px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.dr-mail-card-text { font-size: 15px; line-height: 1.5; color: var(--td-grey-2); margin-bottom: 22px; }
.dr-mail-card-address {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: auto;
   padding-top: 18px;
   border-top: 1px solid rgba(27, 54, 104, .1);
   font-size: 16px;
   font-weight: 600;
   color: var(--dr-primary);
   overflow-wrap: anywhere;
}
.dr-mail-card-address i { margin-left: auto; font-size: 14px; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
a.dr-mail-card:hover,
a.dr-mail-card:focus-visible { transform: translateY(-4px); border-color: rgba(27, 54, 104, .25); box-shadow: 0 18px 40px -18px rgba(12, 26, 51, .35); }
a.dr-mail-card:hover::before,
a.dr-mail-card:focus-visible::before { width: 100%; }
a.dr-mail-card:hover .dr-mail-card-icon,
a.dr-mail-card:focus-visible .dr-mail-card-icon { background: var(--dr-primary); color: #fff; }
a.dr-mail-card:hover .dr-mail-card-address i,
a.dr-mail-card:focus-visible .dr-mail-card-address i { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
   a.dr-mail-card, a.dr-mail-card::before, .dr-mail-card-icon, .dr-mail-card-address i { transition: none; }
   a.dr-mail-card:hover, a.dr-mail-card:focus-visible { transform: none; }
}
@media (max-width: 575px) {
   a.dr-mail-card { padding: 28px 22px 24px; }
   .dr-mail-card-icon { width: 56px; height: 56px; font-size: 22px; margin-bottom: 18px; }
   .dr-mail-card-address { font-size: 15px; }
}
.dr-mail-pec { margin: 30px 0 0; font-size: 15px; color: var(--td-grey-2); overflow-wrap: anywhere; }
.dr-mail-pec i { color: var(--dr-primary); margin-right: 6px; }
.dr-mail-pec a { color: var(--dr-primary); font-weight: 600; }
.dr-mail-pec a:hover { text-decoration: underline; }

.dr-map iframe {
   display: block;
   width: 100%;
   height: 460px;
   border: 0;
   filter: grayscale(.35);
}
@media (max-width: 767px) {
   .dr-map iframe { height: 340px; }
}

/*--- Area Abbigliamento ----------------------------------------------------*/
.dr-area-hero-mark { display: inline-block; height: 110px; width: auto; }
@media (max-width: 575px) {
   .dr-area-hero-mark { height: 76px; }
}

/* Le categorie mostrano la foto al passaggio: con il velo il testo bianco
   resta leggibile anche sulle foto chiare (monouso, chef, health). */
.dr-wear-cats .td-expreance-thumb::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(12, 26, 51, .7), rgba(12, 26, 51, .4));
}

/* Fascia di rimando alle pagine interne (Importazione diretta, Gadget):
   stessa foto della testata della pagina di arrivo, sotto un velo navy */
.dr-teaser {
   position: relative;
   padding: 110px 0;
   background-size: cover;
}
.dr-teaser::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(12, 26, 51, .92), rgba(12, 26, 51, .8));
}
.dr-teaser > .container { position: relative; }
.dr-teaser .td-section-title-pre { color: var(--dr-secondary); }
.dr-teaser .td-section-title { color: #fff; }
.dr-teaser-para {
   max-width: 640px;
   margin: 0;
   font-size: 18px;
   color: rgba(255, 255, 255, .82);
}
.dr-teaser-btn { text-align: right; }
@media (max-width: 991px) {
   .dr-teaser { padding: 80px 0; }
   .dr-teaser-btn { text-align: left; margin-top: 35px; }
}

/* Modelli di calzature: foto prodotto su fondo bianco */
.dr-product {
   border: 1px solid var(--td-common-line);
   background: #fff;
   padding: 16px;
   overflow: hidden;
}
.dr-product img {
   width: 100%;
   aspect-ratio: 4 / 5;
   object-fit: contain;
   transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.dr-product:hover img { transform: scale(1.05); }

/* Copertine dei cataloghi gadget */
.dr-catalog-covers {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px;
}
.dr-catalog-covers a { display: block; }
.dr-catalog-covers img {
   width: 100%;
   aspect-ratio: 558 / 760;
   object-fit: cover;
   box-shadow: 0 24px 60px rgba(12, 26, 51, .16);
   transition: transform .8s cubic-bezier(.16, 1, .3, 1), box-shadow .8s cubic-bezier(.16, 1, .3, 1);
}
.dr-catalog-covers a:hover img {
   transform: translateY(-6px);
   box-shadow: 0 32px 70px rgba(12, 26, 51, .22);
}

/*--- Correzioni dal controllo finale -------------------------------------*/
/* La foto piccola del blocco about del tema non ha limiti di larghezza:
   con i nostri 600px usciva dallo schermo sui telefoni. */
.td-about-4-thumb-2 img { max-width: 100%; height: auto; }


/* Seconda riga dei titoli nelle schede settore: il grigio del tema al 40%
   su bianco resta sotto 3:1 anche a 36px */
.td-service-3-title .grey { color: rgba(32, 40, 45, .62); }

/*--- Schede settore: anteprima della foto a riposo --------------------------*/
/* Il tema copre la foto con un velo bianco pieno (::before) e lo ritira
   all'hover. A riposo il velo diventa una sfumatura: la foto si vede in basso
   e sfuma nel bianco pieno verso l'alto, dove sta il titolo. All'hover il
   tema lo ritira come prima e compare il velo navy della foto. */
.td-service-3-thumb { opacity: 1; overflow: hidden; }
.td-service-3-item::before {
   background: linear-gradient(0deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .5) 26%,
      rgba(255, 255, 255, .94) 50%,
      #fff 62%);
}
.td-service-3-thumb::after {
   opacity: 0;
   transition: opacity .6s cubic-bezier(.16, 1, .3, 1);
}
.td-service-3-item:hover .td-service-3-thumb::after { opacity: 1; }

/* Senza hover (touch) la descrizione resta visibile nella parte bianca */
@media (hover: none) {
   .td-service-3-para p {
      opacity: 1;
      visibility: visible;
      color: var(--td-grey-2);
   }
}

/* La freccia del menu a tendina pesava 500: il browser scaricava il font
   "regular" (349 KB) solo per lei. Con 300 usa il "light" gia in pagina. */
.nice-select::after { font-weight: 300; }

/* Pillola oro dell'header: il tema forza il testo bianco (2,7:1 sull'oro) */
.td-header-4-btn .td-btn-4,
.td-header-4-btn .td-btn-4:hover { color: var(--dr-primary-darker); }

/*--- Fascia fotografica fra titolo e griglia (Prodotti chimici, DPI) -------*/
.dr-section-photo { overflow: hidden; }
.dr-section-photo img {
   display: block;
   width: 100%;
   aspect-ratio: 70 / 27;
   object-fit: cover;
   transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
.dr-section-photo:hover img { transform: scale(1.03); }
/* Variante in colonna (Gadget): foto 3:2 accanto al testo */
.dr-section-photo.dr-section-photo-col img { aspect-ratio: 3 / 2; height: auto; }
@media (max-width: 767px) {
   .dr-section-photo img { aspect-ratio: 16 / 10; }
}

/*----------------------------------------*/
/*  09. HEADER: menu centrato, schede d'area, header chiaro Abbigliamento
/*----------------------------------------*/

/*--- Barra del menu: tre colonne con le laterali uguali ----------------------*/
/* Con le colonne Bootstrap il menu stava dove capitava (logo+pillola a sinistra
   e telefono+bottone a destra hanno larghezze diverse, piu il margin-right del
   tema). Con 1fr | auto | 1fr il menu sta sempre al centro esatto della barra,
   e le colonne non possono sovrapporsi: al massimo si allargano. */
@media (min-width: 992px) {
   .td-header-bottom .td-header-mobile-space > .row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      column-gap: 24px;
      margin: 0;
   }
   .td-header-bottom .td-header-mobile-space > .row > * { width: auto; max-width: none; padding: 0; }
   .td-header-bottom .td-header-mobile-space > .row > :nth-child(1) { grid-column: 1; }
   .td-header-bottom .td-header-mobile-space > .row > :nth-child(2) { grid-column: 2; }
   .td-header-bottom .td-header-mobile-space > .row > :nth-child(3) {
      grid-column: 3;
      display: flex;
      justify-content: flex-end;
      align-items: center;
   }
   .td-main-menu-4 { margin-right: 0; }
   .td-main-menu-4 .td-main-menu-content > ul {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      gap: 0 26px;
   }
   .td-main-menu-4 .td-main-menu-content > ul > li { margin-left: 0; }
   .td-main-menu-4 .td-main-menu-content > ul > li > a { white-space: nowrap; }
}

/* Lubrificanti (5 voci): sotto i 1440 il telefono non ci sta accanto al
   bottone. Resta nella barra contatti del menu mobile e nel footer. */
@media only screen and (min-width: 992px) and (max-width: 1439px) {
   body:not(.dr-menu-long) .td-header-4-email { display: none !important; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
   .td-main-menu-4 .td-main-menu-content > ul { gap: 0 18px; }
   .td-main-menu-4 .td-main-menu-content > ul > li > a { font-size: 15px; }
}

/* Abbigliamento (7 voci): fra 1200 e 1599 via pillola e telefono,
   sotto i 1200 subito l'hamburger */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
   .dr-menu-long .td-header-4-btn,
   .dr-menu-long .td-header-4-email { display: none !important; }
   .dr-menu-long .td-main-menu-4 .td-main-menu-content > ul { gap: 0 18px; }
   .dr-menu-long .td-main-menu-4 .td-main-menu-content > ul > li > a { font-size: 15px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
   .dr-menu-long .td-header-mobile-space > .row > :nth-child(2) { display: none !important; }
   .dr-menu-long .td-header-bar { display: block !important; margin-left: 24px; }
}

/*--- Schede d'area nella barra superiore -------------------------------------*/
/* Sempre al centro, sopra il menu. La scheda attiva prende il colore della
   barra sotto: sembra una linguetta attaccata all'header. */
/* La barra del tema e alta 26px: le schede (39px) uscivano sopra il bordo della
   pagina. La portiamo a 46px, con localita e orari centrati in verticale. */
.td-header-top { position: relative; }
.td-header-top .row { min-height: 46px; }
.td-header-top .container-fluid,
.td-header-top .row,
.td-header-top [class*="col-"],
.td-header-top-left { position: static; }
.dr-area-switch {
   position: absolute;
   left: 50%;
   bottom: 0;
   transform: translateX(-50%);
   z-index: 2;
}
.dr-area-switch ul { display: flex; gap: 4px; margin: 0; padding: 0; }
.td-header-top-menu.dr-area-switch ul li { margin: 0; }
.td-header-4-top-menu.dr-area-switch ul li a {
   display: block;
   padding: 9px 22px 8px;
   border-radius: 8px 8px 0 0;
   font-size: 14px;
   font-weight: 500;
   white-space: nowrap;
   opacity: 1;
   color: rgba(255, 255, 255, .72);
   transition: background .35s cubic-bezier(.16, 1, .3, 1), color .35s cubic-bezier(.16, 1, .3, 1);
}
.td-header-4-top-menu.dr-area-switch ul li a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.td-header-4-top-menu.dr-area-switch ul li a[aria-current] {
   background: var(--dr-primary-dark);        /* = .td-header-bottom dei Lubrificanti */
   color: var(--dr-secondary-light);
}

/* Fino a 1279 gli orari stanno troppo vicini alle schede centrate */
@media (max-width: 1279px) {
   .td-header-top .td-header-time { display: none; }
}
/* Sotto i 768 il tema nasconde la barra: la teniamo, solo con le schede */
@media (max-width: 767px) {
   .td-header-top.d-none { display: block !important; }
   .td-header-top .row { min-height: 42px; }
   .td-header-top .td-header-right { display: none !important; }
   .td-header-4-top-menu.dr-area-switch ul li a { padding: 8px 14px 7px; font-size: 13px; }
}

/*--- Header chiaro: area Abbigliamento ---------------------------------------*/
/* body.dr-area-wear: statico sulle pagine Abbigliamento, lo aggiunge
   dr-motion.js sulle pagine condivise quando si arriva da quell'area. */
.dr-area-wear .td-header-bottom.td-black-bg,
.dr-area-wear .td-header-sticky.td-header-sticky-black {
   background: #fff;
   box-shadow: 0 1px 0 rgba(12, 26, 51, .08);
}
.dr-area-wear .td-header-sticky.td-header-sticky-black { box-shadow: 0 10px 30px rgba(12, 26, 51, .1); }
.dr-area-wear .td-header-4-top-menu.dr-area-switch ul li a[aria-current] {
   background: #fff;
   color: var(--dr-primary-darker);
}

.dr-area-wear .td-main-menu-4 nav ul li a { color: var(--dr-primary-darker); }
.dr-area-wear .td-main-menu-4 nav ul li a:hover { color: var(--dr-primary); opacity: 1; }
.dr-area-wear .td-main-menu-content ul li > a[aria-current="page"] { color: var(--dr-secondary-text); }

.dr-area-wear .td-header-bottom .td-header-right { color: var(--dr-primary-darker); opacity: 1; }
.dr-area-wear .td-header-4-email a { color: var(--dr-primary-darker); }
.dr-area-wear .td-header-4-email a i { opacity: .7; }

/* Il bottone del tema e bianco: sul bianco diventa navy */
.dr-area-wear .td-header-bottom .td-btn-7,
.dr-area-wear .td-header-bottom .td-btn-7:hover { background: var(--dr-primary); color: #fff; }
.dr-area-wear .td-header-bottom .td-btn-7:hover { background: var(--dr-primary-dark); }

.dr-area-wear .td-header-bar-white button span { background: var(--dr-primary-darker); }

/*--- Logo su entrambe le fasce (da 992px) -------------------------------------*/
/* A sinistra la barra superiore e vuota: il logo sale e occupa le due fasce.
   La sua base ha il colore della barra del menu e sale come una scheda, cosi
   il logo resta leggibile anche nell'area Abbigliamento (menu bianco). */
@media (min-width: 992px) {
   .td-header-bottom .td-header-logo > a:first-child {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      margin-top: -40px;                 /* sale nella barra superiore, 6px sotto il bordo come le schede */
      padding: 8px 20px;
      background: var(--dr-primary-dark);
      border-radius: 10px 10px 0 0;
      transition: margin .4s cubic-bezier(.16, 1, .3, 1), padding .4s cubic-bezier(.16, 1, .3, 1);
   }
   .td-header-bottom .td-header-logo > a:first-child img {
      max-height: 80px;
      transition: max-height .4s cubic-bezier(.16, 1, .3, 1);
   }
   .dr-area-wear .td-header-bottom .td-header-logo > a:first-child { background: #fff; }

   /* Header fisso: la barra superiore non c'e piu, il logo torna in riga */
   .td-header-sticky .td-header-logo > a:first-child {
      margin-top: 0;
      padding: 0;
      background: transparent;
   }
   .dr-area-wear .td-header-sticky .td-header-logo > a:first-child { background: transparent; }
   .td-header-sticky .td-header-logo > a:first-child img { max-height: 54px; }
}

/*----------------------------------------*/
/*  10. CREDITS CLION E PAGINE DI ERRORE
/*----------------------------------------*/
.credits_link {
   color: #38B5E6 !important;
   font-weight: 700;
   font-family: sans-serif;
}
/* footer chiaro: hover navy invece del bianco dello snippet originale */
.credits_link:hover { color: var(--td-theme-primary, #1b3668) !important; }
.credits_link:before {
   content: "";
   vertical-align: middle;
   width: 16px;
   height: 16px;
   display: inline-block;
   margin-right: 5px;
   margin-left: 5px;
   background-image: url(https://www.clion.it/favicon-96x96.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;
   transition: all 450ms ease;
}
.credits_link:hover:before { transform: scale(1.5) rotateZ(360deg) rotateY(360deg); }

.dr-error { text-align: center; }
.dr-error-code { font-size: clamp(90px, 18vw, 180px); line-height: 1; font-weight: 700; color: var(--td-theme-primary, #1b3668); margin-bottom: 20px; }
.dr-error p { max-width: 560px; margin: 0 auto 40px; }
.dr-error-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/*--- Correzioni brief 11/11 ------------------------------------------------*/
/* Schede settore piu leggibili: seconda riga del titolo piena, velo navy piu
   coprente all'hover e descrizione a piena opacita, piu grande */
.td-service-3-title .grey { color: var(--dr-primary); opacity: .78; }
.td-service-3-item:hover .td-service-3-title .grey { opacity: 1; }
.td-service-3-thumb::after { background: rgba(12, 26, 51, .84); }
.td-service-3-para p {
   font-size: 17px;
   font-weight: 500;
   line-height: 1.55;
}
.td-service-3-item:hover .td-service-3-para p { opacity: 1; }
@media (hover: none) {
   .td-service-3-para p { color: var(--dr-primary); }
}

/* Mappa di Contatti senza consenso marketing */
.dr-map-placeholder {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 300px;
   padding: 40px 20px;
   text-align: center;
   background: var(--td-grey-1, #f3f5f8);
}
.dr-map-placeholder p { margin: 0; }
.dr-map-placeholder a { font-weight: 600; text-decoration: underline; }

/* Schermi stretti: il bollino WhatsApp non copre il tasto "Richiesta preventivo" dell'hero */
@media (max-width: 400px) {
   .wa-link { right: 12px; width: 46px; height: 46px; line-height: 46px; }
}

/*--- Titoli decorativi fuori dalla gerarchia (12/11) ------------------------*/
/* Numeri 01-04, anni, contatori e scritte giganti erano H2: ora sono div.
   :where() = specificita zero, cosi le classi del tema restano prioritarie. */
:where(.dr-hx) {
   display: block;
   margin: 0 0 .5rem;
   color: var(--td-theme-primary);
   font-family: var(--td-ff-manrope);
   font-weight: 800;
   line-height: 1.12;
}
:where(.dr-h2) { font-size: 50px; }
:where(.dr-h3) { font-size: 30px; }

/* Seconda riga descrittiva dell'H1 delle testate */
.td-breadcrumb-title .dr-h1-sub {
   display: block;
   margin-top: 14px;
   font-size: .34em;
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: 0;
   opacity: .88;
}