/* ============================================================================
 * mondo5-overrides.css
 *
 * Layer di override applicato DOPO mondo5-layout.css. Contiene tutti i fix di
 * layout e comportamento identificati durante la revisione UI/UX di mondo3.
 *
 * Ordine di caricamento richiesto nella pagina:
 *   1. mondo-layout.css
 *   2. mondo5-base-layout.css
 *   3. mondo5-favorites.css
 *   4. mondo5-layout.css
 *   5. mondo5-overrides.css  <-- QUESTO FILE
 *
 * Classi coinvolte (devono essere applicate dal backend/JS):
 *   - body.mondo5-page                  obbligatorio
 *   - body.mondo5-weekly-single         attiva la variante "weekly a 1 slot"
 *   - .main-content-wrapper.mondo5-star-filter-active
 *                                       quando è attivo il filtro preferite
 *   - .image-grid__item.mondo5-card--weekly
 *                                       card della ragazza della settimana
 *   - .image-grid__item.mondo5-card--starred
 *                                       card con badge HOT SELECTION
 * ============================================================================ */


/* ----------------------------------------------------------------------------
 * 1. FILTRI LINGUA - smartphone portrait + landscape
 *    Nascondiamo solo il testo dentro ogni pill; manteniamo visibili le
 *    bandierine. Il pulsante "Tutte" è solo testo (senza flag) quindi lo
 *    nascondiamo interamente.
 * -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  body.mondo5-page .mondo5-language-filters .mondo5-language-toggle > span {
    display: none !important;
  }

  body.mondo5-page .mondo5-language-filters .mondo5-language-toggle[data-lang="all"] {
    display: none !important;
  }
}


/* ----------------------------------------------------------------------------
 * 2. ALLINEAMENTO CARD CON FILTRO PREFERITE ATTIVO - desktop
 *    La regola base di mondo5-layout.css applica padding-top:52px ai primi 8
 *    item via :nth-child(-n+8) per riservare lo spazio del badge. Con il
 *    filtro stelline attivo alcune card sono nascoste via display:none ma
 *    :nth-child continua a contarle. Risultato: le card visibili finiscono
 *    in posizioni DOM imprevedibili e alcune perdono il padding, sfalsando
 *    l'allineamento verticale.
 *
 *    Soluzione: quando il filtro è attivo, applichiamo il padding a TUTTE le
 *    card visibili così l'allineamento è garantito a prescindere dalla
 *    posizione DOM.
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  body.mondo5-page .main-content-wrapper.mondo5-star-filter-active > .image-grid:first-child > .image-grid__grid > .image-grid__item .image-grid__item-content {
    padding-top: 52px !important;
  }
}


/* ----------------------------------------------------------------------------
 * 3. LAYOUT LANDSCAPE MOBILE (576-991.98px)
 *    La regola base usa flex-wrap con max-width:250px per card; con viewport
 *    ~600-800px entrano solo 2 card per riga invece di 3, e la weekly a 2
 *    slot peggiora il problema. Forziamo 3 colonne esatte con gap fisso,
 *    aspect-ratio uniforme e titolo su singola riga (ellissi).
 *
 *    Il badge viene posizionato in absolute sopra l'immagine con un padding
 *    riservato in testa ad ogni card: così card con e senza badge hanno
 *    sempre la stessa altezza.
 * -------------------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 991.98px) {
  body.mondo5-page .main-content-wrapper > .image-grid:first-child > .image-grid__grid {
    gap: 12px !important;
    row-gap: 16px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  body.mondo5-page .main-content-wrapper > .image-grid:first-child > .image-grid__grid > .image-grid__item {
    flex: 0 0 calc((100% - 24px) / 3) !important;
    width: calc((100% - 24px) / 3) !important;
    max-width: calc((100% - 24px) / 3) !important;
    min-width: 0 !important;
  }

  body.mondo5-page .main-content-wrapper > .image-grid:first-child > .image-grid__grid > .image-grid__item .image-grid__item-image-wrapper {
    aspect-ratio: 250 / 170 !important;
    width: 100% !important;
  }

  body.mondo5-page .main-content-wrapper > .image-grid:first-child > .image-grid__grid > .image-grid__item .image-grid__item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Badge centrato in alto, fuori dal flusso. Il padding-top su ogni card
     riserva lo spazio così l'altezza totale è uniforme. */
  body.mondo5-page .main-content-wrapper > .image-grid:first-child > .image-grid__grid > .image-grid__item .image-grid__item-content {
    position: relative !important;
    overflow: visible !important;
    padding-top: 40px !important;
  }

  body.mondo5-page .main-content-wrapper > .image-grid:first-child > .image-grid__grid > .image-grid__item .image-grid__item-content > .mondo5-card-badge {
    position: absolute !important;
    top: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 3 !important;
  }
}


