/* =========================================================================
   KICKS HOME — same theme as #/auth (peach / navy / orange / mark)
   Layout rebuild. Does not touch backend.
   ========================================================================= */

.rf-home.kx-authhome,
body.kx-on-home,
body.kx-on-home .shell,
body.kx-on-home .shell-main {
  background: radial-gradient(120% 80% at 50% 0%, #FFF1D6 0%, #FFD9A3 100%) !important;
}
body.kx-on-home .shell-main {
  padding-top: 0 !important;
}

.kx-authhome > .rf-hero,
.kx-authhome > .kx-hero,
.kx-authhome > .kx-ticker,
.kx-authhome > .rf-promo,
.kx-authhome > .kx-widgets,
.kx-authhome > .kx-about {
  display: none !important;
}

.kh {
  padding: calc(12px + env(safe-area-inset-top)) 18px calc(28px + var(--nav-h, 64px));
  color: #14213D;
  font-family: "Space Grotesk", Inter, sans-serif;
}

.kh-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.kh-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 52px;
}
.kh-hi { flex: 1; min-width: 0; }
.kh-hi b {
  display: block;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #14213D;
}
.kh-hi span {
  display: block;
  margin-top: 2px;
  color: #5A5A5A;
  font-size: 12.5px;
}
.kh-ics { display: flex; gap: 6px; }
.kh-ics .rf-hero-ic,
.kh-ics button {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #14213D !important;
  color: #fff !important;
}

.kh-bal {
  background: #fff;
  border: 1.5px solid #E5D6B5;
  border-radius: 20px;
  padding: 18px 16px 16px;
  margin-bottom: 14px;
}
.kh-kicker {
  color: #FF6B1A;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.kh-amt {
  margin: 6px 0 8px;
  color: #14213D;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
}
.kh-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #5A5A5A;
  font-size: 12.5px;
  margin-bottom: 14px;
}
.kh-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kh-dep, .kh-wit, .kh-drop em {
  height: 48px;
  border: 0;
  border-radius: 12px;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kh-dep {
  background: linear-gradient(180deg, #FF8A3D 0%, #FF6B1A 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(255,107,26,.28);
}
.kh-wit {
  background: #14213D;
  color: #fff;
}

.kh-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.kh-quick button {
  background: #fff;
  border: 1.5px solid #E5D6B5;
  border-radius: 14px;
  padding: 12px 6px 10px;
  text-align: center;
  color: #14213D;
}
.kh-quick b {
  display: block;
  font-size: 12px;
  font-weight: 800;
}
.kh-quick span {
  display: block;
  margin-top: 3px;
  color: #8A7A5E;
  font-size: 10px;
}

.kh-drop {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  background: #14213D;
  color: #fff;
  border: 0;
  border-radius: 18px;
  padding: 18px 16px;
  margin-bottom: 14px;
}
.kh-drop small {
  display: block;
  color: #FF6B1A;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.kh-drop b {
  display: block;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 20px;
  font-weight: 400;
}
.kh-drop span { display: block; color: #ffffffb8; font-size: 12px; margin-top: 4px; }
.kh-drop em {
  display: grid;
  place-items: center;
  min-width: 88px;
  padding: 0 12px;
  background: linear-gradient(180deg, #FF8A3D 0%, #FF6B1A 100%);
  color: #fff;
  font-style: normal;
  box-shadow: 0 8px 18px rgba(255,107,26,.28);
}

.kh-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.kh-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  background: #fff;
  border: 1.5px solid #E5D6B5;
  border-radius: 14px;
  padding: 13px 14px;
  color: #14213D;
}
.kh-row b { display: block; font-size: 14px; font-weight: 800; }
.kh-row span { display: block; color: #8A7A5E; font-size: 12px; margin-top: 2px; }
.kh-row i { color: #FF6B1A; font-style: normal; font-size: 22px; font-weight: 300; }

.kh-about {
  background: #fff;
  border: 1.5px solid #E5D6B5;
  border-radius: 18px;
  padding: 18px 16px;
}
.kh-about-kicker {
  color: #FF6B1A;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 800;
}
.kh-about h3 {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 22px;
  font-weight: 400;
  margin: 6px 0 10px;
}
.kh-about p { color: #5A5A5A; font-size: 13px; line-height: 1.55; margin: 0 0 8px; }
.kh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kh-chips span {
  background: #FFF1D6;
  color: #14213D;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
}

body.kx-on-home .bottomnav {
  background: #FFF1D6 !important;
  border-top: 1px solid #E5D6B5 !important;
}
body.kx-on-home .bottomnav-inner { background: transparent !important; }
body.kx-on-home .nav-pill { background: #14213D !important; }
body.kx-on-home .nav-content.active,
body.kx-on-home .nav-item:has(.active) .nav-content,
body.kx-on-home .nav-content.active .nav-label { color: #FF6B1A !important; }

/* Splash uses latest Kicks mark without fighting React img src */
.splash img{
  opacity:0 !important;
}
.splash > div{
  width:72px !important;
  height:72px !important;
  background:url("assets/kicks-mark-192.png") center/contain no-repeat !important;
  border-radius:0 !important;
}