/* FINAL: make navbar tall enough for equal wallet/email spacing */
.nav-inner.png-nav-inner,
.nav-inner {
  height: 90px !important;
  min-height: 90px !important;
  max-height: 90px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

/* Keep wallet/email spacing inside the navbar exactly equal */
.png-wallet-card {
  height: 90px !important;
  min-height: 90px !important;
  max-height: 90px !important;
  display: grid !important;
  grid-template-rows: 10px 30px 10px 30px 10px !important;
  align-items: center !important;
}

/* FINAL: visually equalize wallet/email PNG spacing */
.png-wallet-card .wallet-line:not(.email-line) {
  transform: translateY(0) !important;
}

.png-wallet-card .wallet-line.email-line {
  transform: translateY(0) !important;
}

/* FINAL: make wallet/email PNG artwork visually fill the 75px rows */
.png-wallet-card .wallet-line {
  background-size: 100% 260% !important;
  background-position: center center !important;
}

/* FINAL: center/enlarge left Shop / Inventory / Buy KAS buttons only */
.png-shop-frame {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  overflow: visible !important;
}

/* Override generic png-nav-img-btn sizing ONLY for left shop frame */
.png-shop-frame #shopNavBtn,
.png-shop-frame #inventoryNavBtn,
.png-shop-frame #buyKasNavBtn {
  width: 78px !important;
  height: 64px !important;
  min-width: 78px !important;
  min-height: 64px !important;
  max-width: 78px !important;
  max-height: 64px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Enlarge and truly center the three PNG labels */
.png-shop-frame #shopNavBtn .nav-btn-img,
.png-shop-frame #inventoryNavBtn .nav-btn-img,
.png-shop-frame #buyKasNavBtn .nav-btn-img {
  height: 64px !important;
  max-height: 64px !important;
  width: auto !important;
  max-width: 78px !important;

  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;

  translate: none !important;
  transform: none !important;
}

/* FINAL: make left Shop / Inventory / Buy KAS background group 33% wider */
.png-shop-frame {
  width: 348px !important;
  min-width: 348px !important;
  max-width: 348px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  padding-left: 29px !important;
  padding-right: 10px !important;
}

/* FINAL: spread Shop / Inventory / Buy KAS into their 3 background sections */
.png-shop-frame {
  justify-content: space-between !important;
  gap: 0 !important;
  padding-left: 29px !important;
  padding-right: 18px !important;
}

.png-shop-frame #shopNavBtn {
  margin-left: -8px !important;
}

.png-shop-frame #inventoryNavBtn {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.png-shop-frame #buyKasNavBtn {
  margin-right: -8px !important;
}

/* FINAL: softer spread for Shop / Inventory / Buy KAS */
.png-shop-frame {
  justify-content: space-between !important;
  gap: 0 !important;
  padding-left: 29px !important;
  padding-right: 22px !important;
}

.png-shop-frame #shopNavBtn {
  margin-left: -3px !important;
}

.png-shop-frame #inventoryNavBtn {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.png-shop-frame #buyKasNavBtn {
  margin-right: -3px !important;
}

/* FINAL: Shop / Inventory / Buy KAS each centered in equal thirds */
.png-shop-frame {
  width: 348px !important;
  min-width: 348px !important;
  max-width: 348px !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: center !important;
  justify-items: center !important;

  gap: 0 !important;
  padding-left: 29px !important;
  padding-right: 12px !important;
}

/* Make each button fill its own third, then center the image inside */
.png-shop-frame #shopNavBtn,
.png-shop-frame #inventoryNavBtn,
.png-shop-frame #buyKasNavBtn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Remove all old sideways nudges */
.png-shop-frame #shopNavBtn .nav-btn-img,
.png-shop-frame #inventoryNavBtn .nav-btn-img,
.png-shop-frame #buyKasNavBtn .nav-btn-img {
  height: 64px !important;
  max-height: 64px !important;
  width: auto !important;
  max-width: 78px !important;

  display: block !important;
  margin: 0 auto !important;
  object-fit: contain !important;

  translate: none !important;
  transform: none !important;
}

