/*
 * KEMMO STOREFRONT V2
 * Current visual system.
 *
 * Goal:
 * compact marketplace layout
 * without duplicate category rails.
 */

:root{
  --k2-ink:#0b1532;
  --k2-muted:#748097;
  --k2-line:#e7ebf4;
  --k2-blue:#2864ff;
  --k2-purple:#6540f5;
}


/* =====================================
   PAGE
===================================== */

body{
  background:
    linear-gradient(
      180deg,
      #ffffff 0,
      #f7f9ff 460px,
      #f8faff 100%
    ) !important;
}


/*
 * Main content width.
 */
.container{
  width:
    min(
      1180px,
      calc(100% - 32px)
    ) !important;

  margin-left:auto !important;
  margin-right:auto !important;

  padding-top:
    16px !important;
}


/* =====================================
   HEADER
===================================== */

.navbar.kp-navbar-v1{
  position:sticky !important;
  top:0 !important;

  z-index:9000 !important;

  border:0 !important;

  border-bottom:
    1px solid
    rgba(226,231,241,.92)
    !important;

  background:
    rgba(255,255,255,.96)
    !important;

  box-shadow:
    0 5px 22px
    rgba(27,47,95,.045)
    !important;

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}


.kp-header-wrap-v1{
  width:
    min(
      1180px,
      calc(100% - 32px)
    ) !important;

  margin:
    0 auto !important;
}


.kp-header-main-v1{
  display:grid !important;

  grid-template-columns:
    auto
    minmax(240px,1fr)
    auto !important;

  align-items:center !important;

  gap:
    18px !important;

  min-height:
    58px !important;

  padding:
    0 !important;
}


.kp-brand-v1{
  color:
    var(--k2-ink) !important;

  font-size:
    23px !important;

  line-height:
    1 !important;

  font-weight:
    950 !important;

  letter-spacing:
    -.055em !important;

  text-decoration:
    none !important;
}


/* =====================================
   SEARCH
===================================== */

.kp-header-search-v1{
  position:relative !important;

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

  height:
    38px !important;

  overflow:hidden !important;

  border:
    1px solid
    #e1e6f0 !important;

  border-radius:
    12px !important;

  background:
    #f9faff !important;

  box-shadow:
    none !important;
}


.kp-header-search-v1:focus-within{
  border-color:
    rgba(48,99,245,.38)
    !important;

  background:
    #fff !important;

  box-shadow:
    0 0 0 3px
    rgba(48,99,245,.06)
    !important;
}


.kp-search-icon-v1{
  display:grid !important;
  place-items:center !important;

  width:
    38px !important;

  color:
    #96a0b4 !important;
}


.kp-search-icon-v1 svg{
  width:
    16px !important;

  height:
    16px !important;
}


.kp-header-search-v1
input[type="search"]{
  min-width:0 !important;

  flex:1 !important;

  height:100% !important;

  padding:
    0 4px !important;

  border:0 !important;
  outline:0 !important;

  background:
    transparent !important;

  color:
    #172039 !important;

  font-size:
    11px !important;

  font-weight:
    650 !important;
}


.kp-header-search-v1
input[type="search"]::placeholder{
  color:
    #9ba5b7 !important;
}


.kp-search-submit-v1{
  display:grid !important;
  place-items:center !important;

  width:
    32px !important;

  height:
    32px !important;

  margin-right:
    3px !important;

  padding:0 !important;

  border:0 !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      135deg,
      #3474ff,
      #2361ee
    ) !important;

  color:#fff !important;

  box-shadow:
    none !important;
}


/* =====================================
   ACCOUNT + CHAT
===================================== */

.kp-actions-v1{
  display:flex !important;
  align-items:center !important;

  gap:
    6px !important;
}


.kp-actions-v1
.kemmo-buyer-account-btn-v1{
  position:static !important;

  min-width:0 !important;

  height:
    36px !important;

  margin:0 !important;

  padding:
    0 11px !important;

  border:
    1px solid
    #e2e7f0 !important;

  border-radius:
    12px !important;

  background:
    #fff !important;

  color:
    #18213a !important;

  font-size:
    10px !important;

  font-weight:
    900 !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}


.kp-actions-v1
.kemmo-buyer-account-dot-v1{
  width:
    6px !important;

  height:
    6px !important;

  margin-right:
    6px !important;

  box-shadow:
    0 0 0 3px
    rgba(38,202,119,.12)
    !important;
}


.kp-chat-v1{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:
    6px !important;

  height:
    36px !important;

  padding:
    0 12px !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      135deg,
      #345ef5,
      #6541ef
    ) !important;

  color:
    #fff !important;

  font-size:
    10px !important;

  font-weight:
    850 !important;

  text-decoration:
    none !important;

  box-shadow:
    none !important;
}


.kp-chat-v1 svg{
  width:
    14px !important;

  height:
    14px !important;
}


/* =====================================
   SINGLE CATEGORY NAV
===================================== */

.kp-category-shell-v1{
  border-top:
    1px solid
    rgba(231,235,243,.8)
    !important;
}


.kp-category-nav-v1{
  display:flex !important;
  align-items:center !important;

  gap:
    5px !important;

  min-height:
    39px !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  scrollbar-width:none !important;
}


.kp-category-nav-v1::-webkit-scrollbar{
  display:none !important;
}