/* ----------------------------------------------------------------------------
 * 4. WEEKLY CARD: stessa dimensione delle altre card.
 *    Unica differenza: label sopra + bordo colorato (gestiti in layout.css).
 * -------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
 * 5. LINGUETTE DRAWER TUTTE A SINISTRA (desktop + mobile)
 *    Richiesta post-demo: HOT, VIDEOS, PHOTOS, TWEETS, COMMENTS devono stare
 *    tutti sul lato sinistro dello schermo invece di essere divisi tra i due
 *    lati (mobile) o agganciati a destra (desktop).
 *
 *    - Desktop (>=992px): container posizionato a sinistra, handle con
 *      border-radius specchiato per agganciarsi al bordo sinistro.
 *    - Mobile (<=991.98px): photos/tweets/comments spostati sul lato sinistro
 *      e impilati in coda a hot/videos. Usiamo --mondo5-mobile-handle-step
 *      con moltiplicatori 2,3,4 per evitare sovrapposizioni con le due
 *      linguette già presenti a sinistra.
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  /* LAYOUT STRUTTURALE:
     Riserviamo 52px di padding-left sul .full-width-container (che ha
     max-width 1740 e box-sizing:border-box). Così:
     - il box esterno del container resta 1740 centrato come prima
     - il contenuto INTERNO (card grid, navbar, ecc) inizia 52px più a
       destra, lasciando un "binario" a sinistra dentro il box
     - la linguetta viene ancorata al bordo SINISTRO del box, quindi
       occupa esattamente quel binario e NON puo' mai invadere il contenuto
     A qualsiasi zoom/viewport la regola regge perche' non e' basata su
     calcoli di larghezza ma su un vincolo di layout. */
  body.mondo5-page.mondo5-page .full-width-container {
    padding-right: 52px !important;
    box-sizing: border-box !important;
  }

  /* A drawer aperto le linguette destre sono nascoste e la sidebar deve
     attaccarsi al bordo destro del viewport: rimuovo il padding-right
     altrimenti resta una fascia vuota a destra della sidebar. */
  body.mondo5-page.mondo5-page.mondo5-drawer-open .full-width-container {
    padding-right: 0 !important;
  }

  /* Linguette ancorate al bordo DESTRO del viewport (spostate da sinistra).
     Il padding-right:52 sul container garantisce che le card finiscano prima
     del binario delle linguette. */
  body.mondo5-page .mondo5-drawer-handles-container {
    left: auto !important;
    right: 0 !important;
    align-items: flex-end !important;
  }

  body.mondo5-page .mondo5-drawer-handle {
    border-radius: 18px 0 0 18px !important;
  }

  /* Sfondo uniforme: il problema in precedenza era che .mondo5-content-row e
     body avevano entrambi un gradient con ALPHA — la composizione su due
     layer produceva colore piu' saturo al centro rispetto ai margini.
     Fix: forziamo OPACHI tutti e tre i layer (body, full-width-container,
     mondo5-content-row) agli stessi valori finali. Cosi' non c'e' piu'
     composizione alpha e il colore e' uniforme pixel-per-pixel tra
     binario linguette a sinistra, panel centrale, zona a destra.
     Valori scelti: opachi equivalenti alla composizione originale
     rgba(248,250,252,0.94)->rgba(243,246,249,0.9) su body blu-grigio. */
  body.mondo5-page.mondo5-page,
  body.mondo5-page.mondo5-page .full-width-container,
  body.mondo5-page.mondo5-page .mondo5-content-row {
    background: linear-gradient(180deg, rgb(247, 250, 252) 0%, rgb(243, 246, 249) 100%) !important;
    background-image: linear-gradient(180deg, rgb(247, 250, 252) 0%, rgb(243, 246, 249) 100%) !important;
  }

  /* Rimuove il "panel effect" del content-row (bordo + ombra + border-radius)
     che creava una separazione visibile tra il binario delle linguette a
     sinistra e l'area centrale. Senza questi il bg e' continuo e uniforme. */
  body.mondo5-page.mondo5-page .mondo5-content-row {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Scrollbar verticale nascosta (scroll con rotella/tasti/touch resta attivo).
   html:has() copre html quando contiene body.mondo5-page (serve perche' la
   scrollbar e' sull'elemento scrollante, tipicamente html). */
html:has(body.mondo5-page),
body.mondo5-page {
  scrollbar-width: none !important;
}
html:has(body.mondo5-page)::-webkit-scrollbar,
body.mondo5-page::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

@media (max-width: 991.98px) {
  body.mondo5-page .mondo5-drawer-handle--photos {
    left: 0 !important;
    right: auto !important;
    top: calc(var(--mondo5-mobile-handle-start) + (var(--mondo5-mobile-handle-step) * 2)) !important;
    border-radius: 0 18px 18px 0 !important;
  }

  body.mondo5-page .mondo5-drawer-handle--tweets {
    left: 0 !important;
    right: auto !important;
    top: calc(var(--mondo5-mobile-handle-start) + (var(--mondo5-mobile-handle-step) * 3)) !important;
    border-radius: 0 18px 18px 0 !important;
  }

  body.mondo5-page .mondo5-drawer-handle--comments {
    left: 0 !important;
    right: auto !important;
    top: calc(var(--mondo5-mobile-handle-start) + (var(--mondo5-mobile-handle-step) * 4)) !important;
    border-radius: 0 18px 18px 0 !important;
  }
}


/* ============================================================================
 * 6. PROFILE PAGE (model.html) - hero, chips, pricing cards, tab switcher
 *    Stili dedicati alla pagina profilo camgirl. Tutte le classi sono
 *    prefissate .profile-* / .pricing-card / .chip per evitare collisioni con
 *    le altre pagine mondo3.
 * ========================================================================== */

/* ---------- HERO --------------------------------------------------------- */
body.mondo5-page .profile-hero {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: stretch;
  margin: 0 0 24px 0;
  padding: 0;
}

body.mondo5-page .profile-hero__cover {
  position: relative;
  flex: 0 0 42%;
  max-width: 42%;
  border-radius: 16px;
  overflow: hidden;
  background: #e9eef5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

body.mondo5-page .profile-hero__cover > a {
  display: block;
  width: 100%;
  height: 100%;
}

body.mondo5-page .profile-hero__cover-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

body.mondo5-page .profile-hero__info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

body.mondo5-page .profile-hero__name {
  margin: 0;
  line-height: 1.1;
  word-break: break-word;
}

body.mondo5-page .profile-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.mondo5-page .profile-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.mondo5-page .profile-hero__contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #f7fafc;
  border: 1px solid #e6ecf2;
  border-radius: 10px;
}

body.mondo5-page .profile-hero__contact-item {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  font-size: 0.95rem;
}

body.mondo5-page .profile-hero__contact-label {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body.mondo5-page .profile-hero__contact-value {
  word-break: break-all;
}

body.mondo5-page .profile-hero__fake-warning {
  margin: 4px 0 0 0;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: #7a4b00;
  background: #fff8e6;
  border: 1px solid #ffe9a8;
  border-radius: 8px;
}

/* ---------- CHIP --------------------------------------------------------- */
body.mondo5-page .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  color: #2a2f37;
  background: #eef2f7;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
}

body.mondo5-page .chip--primary {
  color: #fff;
  background: var(--mondo5-color-primary, #c9388a);
  border-color: var(--mondo5-color-primary, #c9388a);
}

/* ---------- BUTTON VARIANTI --------------------------------------------- */
body.mondo5-page .button--outline {
  background: transparent !important;
  color: var(--mondo5-color-primary, #c9388a) !important;
  border: 1.5px solid var(--mondo5-color-primary, #c9388a) !important;
}

body.mondo5-page .button--outline:hover {
  background: var(--mondo5-color-primary, #c9388a) !important;
  color: #fff !important;
}

body.mondo5-page .button--ghost {
  background: transparent !important;
  color: #5a6270 !important;
  border: 1px solid transparent !important;
}

body.mondo5-page .button--ghost:hover {
  background: #f2f5f9 !important;
  color: #1e2430 !important;
}

body.mondo5-page .button--small {
  padding: 6px 14px !important;
  font-size: 0.85rem !important;
}

/* ---------- BIO ---------------------------------------------------------- */
body.mondo5-page .profile-bio {
  margin: 0 0 20px 0;
}

body.mondo5-page .profile-bio__text {
  line-height: 1.65;
  font-size: 0.98rem;
}

body.mondo5-page .profile-bio__text p {
  margin: 0 0 10px 0;
}

/* ---------- CALLOUT (banner ATTENZIONE alleggerito) --------------------- */
body.mondo5-page .profile-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  margin: 0 0 28px 0;
  background: #fff5f5;
  border: 1px solid #f8d7da;
  border-left: 4px solid var(--mondo5-color-primary, #c9388a);
  border-radius: 10px;
}

body.mondo5-page .profile-callout__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

body.mondo5-page .profile-callout__body {
  flex: 1 1 auto;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #4a2020;
}

body.mondo5-page .profile-callout__body strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
}

/* ---------- PRICING ------------------------------------------------------ */
body.mondo5-page .profile-pricing {
  margin: 0 0 32px 0;
  padding: 0;
}

body.mondo5-page .profile-pricing__header {
  margin: 0 0 20px 0;
  text-align: center;
}

body.mondo5-page .profile-pricing__title {
  margin: 0 0 10px 0;
}

body.mondo5-page .profile-pricing__guarantees {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: #4a5260;
}

body.mondo5-page .profile-pricing__guarantees li::before {
  content: "\2713";
  margin-right: 6px;
  color: #2ea043;
  font-weight: 700;
}

body.mondo5-page .profile-pricing__methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

body.mondo5-page .profile-pricing__methods img {
  height: 22px;
  width: auto;
  opacity: 0.85;
}

body.mondo5-page .profile-pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 0;
}

body.mondo5-page .profile-pricing__terms {
  margin-top: 18px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #5a6270;
  text-align: center;
}

body.mondo5-page .pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 20px 16px 18px 16px;
  background: #fff;
  border: 1px solid #e6ecf2;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

body.mondo5-page .pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  border-color: #d4dbe4;
}

body.mondo5-page .pricing-card__price {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

body.mondo5-page .pricing-card__desc {
  flex: 1 1 auto;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #2a2f37;
}

body.mondo5-page .pricing-card__badge {
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mondo5-color-primary, #c9388a);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(201, 56, 138, 0.3);
}

body.mondo5-page .pricing-card--featured {
  border: 2px solid var(--mondo5-color-primary, #c9388a);
  background: linear-gradient(180deg, #fff 0%, #fff5fa 100%);
}

body.mondo5-page .pricing-card--custom .importo {
  width: 70px;
  padding: 4px 8px;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  color: var(--mondo5-color-primary, #c9388a);
  background: #fff;
  border: 1px solid #e6ecf2;
  border-radius: 8px;
}

body.mondo5-page .pricing-card--gift {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
  padding: 18px 20px;
  color: #fff;
  background: linear-gradient(135deg, #1e2430 0%, #3a2a4a 100%);
  border: none;
  text-decoration: none;
}

body.mondo5-page .pricing-card--gift:hover {
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

body.mondo5-page .pricing-card--gift .pricing-card__desc {
  color: #fff;
  flex: 0 1 auto;
  font-weight: 500;
}

body.mondo5-page .pricing-card__gift-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

/* ---------- TABS --------------------------------------------------------- */
body.mondo5-page .profile-tabs {
  margin: 0 0 24px 0;
}

body.mondo5-page .profile-tabs__nav {
  display: flex;
  gap: 4px;
  margin: 0 0 16px 0;
  padding: 0;
  border-bottom: 2px solid #e6ecf2;
  overflow-x: auto;
  scrollbar-width: none;
}

body.mondo5-page .profile-tabs__nav::-webkit-scrollbar {
  display: none;
}

body.mondo5-page .profile-tabs__tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: #5a6270;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

body.mondo5-page .profile-tabs__tab:hover {
  color: #1e2430;
}

body.mondo5-page .profile-tabs__tab.is-active {
  color: var(--mondo5-color-primary, #c9388a);
  border-bottom-color: var(--mondo5-color-primary, #c9388a);
  font-weight: 600;
}

body.mondo5-page .profile-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #5a6270;
  background: #eef2f7;
  border-radius: 999px;
}

body.mondo5-page .profile-tabs__tab.is-active .profile-tabs__count {
  color: #fff;
  background: var(--mondo5-color-primary, #c9388a);
}

body.mondo5-page .profile-tabs__panel {
  padding: 0;
}

body.mondo5-page .profile-tabs__panel[hidden] {
  display: none !important;
}

/* ---------- RESPONSIVE --------------------------------------------------- */
@media (max-width: 767.98px) {
  body.mondo5-page .profile-hero {
    flex-direction: column;
    gap: 16px;
  }

  body.mondo5-page .profile-hero__cover {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  body.mondo5-page .profile-hero__cover-image {
    aspect-ratio: 4 / 3;
  }

  body.mondo5-page .profile-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.mondo5-page .profile-pricing__grid {
    grid-template-columns: 1fr;
  }

  body.mondo5-page .pricing-card--gift {
    flex-direction: column;
    text-align: center;
  }

  body.mondo5-page .profile-callout {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body.mondo5-page .profile-hero__cover {
    flex: 0 0 38%;
    max-width: 38%;
  }

  body.mondo5-page .profile-pricing__grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}


/* ============================================================================
 * 7. PROFILE STANDALONE (body.profile-standalone)
 *    Layout della pagina modella quando e' standalone (senza sidebar laterali).
 *    Il centro occupa il 100% della larghezza disponibile, ma costringiamo il
 *    contenuto profilo a un max-width leggibile e lo centriamo.
 *
 *    Il body.profile-standalone viene applicato in model.html dopo la
 *    rifattorizzazione a pagina singola (solo header mondo4 + contenuto centrale).
 * ========================================================================== */

body.profile-standalone .full-width-container {
  padding-top: 20px;
  padding-bottom: 40px;
}

body.profile-standalone .main-content-wrapper.profile-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 992px) {
  /* Hero piu' generoso a full width: cover piu' grande, info con padding laterale */
  body.profile-standalone .profile-hero {
    gap: 32px;
  }

  body.profile-standalone .profile-hero__cover {
    flex: 0 0 38%;
    max-width: 38%;
  }

  body.profile-standalone .profile-hero__cover-image {
    aspect-ratio: 4 / 5;
  }

  body.profile-standalone .profile-hero__info {
    padding: 8px 0;
  }

  /* Pricing grid puo' sfruttare piu' colonne a full width */
  body.profile-standalone .profile-pricing__grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  /* Tab panels: piu' respiro verticale */
  body.profile-standalone .profile-tabs__panel {
    padding: 8px 0 0 0;
  }
}

@media (max-width: 767.98px) {
  body.profile-standalone .main-content-wrapper.profile-page {
    padding: 0 12px;
  }

  body.profile-standalone .full-width-container {
    padding-top: 12px;
  }
}


/* ============================================================================
 * FINE mondo5-overrides.css
 * ============================================================================ */