/*
 Theme Name:   Instant News Child
 Theme URI:    https://finsiddhi.com
 Description:  Child theme for Instant News. Bootstrap 5 responsive grid.
               Instagram-style vertical action bar on mobile.
 Author:       Nawal Patel
 Template:     instant-news
 Version:      4.1.0
 License:      GNU General Public License v2 or later
 Text Domain:  instant-news-child
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;700;800&display=swap');

/* ================================================================
   TOKENS
   ================================================================ */
:root {
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --bs-body-bg:          #f1f5f9;
  --bs-body-color:       #0f172a;
  --fs-accent:           #e63946;
  --fs-blue:             #2563eb;
  --fs-green:            #059669;
  --fs-muted:            #64748b;
  --fs-border:           #e2e8f0;
  --fs-font-head:        'Outfit', var(--bs-body-font-family);
  --fs-t:                .2s cubic-bezier(.4,0,.2,1);
}

/* ================================================================
   GLOBAL
   ================================================================ */
body { font-family: var(--bs-body-font-family) !important; }
h1,h2,h3,h4,h5,h6 { font-family: var(--fs-font-head) !important; }

/* ================================================================
   FIX 1 — MENU DESCRIPTIONS  (hide completely)
   ================================================================ */
.menu-description,
span.menu-description,
li .menu-description,
nav .menu-description,
.main-navigation .menu-description,
#site-navigation .menu-description,
.nav-menu .menu-description,
.sub-menu .menu-description {
  display:     none !important;
  visibility:  hidden !important;
  width:       0 !important;
  height:      0 !important;
  overflow:    hidden !important;
  position:    absolute !important;
  clip:        rect(0,0,0,0) !important;
}

/* ================================================================
   FIX 2 — BREADCRUMB: hide on homepage
   ================================================================ */
.blog .breadcrumb-trail,
.home .breadcrumb-trail,
.blog .breadcrumbs,
.home .breadcrumbs,
.blog nav[aria-label*="Breadcrumb"],
.home nav[aria-label*="Breadcrumb"] {
  display: none !important;
}
.blog .magazine-inside-wrap > header,
.home .magazine-inside-wrap > header { display: none !important; }

/* ================================================================
   FIX 3 — CATEGORY TAG (strip inline red, clean badge)
   ================================================================ */
.mag-post-category a,
.mag-post-category a[style] {
  display:         inline-block !important;
  padding:         .15em .6em !important;
  font-size:       .68rem !important;
  font-weight:     700 !important;
  letter-spacing:  .07em !important;
  text-transform:  uppercase !important;
  text-decoration: none !important;
  border-radius:   .35rem !important;
  color:           var(--fs-accent) !important;
  background:      rgba(230,57,70,.1) !important;
  border:          none !important;
  transition:      background var(--fs-t), color var(--fs-t) !important;
}
.mag-post-category a:hover {
  background: var(--fs-accent) !important;
  color:      #fff !important;
}

/* ================================================================
   FIX 4 — DESKTOP GRID
   KEY FIX: Do NOT set display:block on the feed container.
   Let Bootstrap's .row (display:flex) take over.
   We only reset the theme's own grid behaviour.
   ================================================================ */
.blog .magazine-archive-layout,
.home .magazine-archive-layout {
  /* Reset theme grid — DO NOT set display here; Bootstrap .row handles it */
  grid-template-columns: none !important;
  float:                 none !important;
  max-width:             100% !important;
  margin:                0 !important;
  padding-bottom:        80px !important;
}

/* Once JS adds Bootstrap .row class, flex layout takes over */
.blog .magazine-archive-layout.row,
.home .magazine-archive-layout.row {
  display:   flex !important;
  flex-wrap: wrap !important;
}

/* ── Bootstrap card overrides ─────────────────────────────── */
.mag-post-single.card {
  border:        none !important;
  border-radius: .85rem !important;
  box-shadow:    0 1px 4px rgba(0,0,0,.07), 0 3px 12px rgba(0,0,0,.06) !important;
  overflow:      hidden !important;
  transition:    box-shadow var(--fs-t), transform var(--fs-t) !important;
  height:        100% !important;
}
.mag-post-single.card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.14) !important;
  transform:  translateY(-3px) !important;
}

/* ── Image ─────────────────────────────────────────────────── */
.mag-post-img {
  aspect-ratio: 16/9;
  overflow:     hidden;
  background:   linear-gradient(135deg,#e2e8f0,#cbd5e1);
  position:     relative;   /* anchor for vertical action bar */
}
.mag-post-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .45s ease;
}
.mag-post-single.card:hover .mag-post-img img { transform: scale(1.05); }