.kp-category-link-v1{
  display:flex !important;
  align-items:center !important;

  flex:none !important;

  height:
    28px !important;

  padding:
    0 11px !important;

  border-radius:
    9px !important;

  color:
    #26304a !important;

  font-size:
    9px !important;

  font-weight:
    800 !important;

  white-space:
    nowrap !important;

  text-decoration:
    none !important;
}


.kp-category-link-v1.is-active{
  background:
    linear-gradient(
      135deg,
      #6848f7,
      #542ff0
    ) !important;

  color:
    #fff !important;

  box-shadow:
    0 5px 13px
    rgba(93,57,238,.18)
    !important;
}


/* =====================================
   HERO
===================================== */

.hero.kp-hero-v1{
  position:relative !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1.12fr)
    minmax(280px,.88fr)
    !important;

  min-height:
    280px !important;

  height:auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  border:
    0 !important;

  border-radius:
    19px !important;

  background:
    radial-gradient(
      circle at 82% 45%,
      rgba(61,99,255,.44),
      transparent 31%
    ),
    radial-gradient(
      circle at 98% 0,
      rgba(181,46,255,.28),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      #070c30 0%,
      #10185c 55%,
      #17277d 100%
    )
    !important;

  box-shadow:
    0 14px 38px
    rgba(31,51,131,.11)
    !important;
}


.kp-hero-copy-v1{
  position:relative !important;

  z-index:5 !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  padding:
    30px
    10px
    28px
    35px !important;
}


.kp-hero-badge-v1{
  align-self:flex-start !important;

  min-height:
    23px !important;

  padding:
    0 9px !important;

  gap:
    6px !important;

  border-radius:
    999px !important;

  font-size:
    7px !important;
}


.hero.kp-hero-v1
.kp-title-v1{
  max-width:
    540px !important;

  margin:
    12px 0 0 !important;

  color:
    #fff !important;

  font-size:
    clamp(
      32px,
      3.6vw,
      50px
    ) !important;

  line-height:
    1 !important;

  letter-spacing:
    -.055em !important;
}


.hero.kp-hero-v1
.kp-desc-v1{
  max-width:
    470px !important;

  margin:
    12px 0 0 !important;

  color:
    rgba(237,242,255,.78)
    !important;

  font-size:
    11px !important;

  line-height:
    1.55 !important;
}


.kp-stats-v1{
  display:flex !important;

  flex-wrap:wrap !important;

  gap:
    6px !important;

  margin-top:
    17px !important;
}


.kp-stat-v1{
  min-height:
    34px !important;

  gap:
    6px !important;

  padding:
    0 8px !important;

  border-radius:
    10px !important;
}


.kp-stat-icon-v1{
  width:
    22px !important;

  height:
    22px !important;

  border-radius:
    7px !important;
}


.kp-stat-icon-v1 svg{
  width:
    12px !important;

  height:
    12px !important;
}


.kp-stat-copy-v1 strong{
  font-size:
    7px !important;
}


.kp-stat-copy-v1 small{
  margin-top:
    3px !important;

  font-size:
    6px !important;
}


/* =====================================
   HERO ART
===================================== */

.kp-hero-art-v1{
  position:relative !important;

  min-height:
    280px !important;

  overflow:
    hidden !important;
}


.kp-art-glow-v1{
  width:
    330px !important;

  height:
    330px !important;

  right:
    -40px !important;

  top:
    -26px !important;
}


.kp-phone-v1{
  top:
    34px !important;

  right:
    54px !important;

  width:
    128px !important;

  height:
    210px !important;

  border-width:
    6px !important;

  border-radius:
    27px !important;
}


.kp-app-grid-v1{
  gap:
    8px !important;

  padding:
    45px
    17px
    16px !important;
}


.kp-app-v1{
  height:
    38px !important;

  border-radius:
    12px !important;

  font-size:
    15px !important;
}


.kp-float-game-v1{
  width:
    40px !important;

  height:
    40px !important;

  left:
    17px !important;

  top:
    102px !important;
}


.kp-float-gem-v1{
  width:
    40px !important;

  height:
    40px !important;

  right:
    14px !important;

  top:
    27px !important;
}


.kp-float-bolt-v1{
  width:
    38px !important;

  height:
    38px !important;

  right:
    17px !important;

  bottom:
    48px !important;
}


/* =====================================
   MARKETPLACE
===================================== */

.kemmo-hub-v1{
  margin-top:
    22px !important;

  padding:
    0 !important;
}


.kemmo-hub-v1-head{
  margin-bottom:
    12px !important;
}


.kemmo-hub-v1-kicker{
  font-size:
    8px !important;

  letter-spacing:
    .14em !important;
}


.kemmo-hub-v1-title{
  margin-top:
    5px !important;

  font-size:
    25px !important;

  line-height:
    1.05 !important;

  letter-spacing:
    -.045em !important;
}


.kemmo-hub-v1-sub{
  max-width:
    680px !important;

  margin-top:
    5px !important;

  font-size:
    10px !important;

  line-height:
    1.45 !important;
}


.kemmo-hub-v1-grid{
  display:grid !important;

  grid-template-columns:
    repeat(3,minmax(0,1fr))
    !important;

  gap:
    10px !important;
}


