/* =====================================================================
   DESTINO RANDAGIO — CSS UNIVERSALE (STANDARD DEL SITO)
   Un solo file per colori, card luxury, bottoni, banner, countdown.
   Carica in ogni pagina:  <link rel="stylesheet" href="dr.css?v=1">
   (inc.js lo inietta in automatico se assente).
   ===================================================================== */

/* TASK-102: design token globali (docs/DESIGN_SYSTEM.md).
   AGGIUNGE i token standard --color-*, --sp-*, --z-*: NON modifica
   le variabili storiche qui sotto, quindi nessuna regressione. */
@import url("assets/css/tokens.css");

/* ---------- 1. VARIABILI / TOKEN COLORE ---------- */
:root{
  --oro:#D4AF37; --oro2:#b8942e; --oro-chiaro:#ffe9a8; --oro-scuro:#8a6d1f;
  --arancio:#FB6B00; --rosso:#e0431f; --verde:#26A17B;
  --nero:#0A0A0A; --nero2:#0e0e0e; --carbone:#121212; --grigio:#9aa0a6; --grigio2:#8a8a8a;
  --bianco:#eee; --panna:#fff6cd;
  --bg-card:linear-gradient(155deg,#241a09,#14100a 45%,#0b0a07);
  --bg-card2:linear-gradient(150deg,#1b1710,#12100a 42%,#0b0a07);
  --bordo-oro:2px solid rgba(212,175,55,.6);
  --raggio:20px; --raggio-s:14px;
  --ombra:0 18px 40px rgba(0,0,0,.55);
  --ombra-oro:0 0 55px rgba(212,175,55,.16);
  --bevel:inset 0 2px 0 rgba(255,246,205,.42),inset 0 -4px 12px rgba(0,0,0,.72);
  --font:'Segoe UI',Arial,sans-serif;
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box}
.dr-scope,.dr-card,.lx{font-family:var(--font)}

/* ---------- 2bis. MOBILE-FIRST SAFETY (globale, additivo) ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,iframe,svg{max-width:100%}
/* niente scroll orizzontale accidentale su mobile */
html,body{max-width:100%;overflow-x:hidden}
/* rispetta chi preferisce meno animazioni */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* accessibilità: skip-link + focus visibile */
.dr-skip{position:fixed;left:8px;top:-60px;z-index:3000;background:var(--oro);color:#160f00;padding:9px 16px;border-radius:10px;font-weight:800;text-decoration:none;transition:top .2s}
.dr-skip:focus{top:38px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--oro);outline-offset:2px}

/* ---------- 3. CARD LUXURY UNIVERSALE (.dr-card e alias .lx) ---------- */
.dr-card,.lx{
  position:relative;overflow:hidden;border-radius:var(--raggio);
  background:var(--bg-card);border:var(--bordo-oro);
  box-shadow:var(--ombra),var(--ombra-oro),var(--bevel);
  padding:22px;color:var(--bianco);transition:transform .3s ease}
.dr-card:hover,.lx:hover{transform:translateY(-4px)}
.dr-card::before,.lx::before{content:"♛";position:absolute;top:-8px;right:8px;
  font-size:4.2rem;color:rgba(212,175,55,.1);line-height:1;z-index:1;pointer-events:none}
.dr-card::after,.lx::after{content:"";position:absolute;inset:0;
  background:url('assets/pattern.png') repeat;background-size:150px;
  opacity:.06;mix-blend-mode:screen;pointer-events:none;z-index:1}
.dr-card>*,.lx>*{position:relative;z-index:3}

/* variante bordo/sfondo alternativo */
.dr-card.alt,.lx.alt{background:var(--bg-card2)}

/* ---------- 4. EFFETTI: metal sweep + stelle/diamanti ---------- */
.metal,.metal2{position:absolute;top:0;left:-60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,240,190,.2),transparent);
  transform:skewX(-20deg);z-index:2;pointer-events:none}