/* ── Card body ─────────────────────────────────────────────── */
.mag-post-detail.card-body {
  padding:        1rem 1rem .5rem !important;
  display:        flex !important;
  flex-direction: column !important;
}

/* ── Title ─────────────────────────────────────────────────── */
.mag-post-title {
  font-family: var(--fs-font-head) !important;
  font-size:   1rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin:      .4rem 0 .5rem !important;
  flex:        1 !important;
  color:       var(--bs-body-color) !important;
}
.mag-post-title a {
  color:              inherit !important;
  text-decoration:    none !important;
  display:            -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow:           hidden !important;
  transition:         color var(--fs-t) !important;
}
.mag-post-title a:hover { color: var(--fs-accent) !important; }

/* ── Excerpt ───────────────────────────────────────────────── */
.mag-post-excerpt {
  font-size:          .84rem !important;
  color:              var(--fs-muted) !important;
  line-height:        1.6 !important;
  display:            -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow:           hidden !important;
  margin:             0 !important;
}

/* ── Meta ──────────────────────────────────────────────────── */
.mag-post-meta {
  display:     flex !important;
  align-items: center !important;
  gap:         8px !important;
  font-size:   .77rem !important;
  color:       var(--fs-muted) !important;
  flex-wrap:   wrap !important;
  margin:      .25rem 0 .4rem !important;
}
.mag-post-meta a        { color: var(--fs-muted) !important; text-decoration: none !important; }
.mag-post-meta a:hover  { color: var(--fs-accent) !important; }
.post-author a          { color: var(--bs-body-color) !important; font-weight: 600 !important; }

/* Card enter animation */
@keyframes fs-card-in {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
.magazine-archive-layout > article { animation: fs-card-in .35s ease both; }

/* ================================================================
   DESKTOP ACTION BAR  (≥ 768px)  — horizontal, bottom of card
   ================================================================ */
.fs-action-bar {
  display:     flex !important;
  align-items: center !important;
  gap:         4px !important;
  padding:     .5rem .75rem .75rem !important;
  border-top:  1px solid var(--fs-border) !important;
  margin-top:  auto !important;
}
.fs-spacer { flex: 1 !important; }

.fs-action-btn {
  display:                  inline-flex !important;
  align-items:              center !important;
  gap:                      5px !important;
  padding:                  6px 12px !important;
  border:                   none !important;
  border-radius:            20px !important;
  background:               transparent !important;
  cursor:                   pointer !important;
  font-family:              var(--bs-body-font-family) !important;
  font-size:                .8rem !important;
  font-weight:              600 !important;
  color:                    var(--fs-muted) !important;
  transition:               background var(--fs-t), color var(--fs-t), transform var(--fs-t) !important;
  white-space:              nowrap !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select:              none !important;
}
.fs-action-btn svg { width:18px; height:18px; flex-shrink:0; transition:fill var(--fs-t),transform var(--fs-t); }

/* Like */
.fs-action-btn.fs-like:hover,
.fs-action-btn.fs-like.active { color:var(--fs-accent) !important; background:rgba(230,57,70,.08) !important; }
.fs-action-btn.fs-like.active svg { fill:var(--fs-accent); stroke:var(--fs-accent); }
@keyframes fs-pop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} }
.fs-action-btn.fs-like.pop svg { animation: fs-pop .28s ease; }

/* Save */
.fs-action-btn.fs-save:hover,
.fs-action-btn.fs-save.active { color:var(--fs-blue) !important; background:rgba(37,99,235,.08) !important; }
.fs-action-btn.fs-save.active svg { fill:var(--fs-blue); stroke:var(--fs-blue); }

/* Share — single icon button, no popup */
.fs-action-btn.fs-share:hover { color:var(--fs-green) !important; background:rgba(5,150,105,.08) !important; }

/* ================================================================
   MOBILE INSTAGRAM VERTICAL ACTION BAR  (< 768px)
   Absolute-positioned on the RIGHT side of the image
   ================================================================ */