.kemmo-hub-card-v1,
.kemmo-hub-card-v1.digital,
.kemmo-hub-card-v1.game,
.kemmo-hub-card-v1.ppob{
  grid-column:
    auto !important;

  grid-row:
    auto !important;

  min-width:
    0 !important;

  min-height:
    184px !important;

  height:
    184px !important;

  padding:
    16px !important;

  border-radius:
    17px !important;

  overflow:
    hidden !important;

  box-shadow:
    0 8px 28px
    rgba(34,52,105,.065)
    !important;
}


.kemmo-hub-card-v1.digital{
  background:
    linear-gradient(
      135deg,
      #f9fbff,
      #eef6ff
    ) !important;
}


.kemmo-hub-card-v1.game{
  background:
    linear-gradient(
      135deg,
      #fbf9ff,
      #f3efff
    ) !important;
}


.kemmo-hub-card-v1.ppob{
  background:
    linear-gradient(
      135deg,
      #182d87,
      #315ff2 66%,
      #25add0
    ) !important;

  color:
    #fff !important;
}


.kemmo-hub-card-v1.ppob
.kemmo-hub-name-v1,

.kemmo-hub-card-v1.ppob
.kemmo-hub-desc-v1,

.kemmo-hub-card-v1.ppob
.kemmo-hub-count-v1{
  color:
    #fff !important;
}


.kemmo-hub-card-top-v1{
  min-height:
    35px !important;

  margin-bottom:
    13px !important;
}


.kemmo-hub-icon-v1{
  width:
    38px !important;

  height:
    38px !important;

  border-radius:
    12px !important;

  font-size:
    18px !important;
}


.kemmo-hub-status-v1{
  min-height:
    21px !important;

  padding:
    0 7px !important;

  border-radius:
    999px !important;

  font-size:
    7px !important;
}


.kemmo-hub-name-v1{
  margin:0 !important;

  font-size:
    17px !important;

  line-height:
    1.12 !important;
}


.kemmo-hub-desc-v1{
  margin-top:
    7px !important;

  min-height:
    38px !important;

  font-size:
    9px !important;

  line-height:
    1.42 !important;

  display:
    -webkit-box !important;

  -webkit-line-clamp:
    3;

  -webkit-box-orient:
    vertical;

  overflow:
    hidden !important;
}


.kemmo-hub-foot-v1{
  margin-top:
    11px !important;
}


.kemmo-hub-count-v1{
  font-size:
    8px !important;

  line-height:
    1.25 !important;
}


.kemmo-hub-open-v1{
  font-size:
    8px !important;
}


/* =====================================
   PRODUCT AREA
===================================== */

#products{
  margin-top:
    25px !important;
}


.store-title{
  font-size:
    27px !important;

  letter-spacing:
    -.04em !important;
}


.store-sub{
  font-size:
    11px !important;
}


/* =====================================
   MOBILE — THIS IS THE IMPORTANT PART
===================================== */