/* FINAL POLISH: slightly enlarge Shop / Inventory / Buy KAS labels inside equal slots */
.png-shop-frame #shopNavBtn .nav-btn-img,
.png-shop-frame #inventoryNavBtn .nav-btn-img,
.png-shop-frame #buyKasNavBtn .nav-btn-img {
  height: 70px !important;
  max-height: 70px !important;
  max-width: 88px !important;

  width: auto !important;
  object-fit: contain !important;

  translate: none !important;
  transform: none !important;
}

/* FINAL POLISH: make Shop / Inventory / Buy KAS PNGs 20% bigger */
.png-shop-frame #shopNavBtn .nav-btn-img,
.png-shop-frame #inventoryNavBtn .nav-btn-img,
.png-shop-frame #buyKasNavBtn .nav-btn-img {
  height: 84px !important;
  max-height: 84px !important;
  max-width: 106px !important;

  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;

  translate: none !important;
  transform: none !important;
}

/* FINAL POLISH: Shop / Inventory / Buy KAS PNGs 10% bigger again */
.png-shop-frame #shopNavBtn .nav-btn-img,
.png-shop-frame #inventoryNavBtn .nav-btn-img,
.png-shop-frame #buyKasNavBtn .nav-btn-img {
  height: 92px !important;
  max-height: 92px !important;
  max-width: 116px !important;

  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;

  translate: none !important;
  transform: none !important;
}

/* FINAL POLISH: nudge Shop and Buy KAS inward slightly */
.png-shop-frame #shopNavBtn .nav-btn-img {
  translate: 5px 0 !important;
}

.png-shop-frame #inventoryNavBtn .nav-btn-img {
  translate: none !important;
}

.png-shop-frame #buyKasNavBtn .nav-btn-img {
  translate: -5px 0 !important;
}

/* FINAL POLISH: nudge Shop and Buy KAS inward slightly */
.png-shop-frame #shopNavBtn .nav-btn-img {
  translate: 5px 0 !important;
}

.png-shop-frame #inventoryNavBtn .nav-btn-img {
  translate: none !important;
}

.png-shop-frame #buyKasNavBtn .nav-btn-img {
  translate: -5px 0 !important;
}

/* FINAL: reduce Kaspa wallet + email card width by 25% */
.png-wallet-card {
  width: 264px !important;
  min-width: 264px !important;
  max-width: 264px !important;
}

/* Keep the clickable wallet/email rows inside the narrower PNG */
.png-wallet-card .wallet-line {
  width: 238px !important;
  min-width: 238px !important;
  max-width: 238px !important;
}

/* Keep copied text from overflowing */
.png-wallet-card .wallet-line #navAddr,
.png-wallet-card .wallet-line #navEmail,
#navAddr.clickcopy,
#navEmail.clickcopy {
  max-width: 210px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* FINAL: wallet/email width settled between old wide and too-narrow version */
.png-wallet-card {
  width: 310px !important;
  min-width: 310px !important;
  max-width: 310px !important;
}

/* Keep the clickable wallet/email rows fitting inside the new width */
.png-wallet-card .wallet-line {
  width: 284px !important;
  min-width: 284px !important;
  max-width: 284px !important;
}

/* Keep wallet/email text clean inside the wider settled card */
.png-wallet-card .wallet-line #navAddr,
.png-wallet-card .wallet-line #navEmail,
#navAddr.clickcopy,
#navEmail.clickcopy {
  max-width: 255px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* FINAL: allow JS to fit wallet/email text dynamically inside PNG */
.png-wallet-card .wallet-line #navAddr,
.png-wallet-card .wallet-line #navEmail,
#navAddr.clickcopy,
#navEmail.clickcopy {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