@media (max-width: 767.98px) {
  /* Hide the horizontal bar on mobile */
  .fs-action-bar { display: none !important; }

  /* Vertical bar floats on right edge of the image */
  .fs-vertical-bar {
    position:       absolute;
    right:          10px;
    bottom:         10px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
    z-index:        10;
  }

  .fs-v-btn {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            3px;
    background:     rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border:         none;
    border-radius:  50px;
    padding:        10px 8px;
    cursor:         pointer;
    color:          #fff;
    font-size:      .65rem;
    font-weight:    700;
    min-width:      42px;
    -webkit-tap-highlight-color: transparent;
    user-select:    none;
    transition:     background var(--fs-t), transform var(--fs-t);
  }
  .fs-v-btn:active { transform: scale(.92); }
  .fs-v-btn svg { width:22px; height:22px; }

  /* Like active state */
  .fs-v-btn.fs-like.active { background: rgba(230,57,70,.8); }
  .fs-v-btn.fs-like.active svg { fill:#fff; stroke:#fff; }
  @keyframes fs-vpop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }
  .fs-v-btn.fs-like.pop svg { animation: fs-vpop .28s ease; }

  /* Save active */
  .fs-v-btn.fs-save.active { background: rgba(37,99,235,.8); }
  .fs-v-btn.fs-save.active svg { fill:#fff; stroke:#fff; }
}

/* ================================================================
   SCROLL PROGRESS BAR
   ================================================================ */
.fs-scroll-progress {
  position:       fixed;
  top: 0; left: 0;
  height:         3px;
  width:          0%;
  background:     linear-gradient(90deg, var(--fs-accent), #fb923c);
  z-index:        99999;
  pointer-events: none;
  transition:     width .08s linear;
  border-radius:  0 2px 2px 0;
}

/* ================================================================
   PULL-TO-REFRESH  (mobile)
   ================================================================ */
.fs-ptr {
  display:     flex;
  align-items: center;
  justify-content: center;
  height:      0;
  overflow:    hidden;
  transition:  height .25s ease;
  font-size:   .8rem;
  color:       var(--fs-muted);
  gap:         8px;
}
.fs-ptr.show { height: 50px; }
.fs-ptr-spin {
  width: 18px; height: 18px;
  border: 2.5px solid var(--fs-border);
  border-top-color: var(--fs-accent);
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================================
   STICKY BOTTOM NAV — mobile only
   ================================================================ */
.fs-bottom-nav {
  display: none;
  position: fixed;
  bottom:0; left:0; right:0;
  height: 58px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--fs-border);
  z-index: 9999;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
}
@media (max-width: 767.98px) {
  .fs-bottom-nav { display: flex; }
  body, #page    { padding-bottom: 58px !important; }
}
.fs-bottom-nav a {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  color:          var(--fs-muted);
  text-decoration:none;
  font-size:      .6rem;
  font-weight:    600;
  padding:        5px 8px;
  border-radius:  10px;
  transition:     color var(--fs-t);
  min-width:      50px;
  text-align:     center;
}
.fs-bottom-nav a svg   { width:22px; height:22px; }
.fs-bottom-nav a.active,
.fs-bottom-nav a:hover { color: var(--fs-accent); }

/* ================================================================
   SOURCE ATTRIBUTION BADGE
   ================================================================ */
.rss-source-attribution { display:inline-flex; align-items:center; gap:4px; font-size:.73rem; color:var(--fs-muted); margin-left:4px; }
.rss-source-attribution::before { content:'·'; color:#cbd5e1; margin-right:2px; }
.rss-source-attribution__link  { color:#457b9d; text-decoration:none; font-weight:600; }
.rss-source-attribution__link:hover { text-decoration:underline; }
.rss-source-attribution__link::after { content:' ↗'; font-size:.7em; }

/* ================================================================
   SINGLE / INNER PAGES — untouched
   ================================================================ */
.single .entry-content img { max-width:100% !important; height:auto !important; }

/* ================================================================
   LOGO + SITE TITLE — compact standard header size
   ================================================================ */

/* Limit logo image size */
.site-logo img,
.custom-logo,
img.custom-logo {
  max-height: 56px !important;
  width:      auto !important;
  max-width:  180px !important;
  object-fit: contain !important;
}

/* Compact the middle header area */
.middle-header-part { padding: 8px 0 !important; }
.middle-header-wrapper { gap: 12px !important; align-items: center !important; }
.site-branding { display: flex !important; align-items: center !important; gap: 10px !important; }

/* Site title text */
.site-title,
.site-title a {
  font-size:   1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin:      0 !important;
}
.site-description {
  font-size:  0.72rem !important;
  margin:     0 !important;
  opacity:    .7 !important;
  line-height:1.2 !important;
}

/* Site identity block */
.site-identity { padding: 0 !important; margin: 0 !important; }

/* Mobile: even more compact */
@media (max-width: 767.98px) {
  .site-logo img,
  .custom-logo {
    max-height: 44px !important;
    max-width:  140px !important;
  }
  .site-title, .site-title a { font-size: 1.1rem !important; }
  .middle-header-part        { padding:   6px 0 !important; }
}

/* ================================================================
   KILL OLD SHARE POPUP  (cached JS may still render it)
   ================================================================ */
.fs-share-popup,
.fs-share-popup.open,
.fs-share-popup *,
div[class*="share-popup"] {
  display:  none !important;
  opacity:  0    !important;
  pointer-events: none !important;
}

/* ================================================================
   PAGINATION — Older / Newer posts + numbered pages
   ================================================================ */

/* Wrapper */
.posts-navigation,
.post-navigation,
.navigation.pagination,
.nav-links {
  margin:   2rem 0 1rem !important;
  padding:  0 !important;
}

/* ── Older / Newer posts (prev-next style) ──────────────────── */
.nav-links {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  gap:             12px !important;
  flex-wrap:       wrap !important;
}

.nav-previous a,
.nav-next a {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             8px !important;
  padding:         10px 20px !important;
  border-radius:   50px !important;
  font-family:     var(--fs-font-head) !important;
  font-size:       .875rem !important;
  font-weight:     700 !important;
  text-decoration: none !important;
  background:      var(--fs-surface, #fff) !important;
  color:           var(--fs-text, #0f172a) !important;
  border:          2px solid var(--fs-border, #e2e8f0) !important;
  box-shadow:      0 2px 8px rgba(0,0,0,.07) !important;
  transition:      background var(--fs-t,.2s), color var(--fs-t,.2s),
                   border-color var(--fs-t,.2s), transform var(--fs-t,.2s),
                   box-shadow var(--fs-t,.2s) !important;
}

.nav-previous a:hover,
.nav-next a:hover {
  background:    var(--fs-accent, #e63946) !important;
  color:         #fff !important;
  border-color:  var(--fs-accent, #e63946) !important;
  transform:     translateY(-2px) !important;
  box-shadow:    0 6px 18px rgba(230,57,70,.25) !important;
}

/* Arrows */
.nav-previous a::before {
  content: '←';
  font-size: 1.1em;
}
.nav-next a::after {
  content: '→';
  font-size: 1.1em;
}

/* ── Numbered pagination ─────────────────────────────────────── */
.page-numbers,
.woocommerce-pagination ul,
.wp-pagenavi {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-wrap:       wrap !important;
  gap:             6px !important;
  list-style:      none !important;
  padding:         0 !important;
  margin:          2rem 0 !important;
}

.page-numbers li { list-style: none !important; }

.page-numbers a,
.page-numbers span,
.page-numbers .current {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  min-width:       40px !important;
  height:          40px !important;
  padding:         0 10px !important;
  border-radius:   50px !important;
  font-size:       .875rem !important;
  font-weight:     700 !important;
  text-decoration: none !important;
  color:           var(--fs-text, #0f172a) !important;
  background:      #fff !important;
  border:          2px solid var(--fs-border, #e2e8f0) !important;
  box-shadow:      0 1px 4px rgba(0,0,0,.06) !important;
  transition:      background var(--fs-t,.2s), color var(--fs-t,.2s),
                   border-color var(--fs-t,.2s), transform var(--fs-t,.2s) !important;
}

.page-numbers a:hover {
  background:   var(--fs-accent, #e63946) !important;
  color:        #fff !important;
  border-color: var(--fs-accent, #e63946) !important;
  transform:    translateY(-2px) !important;
}

.page-numbers .current {
  background:   var(--fs-accent, #e63946) !important;
  color:        #fff !important;
  border-color: var(--fs-accent, #e63946) !important;
}

/* Prev / Next arrows in numbered pagination */
.page-numbers .prev,
.page-numbers .next {
  background: var(--fs-primary, #0f172a) !important;
  color:      #fff !important;
  border-color: var(--fs-primary, #0f172a) !important;
}
.page-numbers .prev:hover,
.page-numbers .next:hover {
  background:   var(--fs-accent, #e63946) !important;
  border-color: var(--fs-accent, #e63946) !important;
  transform:    translateY(-2px) !important;
}

/* Dots */
.page-numbers .dots {
  background:   transparent !important;
  border-color: transparent !important;
  box-shadow:   none !important;
  color:        var(--fs-muted, #64748b) !important;
  cursor:       default !important;
}

/* Mobile — compact */
@media (max-width: 575.98px) {
  .page-numbers a,
  .page-numbers span { min-width: 34px !important; height: 34px !important; font-size: .8rem !important; }
  .nav-previous a,
  .nav-next a        { padding: 8px 16px !important; font-size: .82rem !important; }
}


/* ================================================================
   MOBILE VERTICAL BAR — Instagram Reels style (v4.1 update)
   Small transparent icons, count below, no dark pill background
   ================================================================ */
@media (max-width: 767.98px) {
  .fs-vertical-bar {
    position:       absolute !important;
    right:          8px !important;
    bottom:         8px !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            16px !important;
    z-index:        10 !important;
  }

  .fs-v-btn {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            2px !important;
    background:     transparent !important;   /* no dark pill */
    border:         none !important;
    border-radius:  0 !important;
    padding:        0 !important;
    cursor:         pointer !important;
    color:          #fff !important;
    font-size:      .65rem !important;
    font-weight:    700 !important;
    min-width:      unset !important;
    text-shadow:    0 1px 3px rgba(0,0,0,.7) !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select:    none !important;
    transition:     transform var(--fs-t,.2s) !important;
  }

  .fs-v-btn:active  { transform: scale(.88) !important; }

  /* Icon size — small like Instagram */
  .fs-v-btn svg {
    width:  24px !important;
    height: 24px !important;
    stroke: #fff !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) !important;
  }

  /* Count / label text below icon */
  .fs-v-btn span {
    font-size:   .62rem !important;
    font-weight: 700 !important;
    color:       #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.8) !important;
    line-height: 1 !important;
  }

  /* Like active — filled red heart */
  .fs-v-btn.fs-like.active svg {
    fill:         #e63946 !important;
    stroke:       #e63946 !important;
    filter:       drop-shadow(0 1px 4px rgba(230,57,70,.6)) !important;
  }

  /* Save active — filled white */
  .fs-v-btn.fs-save.active svg {
    fill:   #fff !important;
    stroke: #fff !important;
  }

  /* Pop animation */
  @keyframes fs-vpop {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.35); }
  }
  .fs-v-btn.fs-like.pop svg { animation: fs-vpop .28s ease !important; }
}

/* ================================================================
   PAGINATION — fix mobile alignment (same row, space-between)
   ================================================================ */
.posts-navigation .nav-links,
.post-navigation  .nav-links,
.navigation       .nav-links {
  display:         flex !important;
  flex-direction:  row !important;       /* force same row */
  flex-wrap:       nowrap !important;    /* never wrap */
  align-items:     center !important;
  justify-content: space-between !important;
  gap:             8px !important;
  width:           100% !important;
}

/* Each side takes its own half */
.nav-previous,
.nav-next {
  flex:       0 1 auto !important;
  max-width:  48% !important;
}

/* Newer posts always pushes to the right */
.nav-next { margin-left: auto !important; text-align: right !important; }

/* If only one exists, keep it in position */
.nav-previous:only-child { margin-right: auto !important; }
.nav-next:only-child      { margin-left:  auto !important; }

/* Compact on very small screens */
@media (max-width: 400px) {
  .nav-previous a,
  .nav-next a {
    padding:   8px 12px !important;
    font-size: .78rem !important;
  }
}

/* ================================================================
   MINIMAL GAP BETWEEN CARDS
   ================================================================ */

/* Override Bootstrap g-4 (24px) → 8px gap */
.blog .magazine-archive-layout.row,
.home .magazine-archive-layout.row {
  --bs-gutter-x: 8px !important;
  --bs-gutter-y: 8px !important;
  gap: 8px !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
}

/* Remove any extra margin Bootstrap cols add */
.blog .magazine-archive-layout > article.col,
.home .magazine-archive-layout > article.col {
  padding-left:  4px !important;
  padding-right: 4px !important;
  margin-bottom: 0 !important;
}

/* Card itself — no extra margin */
.mag-post-single.card {
  margin: 0 !important;
}

/* ================================================================
   VERTICAL BAR — mobile only, completely hidden on desktop
   ================================================================ */
.fs-vertical-bar {
  display: none !important;   /* hidden by default (desktop) */
}

@media (max-width: 767.98px) {
  .fs-vertical-bar {
    display: flex !important; /* show only on mobile */
  }
}

/* Also ensure desktop horizontal bar is visible on desktop */
@media (min-width: 768px) {
  .fs-action-bar { display: flex !important; }
}

/* ================================================================
   PAGINATION — hide post title inside nav, show arrow+label only
   ================================================================ */

/* Hide post title spans inside navigation links */
.nav-previous .post-title,
.nav-next     .post-title,
.nav-previous .nav-title,
.nav-next     .nav-title,
.nav-previous span + span,
.nav-next     span + span,
.posts-navigation .nav-previous .post-title,
.posts-navigation .nav-next     .post-title {
  display: none !important;
}

/* Show only the label (Older / Newer posts) cleanly */
.nav-previous a,
.nav-next a {
  white-space: nowrap !important;
  overflow:    hidden !important;
  max-width:   160px !important;
  text-overflow: ellipsis !important;
}