@media(max-width:760px){

  .container{
    width:
      calc(100% - 20px)
      !important;

    padding-top:
      9px !important;
  }


  .kp-header-wrap-v1{
    width:
      calc(100% - 20px)
      !important;
  }


  /*
   * HEADER ROW
   */

  .kp-header-main-v1{
    grid-template-columns:
      auto
      1fr !important;

    gap:
      6px 8px !important;

    min-height:
      0 !important;

    padding:
      6px 0
      5px !important;
  }


  .kp-brand-v1{
    grid-column:1 !important;
    grid-row:1 !important;

    font-size:
      19px !important;
  }


  .kp-actions-v1{
    grid-column:2 !important;
    grid-row:1 !important;

    justify-content:
      flex-end !important;
  }


  .kp-header-search-v1{
    grid-column:
      1/-1 !important;

    grid-row:
      2 !important;

    height:
      36px !important;
  }


  .kp-header-search-v1
  input[type="search"]{
    font-size:
      10px !important;
  }


  .kp-search-icon-v1{
    width:
      34px !important;
  }


  .kp-search-submit-v1{
    width:
      30px !important;

    height:
      30px !important;
  }


  .kp-actions-v1
  .kemmo-buyer-account-btn-v1{
    height:
      32px !important;

    padding:
      0 9px !important;

    font-size:
      9px !important;
  }


  .kp-chat-v1{
    width:
      32px !important;

    height:
      32px !important;

    padding:
      0 !important;
  }


  .kp-chat-v1 span{
    display:none !important;
  }


  /*
   * CATEGORY NAV
   */

  .kp-category-nav-v1{
    min-height:
      32px !important;

    gap:
      2px !important;
  }


  .kp-category-link-v1{
    height:
      23px !important;

    padding:
      0 8px !important;

    border-radius:
      7px !important;

    font-size:
      7.5px !important;
  }


  /*
   * HERO
   */

  .hero.kp-hero-v1{
    display:block !important;

    min-height:
      185px !important;

    height:
      185px !important;

    margin-top:
      6px !important;

    border-radius:
      16px !important;
  }


  .kp-hero-copy-v1{
    height:
      100% !important;

    box-sizing:
      border-box !important;

    justify-content:
      center !important;

    padding:
      13px
      13px
      12px !important;
  }


  .kp-hero-badge-v1{
    min-height:
      17px !important;

    padding:
      0 6px !important;

    font-size:
      5.8px !important;
  }


  .kp-live-dot-v1{
    width:
      4px !important;

    height:
      4px !important;
  }


  .hero.kp-hero-v1
  .kp-title-v1{
    max-width:
      67% !important;

    margin-top:
      7px !important;

    font-size:
      clamp(
        22px,
        6.9vw,
        28px
      ) !important;

    line-height:
      .98 !important;
  }


  .hero.kp-hero-v1
  .kp-desc-v1{
    max-width:
      64% !important;

    margin-top:
      6px !important;

    font-size:
      8px !important;

    line-height:
      1.35 !important;
  }


  .kp-stats-v1{
    gap:
      3px !important;

    margin-top:
      8px !important;
  }


  .kp-stat-v1{
    min-height:
      23px !important;

    gap:
      3px !important;

    padding:
      0 4px !important;

    border-radius:
      7px !important;
  }


  .kp-stat-icon-v1{
    width:
      15px !important;

    height:
      15px !important;

    border-radius:
      5px !important;
  }


  .kp-stat-icon-v1 svg{
    width:
      9px !important;

    height:
      9px !important;
  }


  .kp-stat-copy-v1 strong{
    font-size:
      5px !important;
  }


  .kp-stat-copy-v1 small{
    display:none !important;
  }


  /*
   * HERO PHONE
   */

  .kp-hero-art-v1{
    position:absolute !important;

    inset:0 !important;

    min-height:0 !important;

    pointer-events:none !important;
  }


  .kp-art-glow-v1{
    width:
      165px !important;

    height:
      165px !important;

    top:
      7px !important;

    right:
      -55px !important;
  }


  .kp-phone-v1{
    top:
      29px !important;

    right:
      -19px !important;

    width:
      75px !important;

    height:
      124px !important;

    border-width:
      4px !important;

    border-radius:
      18px !important;

    opacity:
      .82 !important;
  }


  .kp-phone-v1::before{
    width:
      35px !important;

    height:
      4px !important;

    top:
      5px !important;
  }


  .kp-app-grid-v1{
    gap:
      4px !important;

    padding:
      27px
      9px
      8px !important;
  }


  .kp-app-v1{
    height:
      19px !important;

    border-radius:
      6px !important;

    font-size:
      8px !important;
  }


  .kp-float-game-v1{
    display:none !important;
  }


  .kp-float-gem-v1{
    width:
      23px !important;

    height:
      23px !important;

    top:
      12px !important;

    right:
      5px !important;
  }


  .kp-float-bolt-v1{
    width:
      22px !important;

    height:
      22px !important;

    right:
      48px !important;

    bottom:
      8px !important;
  }


  .kp-float-v1 svg{
    width:
      13px !important;

    height:
      13px !important;
  }


  /*
   * MARKETPLACE TITLE
   */

  .kemmo-hub-v1{
    margin-top:
      13px !important;
  }


  .kemmo-hub-v1-head{
    margin-bottom:
      8px !important;
  }


  .kemmo-hub-v1-kicker{
    font-size:
      7px !important;
  }


  .kemmo-hub-v1-title{
    margin-top:
      3px !important;

    font-size:
      19px !important;
  }


  .kemmo-hub-v1-sub{
    margin-top:
      4px !important;

    font-size:
      8px !important;

    line-height:
      1.35 !important;
  }


  /*
   * THREE CARDS — ONE ROW
   */

  .kemmo-hub-v1-grid{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;

    gap:
      6px !important;
  }


  .kemmo-hub-card-v1,
  .kemmo-hub-card-v1.digital,
  .kemmo-hub-card-v1.game,
  .kemmo-hub-card-v1.ppob{
    grid-column:
      auto !important;

    grid-row:
      auto !important;

    min-height:
      120px !important;

    height:
      120px !important;

    padding:
      9px !important;

    border-radius:
      13px !important;
  }


  .kemmo-hub-card-top-v1{
    min-height:
      25px !important;

    margin-bottom:
      7px !important;
  }


  .kemmo-hub-icon-v1{
    width:
      27px !important;

    height:
      27px !important;

    border-radius:
      8px !important;

    font-size:
      13px !important;
  }


  .kemmo-hub-status-v1{
    min-height:
      17px !important;

    padding:
      0 5px !important;

    font-size:
      5.5px !important;
  }


  .kemmo-hub-name-v1{
    font-size:
      11px !important;

    line-height:
      1.1 !important;
  }


  .kemmo-hub-desc-v1{
    margin-top:
      5px !important;

    min-height:
      25px !important;

    font-size:
      6.7px !important;

    line-height:
      1.3 !important;

    -webkit-line-clamp:
      3 !important;
  }


  .kemmo-hub-foot-v1{
    margin-top:
      6px !important;

    min-height:
      12px !important;
  }


  .kemmo-hub-count-v1{
    font-size:
      6.5px !important;
  }


  .kemmo-hub-open-v1{
    display:
      none !important;
  }


  /*
   * PRODUCT SECTION
   */

  #products{
    margin-top:
      18px !important;
  }


  .store-title{
    font-size:
      22px !important;
  }


  .store-sub{
    font-size:
      9px !important;
  }

}


/*
 * Tiny devices.
 */

@media(max-width:360px){

  .hero.kp-hero-v1{
    height:
      178px !important;

    min-height:
      178px !important;
  }


  .hero.kp-hero-v1
  .kp-title-v1{
    font-size:
      21px !important;
  }


  .kemmo-hub-card-v1,
  .kemmo-hub-card-v1.digital,
  .kemmo-hub-card-v1.game,
  .kemmo-hub-card-v1.ppob{
    height:
      116px !important;

    min-height:
      116px !important;

    padding:
      8px !important;
  }


  .kemmo-hub-name-v1{
    font-size:
      10px !important;
  }


  .kemmo-hub-desc-v1{
    font-size:
      6.2px !important;
  }

}