.metal{width:45%;animation:drSweep 5s infinite}
.metal2{width:50%;animation:drSweep 4.5s infinite}
@keyframes drSweep{0%{left:-60%}55%,100%{left:160%}}
.stars{position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    radial-gradient(2.4px 2.4px at 18% 28%,#fff,transparent),
    radial-gradient(1px 1px at 68% 62%,var(--oro-chiaro),transparent),
    radial-gradient(1.6px 1.6px at 85% 22%,#fff,transparent),
    radial-gradient(1px 1px at 40% 82%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 55% 40%,var(--oro-chiaro),transparent);
  background-repeat:no-repeat;animation:drTwk 2.8s ease-in-out infinite alternate}
@keyframes drTwk{0%{opacity:.28}100%{opacity:.98}}

/* ---------- 5. BOTTONI ---------- */
.btn{display:inline-block;background:linear-gradient(135deg,var(--oro),var(--oro2));
  color:#160f00;font-weight:900;border:0;border-radius:26px;padding:13px 24px;
  cursor:pointer;text-decoration:none;font-size:1rem;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(212,175,55,.4)}
.btn.ghost{background:transparent;border:2px solid var(--oro);color:var(--oro)}
/* bottone NERO pulsante con stelle (standard CTA nera) */
.blkbtn{position:relative;display:inline-block;background:#000;color:var(--oro);
  font-weight:900;letter-spacing:.5px;border:2px solid var(--oro);border-radius:30px;
  padding:14px 30px;text-decoration:none;font-size:1.02rem;overflow:hidden;
  box-shadow:0 0 0 rgba(212,175,55,.5);animation:drPulse 2s infinite}
.blkbtn::before,.blkbtn::after{content:"✦";position:absolute;top:50%;transform:translateY(-50%);
  color:var(--oro);font-size:.8rem;opacity:.85}
.blkbtn::before{left:12px}.blkbtn::after{right:12px}
.blkbtn:hover{background:#0b0b0b;color:var(--oro-chiaro)}
@keyframes drPulse{0%{box-shadow:0 0 0 0 rgba(212,175,55,.5)}70%{box-shadow:0 0 0 14px rgba(212,175,55,0)}100%{box-shadow:0 0 0 0 rgba(212,175,55,0)}}
/* pill prezzo */
.pill{display:inline-block;background:linear-gradient(135deg,var(--oro),var(--oro2));
  color:#160f00;font-weight:900;border-radius:30px;padding:8px 20px;font-size:1.1rem}
.pill small{font-weight:700;font-size:.7rem;opacity:.8}
/* tag/badge */
.badge{display:inline-block;font-weight:800;font-size:.7rem;padding:3px 10px;border-radius:12px}
.badge.hot{background:linear-gradient(135deg,var(--rosso),var(--arancio));color:#fff}
.badge.new{background:var(--verde);color:#fff}
.badge.gold{background:linear-gradient(135deg,var(--oro),var(--oro2));color:#160f00}

/* ---------- 6. BANNER PROMO + COUNTDOWN + BARRA DISPONIBILITÀ ---------- */
.dr-promo{position:relative;overflow:hidden;border-radius:var(--raggio);
  background:var(--bg-card);border:var(--bordo-oro);
  box-shadow:var(--ombra),var(--ombra-oro),var(--bevel);text-align:center}
.dr-promo .pin{position:relative;z-index:3;padding:20px 22px}
.ptag{display:inline-block;font-weight:900;letter-spacing:1px;font-size:.82rem;
  padding:5px 16px;border-radius:20px;background:linear-gradient(135deg,var(--rosso),var(--arancio));
  color:#fff;box-shadow:0 6px 18px rgba(224,67,31,.4);animation:drTagPulse 1.8s infinite}
.ptag.off{background:linear-gradient(135deg,var(--oro),var(--oro2));color:#160f00;animation:none}
@keyframes drTagPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.cdrow{display:flex;gap:10px;justify-content:center;margin-top:6px}
.cdb{background:linear-gradient(160deg,#0f0f0f,#080808);border:1px solid rgba(212,175,55,.45);
  border-radius:12px;padding:8px 12px;min-width:58px;box-shadow:inset 0 1px 0 rgba(255,244,200,.2)}
.cdb b{display:block;font-size:1.6rem;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.cdb small{color:var(--grigio);font-size:.62rem;text-transform:uppercase;letter-spacing:1px}
.avbar{height:12px;border-radius:8px;background:#151515;border:1px solid #333;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}
.avbar i{display:block;height:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--rosso),var(--arancio),var(--oro));
  transition:width .8s ease;box-shadow:0 0 12px rgba(224,138,43,.6)}

/* ---------- 7. FORM ---------- */
.dr-scope label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:1px;
  color:var(--oro);font-weight:800;margin:2px 0 4px}
.dr-scope input,.dr-scope select,.dr-scope textarea{width:100%;background:var(--nero2);color:#fff;
  border:1px solid #333;border-radius:12px;padding:11px 13px;font-size:.92rem;font-family:inherit}
.dr-scope textarea{resize:vertical;min-height:90px}

/* ---------- 7bis. AUTO-LUXURY: pattern + bordo oro su OGNI card/tabella ---------- */
.dr-lux{outline:1.5px solid rgba(212,175,55,.45);outline-offset:-2px}
.dr-lux-ov{position:absolute;inset:0;background:url('assets/pattern.png') repeat;background-size:140px;
  opacity:.09;mix-blend-mode:screen;pointer-events:none;border-radius:inherit;z-index:0}
.dr-lux-ov+*{position:relative}
table.dr-lux{border-collapse:separate;border-radius:12px;overflow:hidden}

/* ---------- 8. UTILITY ---------- */
.dr-oro{color:var(--oro)} .dr-grigio{color:var(--grigio)} .dr-center{text-align:center}
.dr-wrap{max-width:960px;margin:0 auto;padding:0 20px}
.dr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dr-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dr-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:720px){.dr-grid3,.dr-grid4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.dr-grid2,.dr-grid3,.dr-grid4{grid-template-columns:1fr}}

/* ===== TICKER MINING SCORREVOLE (sotto header, SU TUTTE LE PAGINE) =====
   Prima era display:none e compariva SOLO sotto i 900px: sul desktop il
   mining scorrevole non si vedeva. Adesso e' una striscia fissa sotto la
   barra in alto, sempre visibile, su ogni schermo. L'offset del body lo
   gestisce drFixOffset in inc.js, che ora conta anche questa altezza. */
/* Ticker mining rimosso: DRX e 81X minati vivono ora nell'UNICA barra #drTop
   (visite · online · DRX · 81X · lingua). Niente seconda striscia. */
#drTop .drMine{display:inline}

/* ============================================================
   STANDARD CARD UNICO DR (usalo OVUNQUE, non reinventare card)
   Markup:
     <div class="dr-cards">              (griglia, card a dimensione UGUALE)
       <a class="dr-card" href="...">
         <span class="dr-card__badge">-50%</span>            (opz.)
         <div class="dr-card__media"><img src="..." alt=""></div>
         <div class="dr-card__body">
           <h3 class="dr-card__title">Titolo</h3>
           <p class="dr-card__desc">Descrizione…</p>
           <div class="dr-card__meta"><span>info</span></div>  (opz.)
           <div class="dr-card__price"><span class="old">€30</span><span class="new">€15</span></div> (opz.)
           <span class="dr-card__cta">Scopri</span>
         </div>
       </a>
     </div>
   Variante ticker orizzontale: <div class="dr-cards dr-cards--rail"> … </div>
   ============================================================ */
.dr-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;align-items:stretch}
.dr-cards--rail{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
.dr-cards--rail::-webkit-scrollbar{display:none}
.dr-cards--rail>.dr-card{flex:0 0 250px;scroll-snap-align:start}
/* card nel sistema: flex-column + altezza piena => tutte UGUALI */
.dr-cards>.dr-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--bianco)}
.dr-card__media{margin:-22px -22px 16px;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#20303f,#0d0d0d)}
.dr-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.dr-cards>.dr-card:hover .dr-card__media img{transform:scale(1.05)}
.dr-card__body{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.dr-card__title{color:var(--oro);font-weight:800;font-size:1.05rem;line-height:1.25;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dr-card__desc{color:var(--grigio);font-size:.86rem;line-height:1.5;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dr-card__meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.75rem;color:var(--grigio2)}
.dr-card__badge{position:absolute;top:10px;left:10px;z-index:5;
  background:linear-gradient(135deg,var(--oro),var(--oro2));color:#160f00;font-weight:800;
  font-size:.66rem;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:20px}
.dr-card__price{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:8px}
.dr-card__price .old{color:var(--grigio2);text-decoration:line-through;font-size:.82rem}
.dr-card__price .new{color:var(--oro);font-weight:900;font-size:1.18rem}
.dr-card__cta{margin-top:12px;display:block;text-align:center;
  background:linear-gradient(135deg,var(--oro),var(--oro2));color:#160f00;font-weight:800;
  border-radius:22px;padding:10px 16px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.dr-cards>.dr-card:hover .dr-card__cta{transform:translateY(-1px);box-shadow:0 8px 20px rgba(212,175,55,.35)}
@media(max-width:600px){.dr-cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .dr-cards--rail>.dr-card{flex-basis:200px}}
/* TESTO GIUSTIFICATO ovunque per un visual pulito (card + blocchi + tabelle di testo).
   Le tabelle numeriche restano allineate: usa .dr-justify sulle tabelle di testo. */
.dr-card__desc,.dr-card p,.dr-card li{text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}
.dr-justify,.dr-justify p,.dr-justify li,.dr-justify td{text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}

/* ============================================================
   FOOTER UNIVERSALE — fonte CSS unica (CC-FOOTER-FINAL 2026-07-28).
   Prima la CSS del footer viveva SOLO dentro inc.js: le pagine con il
   footer server-side (includes/footer.php) ma senza inc.js restavano
   SENZA stile. Ora e' qui, quindi QUALSIASI footer (server o iniettato)
   e' identico e stilato ovunque, senza dipendere dal JS.
   ============================================================ */
.dr-footer{background:radial-gradient(ellipse at 50% 0%, rgba(35,27,14,.98), #060606 70%);color:#d4cfc5;border-top:2px solid rgba(212,175,55,.35);box-shadow:0 -10px 40px rgba(0,0,0,.8);margin-top:60px;position:relative;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.dr-footer::before{content:"";position:absolute;inset:0;background:url('/assets/pattern.png') repeat;background-size:240px;opacity:.04;pointer-events:none}
.dr-footer__wrap{max-width:1240px;margin:0 auto;padding:50px 24px 30px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:34px;position:relative;z-index:1}
.dr-footer__logo{display:block;margin-bottom:12px;filter:drop-shadow(0 0 12px rgba(212,175,55,.35))}
.dr-footer__brandname{font-size:1.15rem;font-weight:900;letter-spacing:2px;color:#f3d77a;margin-bottom:6px;font-family:Georgia,serif}
.dr-footer__motto{color:#D4AF37;font-weight:800;font-size:.88rem;margin:0 0 8px;line-height:1.4}
.dr-footer__motto span{font-weight:400;color:#c2baa9;font-size:.82rem}
.dr-footer__claim{color:#9aa0a6;font-size:.82rem;margin:0 0 10px;line-height:1.5}
.dr-footer__contact{margin:10px 0 16px;font-size:.84rem;color:#b8b2a5}
.dr-footer__contact a{color:#f3d77a;font-weight:700;text-decoration:none}
.dr-footer__newsletter{background:rgba(18,15,10,.85);border:1px solid rgba(212,175,55,.3);border-radius:14px;padding:14px;max-width:340px}
.dr-footer__newstitle{color:#f3d77a;font-size:.74rem;letter-spacing:1.5px;font-weight:900;margin-bottom:8px}
.dr-footer__newsform{display:flex;gap:6px}
.dr-footer__newsform input{flex:1;background:#000;border:1px solid rgba(212,175,55,.4);border-radius:8px;padding:9px 12px;font-size:12px;color:#fff;outline:none}
.dr-footer__newsform button{background:linear-gradient(135deg,#f3d77a,#b8942e);border:0;border-radius:8px;padding:9px 14px;color:#160f00;font-weight:900;font-size:12px;cursor:pointer;transition:transform .15s}
.dr-footer__newsform button:hover{transform:scale(1.04)}
.dr-footer__newsmsg{font-size:11px;margin-top:6px}
.dr-footer__title{color:#E8CE7A;font-size:.82rem;letter-spacing:1.8px;text-transform:uppercase;margin:0 0 16px;font-weight:900;border-bottom:1px solid rgba(212,175,55,.2);padding-bottom:6px}
.dr-footer ul{list-style:none;margin:0;padding:0}.dr-footer li{margin:0 0 10px}
.dr-footer a{color:#b8b2a5;text-decoration:none;font-size:.88rem;transition:color .18s,transform .18s;display:inline-block}
.dr-footer a:hover,.dr-footer a:focus{color:#f3d77a;transform:translateX(3px);text-decoration:none}
.dr-footer__bottom{border-top:1px solid rgba(212,175,55,.18);padding:24px 20px;text-align:center;background:rgba(4,4,4,.8);position:relative;z-index:1}
.dr-footer__badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;font-size:.76rem;color:#E8CE7A;font-weight:700}
.dr-footer__bottom p{margin:4px 0;font-size:.78rem;color:#8a8376;line-height:1.6}
@media(max-width:1024px){.dr-footer__wrap{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(max-width:640px){.dr-footer__wrap{grid-template-columns:1fr;gap:26px;padding:36px 18px 24px}}

/* ============================================================================
   SUITE UNIVERSALE MOBILE-FIRST & RESPONSIVE ADATTIVA
   Garantisce 100% fluidità, safe-areas notch, anti-overflow, touch targets
   AAA (min 44px) e layout adattivi su smartphone, pieghevoli e tablet.
   ============================================================================ */

/* 1. VARIABILI SAFE-AREA VIEWPORT (iOS Notch & Android Nav Bar) */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* 2. BASE MOBILE-FIRST: ANTI-OVERFLOW E BOX-SIZING GLOBALE */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  -webkit-tap-highlight-color: transparent;
  padding-left: var(--sal);
  padding-right: var(--sar);
}

/* 3. MEDIA E CONTENUTI RIGOROSAMENTE FLUIDI */
img, video, canvas, svg, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}

/* 4. CONTENITORI ADATTIVI SENZA LARGHEZZE FISSE */
.wrap, .w, .kr, .container, .dr-wrap, main, section, article, .box, .card, .dr-card {
  max-width: 100% !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 5. TIPOGRAFIA FLUIDA CLAMP (Scalabilità da 320px a schermi retina) */
h1, .dr-h1, .hero h1 {
  font-size: clamp(1.85rem, 5.5vw, 3.2rem) !important;
  line-height: 1.15 !important;
  word-break: break-word;
}
h2, .dr-h2, .hero h2 {
  font-size: clamp(1.4rem, 4vw, 2.2rem) !important;
  line-height: 1.25 !important;
  word-break: break-word;
}
h3, .dr-h3 {
  font-size: clamp(1.15rem, 3.2vw, 1.6rem) !important;
  line-height: 1.3 !important;
}
p, .lead, .dr-lead, .desc {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* 6. FORM E TOUCH TARGETS (Previene auto-zoom iOS con font 16px e touch 44px) */
input, select, textarea, button {
  font-size: 16px !important;
  touch-action: manipulation;
  max-width: 100%;
}
.btn, .blkbtn, .pill, a.tab, button, .dr-nav-toggle, input[type="submit"], input[type="button"] {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 7. TABELLE REALI 100% RESPONSIVE E SCROLLABILI SU MOBILE */
table {
  width: 100% !important;
  border-collapse: collapse;
}
.dr-table-responsive, .table-responsive, div:has(> table) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 1.2rem;
  display: block;
}

/* 8. ADATTAMENTO GRIGLIE SU SMARTPHONE E TABLET (< 768px) */
@media (max-width: 768px) {
  .grid2, .dr-grid2, .tiers, .kpis, .grid, .grid4, .steps, .dr-grid3, .dr-grid4 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .tier.best {
    transform: none !important;
    box-shadow: 0 0 30px rgba(212,175,55,.25) !important;
  }
  .box, .card, .dr-card, .kr, .w, .wrap {
    padding-left: max(14px, var(--sal)) !important;
    padding-right: max(14px, var(--sar)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .dr-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .btn, .blkbtn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .pricepill {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }
  .top, .dr-header-nav {
    padding-left: max(14px, var(--sal)) !important;
    padding-right: max(14px, var(--sar)) !important;
    padding-top: max(10px, var(--sat)) !important;
  }
}

/* 9. PIEGHEVOLI E SMARTPHONE MEDI (480px - 768px) */
@media (min-width: 480px) and (max-width: 768px) {
  .kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .dr-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 10. SAFE AREA BOTTOM PER FOOTER E STICKY BARS */
.dr-footer__bottom, footer {
  padding-bottom: max(24px, var(--sab)) !important;
}