/* Sathi Foods client-approved public visual refresh — 2026-08-18 */
:root{
  --sathi-deep:#073d32;
  --sathi-deep-2:#0a513e;
  --sathi-green:#0e5a3c;
  --sathi-orange:#f4511e;
  --sathi-orange-dark:#df3f0e;
  --sathi-gold:#f3b629;
  --sathi-cream:#fffaf2;
  --sathi-cream-2:#fff4e7;
  --sathi-ink:#15231d;
  --sathi-muted:#69746e;
  --sathi-line:#e9e6df;
  --sathi-shadow:0 14px 38px rgba(31,47,40,.07);
}

/* Public chrome: remove remaining legacy brown/orange-heavy styling. */
html:not(.sathi-mobile-pwa) .public-app-body{background:#fbfcf9;color:var(--sathi-ink)}
html:not(.sathi-mobile-pwa) .ck-header-v3{
  min-height:78px;padding:0 clamp(18px,4vw,58px);background:rgba(255,255,255,.97);
  border-bottom:1px solid #edf0ec;box-shadow:0 7px 24px rgba(19,53,39,.045)
}
html:not(.sathi-mobile-pwa) .ck-logo-v3{gap:11px}
html:not(.sathi-mobile-pwa) .ck-logo-v3>span{width:62px;height:62px;border-radius:15px;background:#fff5ec;box-shadow:0 8px 20px rgba(244,81,30,.13)}
html:not(.sathi-mobile-pwa) .ck-logo-v3 strong{color:#c93611;font-size:19px}
html:not(.sathi-mobile-pwa) .ck-logo-v3 small{color:#7b726b;font-size:10px}
html:not(.sathi-mobile-pwa) .ck-nav-v3{gap:clamp(20px,2.7vw,42px)}
html:not(.sathi-mobile-pwa) .ck-nav-v3 a{padding:26px 0 22px;color:#2a251f;font-size:13px;font-weight:800}
html:not(.sathi-mobile-pwa) .ck-nav-v3 a:hover,
html:not(.sathi-mobile-pwa) .ck-nav-v3 a.active{color:var(--sathi-orange)}
html:not(.sathi-mobile-pwa) .ck-nav-v3 a::after{bottom:13px;height:3px;background:var(--sathi-orange)}
html:not(.sathi-mobile-pwa) .header-primary-btn{background:var(--sathi-orange);box-shadow:0 9px 21px rgba(244,81,30,.19)}
html:not(.sathi-mobile-pwa) .header-text-link{color:#392b25}
html:not(.sathi-mobile-pwa) .header-icon-link{border-color:#e7e7e3;box-shadow:none;background:#fff}

/* Client-approved home layout */
html:not(.sathi-mobile-pwa) .sf-client-home{max-width:1280px;margin:0 auto;padding:18px 20px 44px;color:var(--sathi-ink)}
html:not(.sathi-mobile-pwa) .sf-client-hero{
  min-height:330px;grid-template-columns:.95fr 1.05fr;border-radius:27px;
  background:linear-gradient(112deg,#063c31 0%,#074b3b 48%,#071f1a 100%);
  box-shadow:0 16px 40px rgba(4,52,40,.12);border:1px solid rgba(255,255,255,.05)
}
html:not(.sathi-mobile-pwa) .sf-client-hero-copy{padding:38px 40px 34px}
html:not(.sathi-mobile-pwa) .sf-client-kicker{color:#f5cc3c;font-size:15px;font-weight:900;margin-bottom:7px}
html:not(.sathi-mobile-pwa) .sf-client-hero h1{font-size:clamp(38px,4vw,55px);letter-spacing:-1.8px;max-width:560px;margin-bottom:10px}
html:not(.sathi-mobile-pwa) .sf-client-hero p{font-size:17px;margin-bottom:18px;color:#f6fbf8}
html:not(.sathi-mobile-pwa) .sf-client-search{max-width:520px;min-height:58px;border-radius:18px;padding:5px 6px 5px 15px;box-shadow:none}
html:not(.sathi-mobile-pwa) .sf-client-search input{font-size:14px}
html:not(.sathi-mobile-pwa) .sf-client-search button{display:none}
html:not(.sathi-mobile-pwa) .sf-client-hero-actions{margin-top:13px}
html:not(.sathi-mobile-pwa) .sf-client-hero-actions a{padding:8px 13px;border-radius:999px;font-size:12px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}
html:not(.sathi-mobile-pwa) .sf-client-hero-actions a.secondary{background:rgba(255,255,255,.07)}
html:not(.sathi-mobile-pwa) .sf-client-hero-media{min-height:330px}
html:not(.sathi-mobile-pwa) .sf-client-hero-media img{filter:saturate(1.05) contrast(1.03)}
html:not(.sathi-mobile-pwa) .sf-client-hero-media:after{background:linear-gradient(90deg,#07483b 0%,rgba(7,72,59,.23) 32%,rgba(0,0,0,.08) 100%)}
html:not(.sathi-mobile-pwa) .sf-client-browse-pill{
  position:absolute;right:26px;top:50%;z-index:4;transform:translateY(-50%);display:inline-flex;align-items:center;gap:18px;
  padding:15px 21px;border-radius:999px;background:#fff;color:#18241f;text-decoration:none;font-size:14px;font-weight:900;
  box-shadow:0 11px 28px rgba(0,0,0,.12)
}
html:not(.sathi-mobile-pwa) .sf-client-browse-pill span{font-size:20px}

html:not(.sathi-mobile-pwa) .sf-client-promo-grid{gap:15px;margin:18px 0}
html:not(.sathi-mobile-pwa) .sf-client-promo{min-height:178px;border-radius:20px;padding:19px 20px;box-shadow:none}
html:not(.sathi-mobile-pwa) .sf-client-promo.is-offer{background:linear-gradient(135deg,#fff8df,#fffdf5);border-color:#f0e3ba}
html:not(.sathi-mobile-pwa) .sf-client-promo.is-reward{background:linear-gradient(135deg,#f3faee,#fbfff7);border-color:#dcead5}
html:not(.sathi-mobile-pwa) .sf-client-promo.is-referral{background:linear-gradient(135deg,#f2f8ff,#fbfdff);border-color:#dbe7f2}
html:not(.sathi-mobile-pwa) .sf-client-promo-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.72);font-size:34px}
html:not(.sathi-mobile-pwa) .sf-client-promo h2{font-size:22px;line-height:1.08}
html:not(.sathi-mobile-pwa) .sf-client-promo p{font-size:13px}
html:not(.sathi-mobile-pwa) .sf-client-promo a,
html:not(.sathi-mobile-pwa) .sf-client-copy-ref{padding:8px 14px;border-radius:8px}

html:not(.sathi-mobile-pwa) .sf-client-section{margin-top:17px;border-radius:19px;padding:15px 15px 17px;box-shadow:none;background:#fff}
html:not(.sathi-mobile-pwa) .sf-client-section-head{margin-bottom:12px}
html:not(.sathi-mobile-pwa) .sf-client-section-head h2{font-size:18px}
html:not(.sathi-mobile-pwa) .sf-client-section-head a{color:#5b655f}
html:not(.sathi-mobile-pwa) .sf-client-offer-rail{grid-auto-columns:minmax(190px,1fr);gap:11px}
html:not(.sathi-mobile-pwa) .sf-client-offer-card{border-radius:14px;box-shadow:none;border-color:#ecebe6}
html:not(.sathi-mobile-pwa) .sf-client-offer-image{height:125px}
html:not(.sathi-mobile-pwa) .sf-client-offer-image span{right:7px;top:7px;background:var(--sathi-orange);font-size:10px}
html:not(.sathi-mobile-pwa) .sf-client-offer-card button{background:var(--sathi-green);border-radius:8px}
html:not(.sathi-mobile-pwa) .sf-client-offer-price b{color:#dc4315}

html:not(.sathi-mobile-pwa) .sf-client-dashboard-grid{grid-template-columns:.83fr 1.38fr 1fr;gap:14px;margin-top:17px}
html:not(.sathi-mobile-pwa) .sf-client-panel{border-radius:18px;padding:15px;box-shadow:none}
html:not(.sathi-mobile-pwa) .sf-client-panel.active-order{background:#f5fbf1;border-color:#dfeadd}
html:not(.sathi-mobile-pwa) .sf-client-panel.coupons-panel{background:#fff9fc;border-color:#eadde5}
html:not(.sathi-mobile-pwa) .sf-client-panel-head h3{font-size:16px;color:#183f30}
html:not(.sathi-mobile-pwa) .sf-client-track-btn{background:#0f6d41}
html:not(.sathi-mobile-pwa) .sf-client-mini-grid{gap:12px;margin:14px 0}
html:not(.sathi-mobile-pwa) .sf-client-mini-grid>a{border-radius:16px;padding:15px;background:#fff;box-shadow:none}
html:not(.sathi-mobile-pwa) .sf-client-mini-grid>a:nth-child(1){background:#f6fbf7}
html:not(.sathi-mobile-pwa) .sf-client-mini-grid>a:nth-child(2){background:#fffaf6}
html:not(.sathi-mobile-pwa) .sf-client-mini-grid>a:nth-child(3){background:#fff8f5}
html:not(.sathi-mobile-pwa) .sf-client-mini-grid>a:nth-child(4){background:#f7f9ff}
html:not(.sathi-mobile-pwa) .sf-client-mini-grid strong{color:#0f6a40}
html:not(.sathi-mobile-pwa) .sf-client-product-rail{grid-auto-columns:minmax(190px,1fr);gap:11px}
html:not(.sathi-mobile-pwa) .sf-client-product-card{border-radius:14px}
html:not(.sathi-mobile-pwa) .sf-client-product-image{height:135px}
html:not(.sathi-mobile-pwa) .sf-client-add{background:#075340!important}
html:not(.sathi-mobile-pwa) .sf-client-trust-strip{margin-top:16px;background:#fff8e9;border:1px solid #f0eadb;border-radius:14px}

/* Explore Food / Drinks — replace old bright orange hero. */
html:not(.sathi-mobile-pwa) .food-explore-page-v3{background:#fbfcf9}
html:not(.sathi-mobile-pwa) .explore-hero-v3{
  padding:58px clamp(24px,6vw,82px) 50px;background:
  radial-gradient(circle at 87% 18%,rgba(255,255,255,.10),transparent 25%),
  linear-gradient(118deg,#073d32 0%,#0a513e 58%,#092c24 100%);
}
html:not(.sathi-mobile-pwa) .explore-hero-v3.is-drinks{background:
  radial-gradient(circle at 87% 18%,rgba(247,188,46,.12),transparent 24%),
  linear-gradient(118deg,#0d4737 0%,#365d38 62%,#172d25 100%)}
html:not(.sathi-mobile-pwa) .explore-hero-v3>div>span{color:#ffd44f}
html:not(.sathi-mobile-pwa) .explore-hero-v3 h1{color:#fff;letter-spacing:-2px}
html:not(.sathi-mobile-pwa) .explore-hero-v3 p{color:rgba(255,255,255,.82);max-width:650px}
html:not(.sathi-mobile-pwa) .explore-search-v3{box-shadow:0 14px 32px rgba(0,0,0,.12)}
html:not(.sathi-mobile-pwa) .explore-search-v3>span{color:var(--sathi-orange)}
html:not(.sathi-mobile-pwa) .explore-search-v3 button{background:var(--sathi-orange)}
html:not(.sathi-mobile-pwa) .explore-menu-filter-v4{max-width:1320px;background:#fff;border-color:#e8ebe7;box-shadow:0 10px 28px rgba(19,57,42,.045)}
html:not(.sathi-mobile-pwa) .explore-section-tabs-v4 a{color:#315143;border-color:#dde5df}
html:not(.sathi-mobile-pwa) .explore-section-tabs-v4 a.active{background:var(--sathi-orange);border-color:var(--sathi-orange);box-shadow:0 7px 17px rgba(244,81,30,.16)}
html:not(.sathi-mobile-pwa) .explore-filter-group-v4>strong{color:#6d776f}
html:not(.sathi-mobile-pwa) .explore-category-filter-v3{background:transparent}
html:not(.sathi-mobile-pwa) .explore-category-filter-v3 a{color:#345145;border-color:#e0e7e2}
html:not(.sathi-mobile-pwa) .explore-category-filter-v3 a.active{background:var(--sathi-green);border-color:var(--sathi-green);box-shadow:0 7px 17px rgba(14,90,60,.14)}
html:not(.sathi-mobile-pwa) .section-heading-v3 span{color:var(--sathi-orange)}
html:not(.sathi-mobile-pwa) .section-heading-v3 h2{color:#18392d}
html:not(.sathi-mobile-pwa) .clear-filter-v3{color:#bb411d;background:#fff3eb}

/* Combo packages: poster-first design using the supplied client creatives. */
html:not(.sathi-mobile-pwa) .sf-combo-page{max-width:1280px;padding:24px 20px 58px;color:var(--sathi-ink)}
html:not(.sathi-mobile-pwa) .sf-combo-hero{
  padding:34px 38px;border-radius:24px;align-items:center;background:
  radial-gradient(circle at 78% 30%,rgba(255,255,255,.12),transparent 24%),
  linear-gradient(118deg,#073d32,#0a513e 64%,#102c24);box-shadow:0 14px 34px rgba(13,69,52,.11)
}
html:not(.sathi-mobile-pwa) .sf-combo-hero span{color:#ffd24c}
html:not(.sathi-mobile-pwa) .sf-combo-hero h1{font-size:44px;letter-spacing:-1.6px}
html:not(.sathi-mobile-pwa) .sf-combo-hero p{color:#e9f4ef}
html:not(.sathi-mobile-pwa) .sf-combo-hero-actions{display:flex;gap:9px;flex-wrap:wrap}
html:not(.sathi-mobile-pwa) .sf-combo-hero-actions a{background:#fff;color:#164a37;border-radius:999px;padding:11px 16px}
html:not(.sathi-mobile-pwa) .sf-combo-hero-actions a.secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18)}
html:not(.sathi-mobile-pwa) .sf-combo-intro{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:15px 0}
html:not(.sathi-mobile-pwa) .sf-combo-intro>div{display:flex;flex-direction:column;gap:2px;padding:13px 16px;border:1px solid #e7ebe7;border-radius:15px;background:#fff}
html:not(.sathi-mobile-pwa) .sf-combo-intro b{color:#164f3b;font-size:13px}
html:not(.sathi-mobile-pwa) .sf-combo-intro span{color:#7a837e;font-size:11px}
html:not(.sathi-mobile-pwa) .sf-combo-grid{gap:17px;margin-top:16px}
html:not(.sathi-mobile-pwa) .sf-combo-card{border-color:#e6e9e5;border-radius:18px;box-shadow:0 10px 28px rgba(29,54,43,.055)}
html:not(.sathi-mobile-pwa) .sf-combo-media{height:220px;background:#f2f3ef}
html:not(.sathi-mobile-pwa) .sf-combo-card.is-poster-combo .sf-combo-media{height:auto;aspect-ratio:4/5;background:#1f130f}
html:not(.sathi-mobile-pwa) .sf-combo-card.is-poster-combo .sf-combo-media img{object-fit:cover}
html:not(.sathi-mobile-pwa) .sf-combo-media span{background:var(--sathi-orange)}
html:not(.sathi-mobile-pwa) .sf-combo-body h2{color:#17372d}
html:not(.sathi-mobile-pwa) .sf-combo-body p,
html:not(.sathi-mobile-pwa) .sf-combo-body ul{color:#63706a}
html:not(.sathi-mobile-pwa) .sf-combo-price strong{color:var(--sathi-orange)}
html:not(.sathi-mobile-pwa) .sf-combo-body button{background:var(--sathi-green);border-radius:10px}
html:not(.sathi-mobile-pwa) .sf-combo-body button:hover{background:#0a4933}

/* Public footer: deep green instead of the old brown footer. */
html:not(.sathi-mobile-pwa) .site-footer-v3{background:#092f27;color:#eef7f2}
html:not(.sathi-mobile-pwa) .footer-grid-v3 h4{color:#fff}
html:not(.sathi-mobile-pwa) .footer-grid-v3 a,
html:not(.sathi-mobile-pwa) .footer-grid-v3 span,
html:not(.sathi-mobile-pwa) .footer-brand-v3 p{color:#c4d8cf}

@media(max-width:1100px){
  html:not(.sathi-mobile-pwa) .ck-header-v3{grid-template-columns:auto 1fr auto;gap:18px}
  html:not(.sathi-mobile-pwa) .ck-nav-v3{gap:20px}
  html:not(.sathi-mobile-pwa) .header-action-label{display:none}
  html:not(.sathi-mobile-pwa) .sf-client-hero{grid-template-columns:1fr 1fr}
}
@media(max-width:950px){
  html:not(.sathi-mobile-pwa) .sf-client-home{padding:14px 14px 90px}
  html:not(.sathi-mobile-pwa) .sf-client-hero{grid-template-columns:1fr;min-height:0}
  html:not(.sathi-mobile-pwa) .sf-client-hero-media{height:245px;min-height:245px}
  html:not(.sathi-mobile-pwa) .sf-client-browse-pill{right:18px;top:auto;bottom:18px;transform:none}
  html:not(.sathi-mobile-pwa) .sf-client-promo-grid{grid-template-columns:1fr}
  html:not(.sathi-mobile-pwa) .sf-client-dashboard-grid{grid-template-columns:1fr}
  html:not(.sathi-mobile-pwa) .sf-client-mini-grid{grid-template-columns:repeat(2,1fr)}
  html:not(.sathi-mobile-pwa) .sf-combo-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  html:not(.sathi-mobile-pwa) .sf-client-home{padding:10px 10px 90px}
  html:not(.sathi-mobile-pwa) .sf-client-hero{border-radius:20px}
  html:not(.sathi-mobile-pwa) .sf-client-hero-copy{padding:24px 19px}
  html:not(.sathi-mobile-pwa) .sf-client-hero h1{font-size:34px}
  html:not(.sathi-mobile-pwa) .sf-client-hero p{font-size:15px}
  html:not(.sathi-mobile-pwa) .sf-client-hero-media{height:205px;min-height:205px}
  html:not(.sathi-mobile-pwa) .sf-client-browse-pill{padding:11px 15px;font-size:12px}
  html:not(.sathi-mobile-pwa) .sf-client-mini-grid{grid-template-columns:1fr 1fr}
  html:not(.sathi-mobile-pwa) .sf-client-offer-rail,
  html:not(.sathi-mobile-pwa) .sf-client-product-rail{grid-auto-columns:75vw}
  html:not(.sathi-mobile-pwa) .explore-hero-v3{padding:38px 18px 34px}
  html:not(.sathi-mobile-pwa) .explore-hero-v3 h1{font-size:38px}
  html:not(.sathi-mobile-pwa) .sf-combo-page{padding:12px 10px 90px}
  html:not(.sathi-mobile-pwa) .sf-combo-hero{padding:24px;display:block}
  html:not(.sathi-mobile-pwa) .sf-combo-hero h1{font-size:34px}
  html:not(.sathi-mobile-pwa) .sf-combo-hero-actions{margin-top:15px}
  html:not(.sathi-mobile-pwa) .sf-combo-intro{grid-template-columns:1fr}
  html:not(.sathi-mobile-pwa) .sf-combo-grid{grid-template-columns:1fr}
  html:not(.sathi-mobile-pwa) .sf-combo-card.is-poster-combo .sf-combo-media{aspect-ratio:4/5}
}


/* 2026-08-19 Explore filter/search polish.
   Desktop category chips wrap cleanly instead of forcing a browser scrollbar,
   and active chips always keep readable white text/icons. */
html:not(.sathi-mobile-pwa) .explore-menu-filter-v4{
  overflow:hidden;
}
html:not(.sathi-mobile-pwa) .explore-category-filter-v3 a.active,
html:not(.sathi-mobile-pwa) .explore-category-filter-v3 a.active span{
  color:#fff !important;
}
html:not(.sathi-mobile-pwa) .explore-section-tabs-v4 a.active,
html:not(.sathi-mobile-pwa) .explore-section-tabs-v4 a.active span{
  color:#fff !important;
}
@media (min-width:769px){
  html:not(.sathi-mobile-pwa) .explore-category-filter-v3{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    overflow:visible;
    scrollbar-width:none;
  }
  html:not(.sathi-mobile-pwa) .explore-category-filter-v3::-webkit-scrollbar{display:none}
  html:not(.sathi-mobile-pwa) .explore-category-filter-v3 a{
    min-height:40px;
    padding:0 14px;
    border-radius:12px;
    line-height:1.15;
    white-space:nowrap;
  }
}
@media (max-width:768px){
  html:not(.sathi-mobile-pwa) .explore-menu-filter-v4{overflow:visible}
  html:not(.sathi-mobile-pwa) .explore-category-filter-v3{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  html:not(.sathi-mobile-pwa) .explore-category-filter-v3::-webkit-scrollbar{display:none}
}

/* =========================================================
   2026-08-23 final Recommended-card cart action correction
   Desktop: cart icon + Add pill. Mobile browser: icon-only square.
   Keeps installed PWA styling separate.
   ========================================================= */
html:not(.sathi-mobile-pwa) .sf-client-product-card > div > div {
  gap: 10px;
}

html:not(.sathi-mobile-pwa) .sf-client-product-card form[data-ajax-cart] {
  margin: 0 !important;
  flex: 0 0 auto !important;
  display: block !important;
}

html:not(.sathi-mobile-pwa) .sf-client-product-card .sf-client-add {
  width: auto !important;
  min-width: 76px !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg,#ff7346 0%,#f4511e 62%,#df3f0e 100%) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 6px 15px rgba(244,81,30,.20) !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: transform .16s ease,box-shadow .16s ease,filter .16s ease !important;
}

html:not(.sathi-mobile-pwa) .sf-client-product-card .sf-client-add:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(244,81,30,.26) !important;
  filter: saturate(1.04) !important;
}

html:not(.sathi-mobile-pwa) .sf-client-product-card .sf-client-add:active {
  transform: translateY(0) scale(.97) !important;
}

html:not(.sathi-mobile-pwa) .sf-client-product-card .sf-client-add .add-cart-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

html:not(.sathi-mobile-pwa) .sf-client-product-card .sf-client-add [data-cart-button-label] {
  display: inline !important;
  color: #fff !important;
  font: inherit !important;
  line-height: 1 !important;
}

@media (max-width: 820px) {
  html:not(.sathi-mobile-pwa) .sf-client-product-card > div > div {
    gap: 7px;
  }

  html:not(.sathi-mobile-pwa) .sf-client-product-card form[data-ajax-cart] {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-product-card .sf-client-add {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    gap: 0 !important;
    font-size: 0 !important;
    box-shadow: 0 6px 14px rgba(244,81,30,.24) !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-product-card .sf-client-add [data-cart-button-label] {
    display: none !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-product-card .sf-client-add .add-cart-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex-basis: 20px !important;
  }
}