/* KEMMO V2 COLOR NORMALIZATION START */

/*
 * Single palette:
 * navy + royal blue + white.
 */

:root{
  --k2-ink:#0b1532;
  --k2-navy:#0b1745;
  --k2-blue:#2563eb;
  --k2-blue2:#3282f6;
  --k2-soft:#f6f8fd;
  --k2-muted:#6f7b91;
  --k2-line:#e5eaf2;
}


/* =====================================
   GLOBAL COLOR CLEANUP
===================================== */

body{
  background:
    linear-gradient(
      180deg,
      #ffffff 0,
      #f6f8fd 520px,
      #f8faff 100%
    ) !important;
}


/* =====================================
   NAV ACTIVE = BLUE, NOT PURPLE
===================================== */

.kp-category-link-v1.is-active{
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #3478f6
    ) !important;

  color:#fff !important;

  box-shadow:
    0 5px 14px
    rgba(37,99,235,.18)
    !important;
}


/* =====================================
   SEARCH
===================================== */

.kp-search-submit-v1{
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #3282f6
    ) !important;
}


.kp-search-submit-v1 svg{
  width:
    14px !important;

  height:
    14px !important;
}


/* =====================================
   CHAT
===================================== */

.kp-chat-v1{
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #3478f6
    ) !important;
}


/* =====================================
   HERO — NAVY / BLUE ONLY
===================================== */

.hero.kp-hero-v1{
  background:
    radial-gradient(
      circle at 84% 38%,
      rgba(49,111,245,.30),
      transparent 32%
    ),
    radial-gradient(
      circle at 62% 110%,
      rgba(54,120,246,.20),
      transparent 42%
    ),
    linear-gradient(
      122deg,
      #08133d 0%,
      #10225f 58%,
      #2147a5 100%
    )
    !important;
}


.hero.kp-hero-v1
.kp-title-v1 span{
  background:
    linear-gradient(
      90deg,
      #ffffff,
      #91c5ff
    )
    !important;

  -webkit-background-clip:
    text !important;

  background-clip:
    text !important;

  color:
    transparent !important;
}


.kp-hero-badge-v1{
  background:
    rgba(44,102,232,.33)
    !important;

  border-color:
    rgba(147,197,253,.20)
    !important;
}


.kp-live-dot-v1{
  background:
    #60c9ff !important;

  box-shadow:
    0 0 0 3px
    rgba(96,201,255,.13)
    !important;
}


.kp-stat-icon-v1{
  background:
    rgba(48,111,240,.25)
    !important;

  color:
    #a8d4ff !important;
}


/* =====================================
   MARKETPLACE HEADING
===================================== */

.kemmo-hub-v1-kicker{
  color:
    #356cdf !important;
}


/* =====================================
   IMPORTANT:
   REMOVE OLD FADE / WASHED OUT STATES
===================================== */

.kemmo-hub-card-v1,
.kemmo-hub-card-v1.digital,
.kemmo-hub-card-v1.game,
.kemmo-hub-card-v1.ppob,
.kemmo-hub-card-v1.kemmo-hub-disabled-v1{
  opacity:
    1 !important;

  filter:
    none !important;

  mix-blend-mode:
    normal !important;

  isolation:
    isolate !important;

  transform:
    none !important;
}


/*
 * Legacy decoration must not wash
 * the contents out.
 */
.kemmo-hub-card-v1::before,
.kemmo-hub-card-v1::after{
  display:
    none !important;

  content:
    none !important;
}


.kemmo-hub-card-v1 > *{
  position:
    relative !important;

  z-index:
    2 !important;

  opacity:
    1 !important;

  filter:
    none !important;
}


/* =====================================
   CARD 1 + 2 = CLEAN WHITE
===================================== */

.kemmo-hub-card-v1.digital,
.kemmo-hub-card-v1.game{
  background:
    #ffffff !important;

  border:
    1px solid
    var(--k2-line) !important;

  color:
    var(--k2-ink) !important;

  box-shadow:
    0 8px 24px
    rgba(24,43,85,.055)
    !important;
}


.kemmo-hub-card-v1.digital
.kemmo-hub-name-v1,

.kemmo-hub-card-v1.digital
.kemmo-hub-desc-v1,

.kemmo-hub-card-v1.digital
.kemmo-hub-count-v1,

.kemmo-hub-card-v1.game
.kemmo-hub-name-v1,

.kemmo-hub-card-v1.game
.kemmo-hub-desc-v1,

.kemmo-hub-card-v1.game
.kemmo-hub-count-v1{
  opacity:
    1 !important;
}


.kemmo-hub-card-v1.digital
.kemmo-hub-name-v1,

.kemmo-hub-card-v1.game
.kemmo-hub-name-v1{
  color:
    #10182e !important;
}


.kemmo-hub-card-v1.digital
.kemmo-hub-desc-v1,

.kemmo-hub-card-v1.game
.kemmo-hub-desc-v1{
  color:
    #6c7689 !important;
}


.kemmo-hub-card-v1.digital
.kemmo-hub-count-v1{
  color:
    #536078 !important;
}


.kemmo-hub-card-v1.game
.kemmo-hub-count-v1{
  color:
    #778195 !important;
}


/* =====================================
   CARD 3 = FEATURED BLUE
===================================== */

.kemmo-hub-card-v1.ppob{
  background:
    radial-gradient(
      circle at 100% 100%,
      rgba(79,158,255,.32),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      #122866,
      #2257d9 58%,
      #287de9
    )
    !important;

  border:
    1px solid
    rgba(53,112,239,.28)
    !important;

  color:
    #fff !important;

  box-shadow:
    0 10px 28px
    rgba(29,78,216,.14)
    !important;
}


.kemmo-hub-card-v1.ppob
.kemmo-hub-name-v1{
  color:
    #fff !important;
}


.kemmo-hub-card-v1.ppob
.kemmo-hub-desc-v1{
  color:
    rgba(255,255,255,.78)
    !important;
}


.kemmo-hub-card-v1.ppob
.kemmo-hub-count-v1{
  color:
    #fff !important;
}


/* =====================================
   ICONS
===================================== */

.kemmo-hub-card-v1.digital
.kemmo-hub-icon-v1,

.kemmo-hub-card-v1.game
.kemmo-hub-icon-v1{
  background:
    #f3f6fc !important;

  color:
    #1f5fd8 !important;
}


.kemmo-hub-card-v1.ppob
.kemmo-hub-icon-v1{
  background:
    rgba(255,255,255,.11)
    !important;

  color:
    #ffd34d !important;
}


/* =====================================
   STATUS BADGES
===================================== */

.kemmo-hub-card-v1.digital
.kemmo-hub-status-v1{
  background:
    #edf4ff !important;

  border:
    1px solid
    #d8e6ff !important;

  color:
    #2761c9 !important;
}


.kemmo-hub-card-v1.game
.kemmo-hub-status-v1{
  background:
    #f6f7f9 !important;

  border:
    1px solid
    #e2e5eb !important;

  color:
    #7c8493 !important;
}


.kemmo-hub-card-v1.ppob
.kemmo-hub-status-v1{
  background:
    rgba(255,255,255,.12)
    !important;

  border:
    1px solid
    rgba(255,255,255,.30)
    !important;

  color:
    #fff !important;
}


/* =====================================
   PPOB CHIPS / CATALOG
===================================== */

.koc-v1-chip.active,
.koc-v1-brand.active{
  background:
    #2563eb !important;

  border-color:
    #2563eb !important;

  color:
    #fff !important;
}


.koc-v1-live{
  color:
    #2563eb !important;
}


/* KEMMO V2 COLOR NORMALIZATION END */




/* KEMMO V2 ACTIVE CARD STATE START */


/* =====================================
   DEFAULT CARD = WHITE
===================================== */

.kemmo-hub-card-v1.digital,
.kemmo-hub-card-v1.game,
.kemmo-hub-card-v1.ppob{
  background:
    #ffffff !important;

  border:
    1px solid
    #e4e9f2 !important;

  color:
    #10182e !important;

  box-shadow:
    0 8px 24px
    rgba(24,43,85,.055)
    !important;
}


.kemmo-hub-card-v1.digital
.kemmo-hub-name-v1,

.kemmo-hub-card-v1.game
.kemmo-hub-name-v1,

.kemmo-hub-card-v1.ppob
.kemmo-hub-name-v1{
  color:
    #10182e !important;
}


.kemmo-hub-card-v1.digital
.kemmo-hub-desc-v1,

.kemmo-hub-card-v1.game
.kemmo-hub-desc-v1,

.kemmo-hub-card-v1.ppob
.kemmo-hub-desc-v1{
  color:
    #6e788b !important;
}


.kemmo-hub-card-v1.digital
.kemmo-hub-count-v1,

.kemmo-hub-card-v1.game
.kemmo-hub-count-v1,

.kemmo-hub-card-v1.ppob
.kemmo-hub-count-v1{
  color:
    #58647a !important;
}


/* =====================================
   DEFAULT ICONS
===================================== */

.kemmo-hub-card-v1.digital
.kemmo-hub-icon-v1,

.kemmo-hub-card-v1.game
.kemmo-hub-icon-v1,

.kemmo-hub-card-v1.ppob
.kemmo-hub-icon-v1{
  background:
    #f3f6fc !important;

  color:
    #2866d8 !important;
}


.kemmo-hub-card-v1.ppob
.kemmo-hub-icon-v1{
  color:
    #f5b817 !important;
}


/* =====================================
   DEFAULT STATUS
===================================== */

.kemmo-hub-card-v1.digital
.kemmo-hub-status-v1{
  background:
    #edf4ff !important;

  border:
    1px solid
    #d7e5ff !important;

  color:
    #2862c9 !important;
}


.kemmo-hub-card-v1.game
.kemmo-hub-status-v1{
  background:
    #f6f7f9 !important;

  border:
    1px solid
    #e1e5eb !important;

  color:
    #7b8494 !important;
}


.kemmo-hub-card-v1.ppob
.kemmo-hub-status-v1{
  background:
    #edf4ff !important;

  border:
    1px solid
    #d7e5ff !important;

  color:
    #2862c9 !important;
}


/* =====================================
   ACTIVE GROUP = BLUE
===================================== */

.kemmo-hub-card-v1.is-current{
  background:
    radial-gradient(
      circle at 100% 100%,
      rgba(75,153,255,.25),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      #10265f 0%,
      #2055d4 58%,
      #2879e8 100%
    )
    !important;

  border:
    1px solid
    rgba(49,108,226,.30)
    !important;

  color:
    #ffffff !important;

  box-shadow:
    0 10px 28px
    rgba(29,78,216,.15)
    !important;
}


.kemmo-hub-card-v1.is-current
.kemmo-hub-name-v1,

.kemmo-hub-card-v1.is-current
.kemmo-hub-count-v1{
  color:
    #ffffff !important;
}


.kemmo-hub-card-v1.is-current
.kemmo-hub-desc-v1{
  color:
    rgba(255,255,255,.80)
    !important;
}


.kemmo-hub-card-v1.is-current
.kemmo-hub-icon-v1{
  background:
    rgba(255,255,255,.12)
    !important;

  color:
    #acd6ff !important;
}


.kemmo-hub-card-v1.ppob.is-current
.kemmo-hub-icon-v1{
  color:
    #ffd34d !important;
}


.kemmo-hub-card-v1.is-current
.kemmo-hub-status-v1{
  background:
    rgba(255,255,255,.11)
    !important;

  border:
    1px solid
    rgba(255,255,255,.30)
    !important;

  color:
    #ffffff !important;
}


/*
 * Legacy disabled game boleh tetap
 * status kosong, tapi jangan memudarkan
 * card ketika sedang dipilih.
 */
.kemmo-hub-card-v1.is-current
.kemmo-hub-count-v1,

.kemmo-hub-card-v1.is-current
.kemmo-hub-name-v1,

.kemmo-hub-card-v1.is-current
.kemmo-hub-desc-v1,

.kemmo-hub-card-v1.is-current
.kemmo-hub-icon-v1,

.kemmo-hub-card-v1.is-current
.kemmo-hub-status-v1{
  opacity:
    1 !important;

  filter:
    none !important;
}


/* KEMMO V2 ACTIVE CARD STATE END */


/* KEMMO STOREFRONT DESKTOP V3 START */

/*
 * Desktop/tablet landscape only.
 * Mobile <=760px tetap memakai layout
 * mobile yang sudah ada.
 */
@media(min-width:761px){

  /* =====================================
     WIDER DESKTOP CANVAS
  ===================================== */

  .container,
  .kp-header-wrap-v1{
    width:
      min(
        1180px,
        calc(100% - 48px)
      )
      !important;
  }


  /* =====================================
     HERO — SHORTER + STRONGER
  ===================================== */

  .hero.kp-hero-v1{
    grid-template-columns:
      minmax(0,1.12fr)
      minmax(260px,.88fr)
      !important;

    min-height:
      230px !important;

    height:
      230px !important;

    border-radius:
      18px !important;
  }


  .kp-hero-copy-v1{
    box-sizing:
      border-box !important;

    padding:
      25px
      18px
      24px
      34px !important;
  }


  .kp-hero-badge-v1{
    min-height:
      24px !important;

    padding:
      0 10px !important;

    font-size:
      8px !important;
  }


  .hero.kp-hero-v1
  .kp-title-v1{
    max-width:
      520px !important;

    margin-top:
      10px !important;

    font-size:
      clamp(
        34px,
        3.1vw,
        44px
      )
      !important;

    line-height:
      .98 !important;
  }


  .hero.kp-hero-v1
  .kp-desc-v1{
    max-width:
      470px !important;

    margin-top:
      10px !important;

    font-size:
      12px !important;

    line-height:
      1.45 !important;
  }


  /* =====================================
     HERO FEATURES
  ===================================== */

  .kp-stats-v1{
    flex-wrap:
      nowrap !important;

    gap:
      8px !important;

    margin-top:
      15px !important;
  }


  .kp-stat-v1{
    min-width:
      0 !important;

    min-height:
      38px !important;

    padding:
      0 9px !important;

    gap:
      7px !important;

    border-radius:
      10px !important;
  }


  .kp-stat-icon-v1{
    flex:
      0 0 auto !important;

    width:
      24px !important;

    height:
      24px !important;
  }


  .kp-stat-icon-v1 svg{
    width:
      13px !important;

    height:
      13px !important;
  }


  .kp-stat-copy-v1{
    min-width:
      0 !important;
  }


  .kp-stat-copy-v1 strong{
    display:
      block !important;

    font-size:
      9px !important;

    line-height:
      1.1 !important;

    white-space:
      nowrap !important;
  }


  .kp-stat-copy-v1 small{
    display:
      block !important;

    margin-top:
      2px !important;

    font-size:
      7px !important;

    line-height:
      1.15 !important;

    white-space:
      nowrap !important;
  }


  /* =====================================
     HERO ART — FIX VERTICAL ICON STACK
  ===================================== */

  .kp-hero-art-v1{
    position:
      relative !important;

    min-height:
      230px !important;

    height:
      230px !important;

    overflow:
      hidden !important;
  }


  .kp-art-glow-v1{
    width:
      280px !important;

    height:
      280px !important;

    top:
      -48px !important;

    right:
      -20px !important;
  }


  .kp-phone-v1{
    position:
      absolute !important;

    top:
      18px !important;

    right:
      62px !important;

    width:
      150px !important;

    height:
      194px !important;

    box-sizing:
      border-box !important;

    border:
      1px solid
      rgba(255,255,255,.16)
      !important;

    border-radius:
      25px !important;

    background:
      linear-gradient(
        160deg,
        rgba(255,255,255,.11),
        rgba(255,255,255,.035)
      )
      !important;

    box-shadow:
      0 22px 55px
      rgba(2,8,34,.22)
      !important;

    overflow:
      hidden !important;

    transform:
      rotate(3deg)
      !important;
  }


  .kp-app-grid-v1{
    display:
      grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;

    grid-template-rows:
      repeat(3,1fr)
      !important;

    gap:
      8px !important;

    width:
      100% !important;

    height:
      100% !important;

    box-sizing:
      border-box !important;

    padding:
      34px
      16px
      15px !important;
  }


  .kp-app-v1{
    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    width:
      auto !important;

    height:
      auto !important;

    min-height:
      36px !important;

    border-radius:
      11px !important;

    font-size:
      14px !important;
  }


  .kp-float-game-v1{
    left:
      28px !important;

    top:
      72px !important;

    width:
      38px !important;

    height:
      38px !important;
  }


  .kp-float-gem-v1{
    right:
      20px !important;

    top:
      28px !important;

    width:
      38px !important;

    height:
      38px !important;
  }


  .kp-float-bolt-v1{
    right:
      25px !important;

    bottom:
      29px !important;

    width:
      36px !important;

    height:
      36px !important;
  }


  /* =====================================
     MARKETPLACE — MOVE UP
  ===================================== */

  .kemmo-hub-v1{
    margin-top:
      15px !important;
  }


  .kemmo-hub-v1-head{
    margin-bottom:
      9px !important;
  }


  .kemmo-hub-v1-kicker{
    font-size:
      8px !important;
  }


  .kemmo-hub-v1-title{
    margin-top:
      3px !important;

    font-size:
      22px !important;
  }


  .kemmo-hub-v1-sub{
    margin-top:
      3px !important;

    font-size:
      9px !important;
  }


  .kemmo-hub-v1-grid{
    gap:
      10px !important;
  }


  /* =====================================
     MARKETPLACE CARDS — COMPACT
  ===================================== */

  .kemmo-hub-card-v1,
  .kemmo-hub-card-v1.digital,
  .kemmo-hub-card-v1.game,
  .kemmo-hub-card-v1.ppob{
    min-height:
      148px !important;

    height:
      148px !important;

    padding:
      13px !important;

    border-radius:
      15px !important;
  }


  .kemmo-hub-card-top-v1{
    min-height:
      31px !important;

    margin-bottom:
      8px !important;
  }


  .kemmo-hub-icon-v1{
    width:
      32px !important;

    height:
      32px !important;

    border-radius:
      10px !important;

    font-size:
      15px !important;
  }


  .kemmo-hub-status-v1{
    min-height:
      19px !important;

    padding:
      0 7px !important;

    font-size:
      6.5px !important;
  }


  .kemmo-hub-name-v1{
    font-size:
      15px !important;

    line-height:
      1.1 !important;
  }


  .kemmo-hub-desc-v1{
    margin-top:
      5px !important;

    min-height:
      24px !important;

    font-size:
      8.5px !important;

    line-height:
      1.35 !important;

    -webkit-line-clamp:
      2 !important;
  }


  .kemmo-hub-foot-v1{
    margin-top:
      7px !important;
  }


  .kemmo-hub-count-v1,
  .kemmo-hub-open-v1{
    font-size:
      7.5px !important;
  }

}


/*
 * Medium desktop / tablet landscape:
 * keep art from squeezing the copy.
 */
@media(
  min-width:761px
)
and
(
  max-width:980px
){

  .container,
  .kp-header-wrap-v1{
    width:
      calc(100% - 32px)
      !important;
  }


  .hero.kp-hero-v1{
    grid-template-columns:
      minmax(0,1fr)
      250px
      !important;
  }


  .kp-hero-copy-v1{
    padding-left:
      27px !important;
  }


  .hero.kp-hero-v1
  .kp-title-v1{
    font-size:
      34px !important;
  }


  .kp-phone-v1{
    right:
      45px !important;
  }


  .kp-stat-copy-v1 small{
    display:
      none !important;
  }

}

/* KEMMO STOREFRONT DESKTOP V3 END */


/* KEMMO DESKTOP HERO CLEAN ART START */

@media(min-width:761px){

  /*
   * Remove phone/app-grid decoration.
   * Keep right side clean and premium.
   */
  .kp-phone-v1{
    display:none !important;
  }


  /*
   * Remove the extra floating icons too.
   * Hero gradient itself becomes the artwork.
   */
  .kp-float-game-v1,
  .kp-float-gem-v1,
  .kp-float-bolt-v1{
    display:none !important;
  }


  /*
   * Soft light only — no card / device shape.
   */
  .kp-art-glow-v1{
    display:block !important;

    width:
      390px !important;

    height:
      390px !important;

    top:
      -125px !important;

    right:
      -70px !important;

    border-radius:
      50% !important;

    background:
      radial-gradient(
        circle,
        rgba(116,166,255,.30) 0%,
        rgba(79,125,232,.15) 38%,
        rgba(37,99,235,.04) 62%,
        transparent 74%
      )
      !important;

    filter:
      blur(2px)
      !important;

    opacity:
      .95 !important;
  }


  .kp-hero-art-v1{
    pointer-events:none !important;
  }

}

/* KEMMO DESKTOP HERO CLEAN ART END */