/* ==========================================================
   IPHONE STORE SOPPENG - STOREFRONT V2
   ========================================================== */

.store-v2 {
  min-height: 100vh;
  margin: 0;

  background:
    radial-gradient(
      circle at 15% -10%,
      rgba(183,255,0,.08),
      transparent 27%
    ),
    #050705 !important;

  color: #f5f7f4;
}


/* HEADER */

.store-v2 .v2-header {
  position: relative;

  padding:
    28px max(18px, calc((100% - 1180px) / 2))
    29px;

  overflow: hidden;

  border-bottom:
    1px solid rgba(183,255,0,.14);

  background:
    linear-gradient(
      135deg,
      #050705,
      #0b100b
    );
}

.store-v2 .v2-header::after {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: -90px;
  top: -150px;

  border-radius: 50%;

  background:
    rgba(183,255,0,.09);

  filter: blur(50px);
}

.store-v2 .v2-header-inner {
  position: relative;
  z-index: 2;
}

.store-v2 .v2-brandline {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 14px;
}

.store-v2 .v2-logo {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: #b7ff00;
  color: #050705;

  font-size: 12px;
  font-weight: 1000;

  box-shadow:
    0 0 25px rgba(183,255,0,.13);
}

.store-v2 .v2-official {
  padding: 7px 10px;

  border:
    1px solid rgba(183,255,0,.16);

  border-radius: 999px;

  color: #b7ff00;

  background:
    rgba(183,255,0,.045);

  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.store-v2 .v2-header h1 {
  margin: 0;

  color: #fff;

  font-size:
    clamp(29px, 5vw, 50px);

  line-height: .98;

  font-weight: 1000;

  letter-spacing: -.045em;
}

.store-v2 .hero-subtitle {
  margin: 11px 0 0 !important;

  color: #aab2a8 !important;

  font-size: 11px !important;

  font-weight: 750 !important;

  line-height: 1.4 !important;

  letter-spacing: .06em !important;
}


/* MAIN */

.store-v2 .v2-container {
  width:
    min(1180px, calc(100% - 28px));

  margin:
    18px auto 50px;
}


/* SEARCH / CATEGORY */

.store-v2 .v2-toolbar {
  padding: 13px;

  border:
    1px solid rgba(255,255,255,.065);

  border-radius: 17px;

  background:
    #0b0f0c;

  box-shadow:
    0 16px 45px rgba(0,0,0,.22);
}

.store-v2 .v2-search {
  position: relative;
}

.store-v2 .v2-search span {
  position: absolute;

  left: 15px;
  top: 50%;

  transform:
    translateY(-50%);

  color: #b7ff00;

  font-size: 18px;

  z-index: 2;
}

.store-v2 .v2-search input {
  width: 100%;
  height: 46px;

  margin: 0 !important;

  padding:
    0 15px 0 43px;

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

  border-radius: 12px;

  outline: none;

  color: #fff !important;

  background:
    #060806 !important;
}

.store-v2 .v2-search input:focus {
  border-color:
    #b7ff00 !important;

  box-shadow:
    0 0 0 3px rgba(183,255,0,.07);
}

.store-v2 .v2-search input::placeholder {
  color: #626a60;
}

.store-v2 .categories {
  display: flex;

  gap: 7px;

  padding:
    11px 0 0 !important;

  overflow-x: auto;

  scrollbar-width: none;
}

.store-v2 .categories::-webkit-scrollbar {
  display: none;
}

.store-v2 .category-button {
  flex: 0 0 auto;

  margin: 0 !important;

  padding:
    8px 13px !important;

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

  border-radius:
    999px !important;

  color:
    #aab2a8 !important;

  background:
    #090c09 !important;

  font-size:
    10px !important;

  font-weight:
    850 !important;

  white-space:
    nowrap;
}

.store-v2 .category-button.active {
  color:
    #050705 !important;

  border-color:
    #b7ff00 !important;

  background:
    #b7ff00 !important;

  box-shadow:
    0 0 18px rgba(183,255,0,.10) !important;
}


/* SECTION TITLE */

.store-v2 .v2-section-title {
  display: flex;
  align-items: end;

  gap: 15px;

  margin:
    23px 2px 13px;
}

.store-v2 .v2-section-title small {
  color: #b7ff00;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .15em;
}

.store-v2 .v2-section-title h2 {
  margin: 3px 0 0;

  color: #f5f7f4;

  font-size: 20px;

  letter-spacing: -.03em;
}

.store-v2 .v2-line {
  flex: 1;

  height: 1px;

  margin-bottom: 6px;

  background:
    linear-gradient(
      90deg,
      rgba(183,255,0,.23),
      transparent
    );
}


/* PRODUCT GRID */

.store-v2 .product-grid {
  display: grid !important;

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

  gap: 12px !important;

  justify-content: start !important;
}


/* CARD */

.store-v2 .product-card {
  width: 100% !important;
  max-width: none !important;

  overflow: hidden;

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

  border-radius:
    15px !important;

  background:
    linear-gradient(
      160deg,
      #0d110e,
      #080b08
    ) !important;

  box-shadow:
    0 13px 34px rgba(0,0,0,.22) !important;
}

.store-v2 .product-card:hover {
  transform:
    translateY(-2px) !important;

  border-color:
    rgba(183,255,0,.22) !important;

  box-shadow:
    0 18px 42px rgba(0,0,0,.32) !important;
}

.store-v2 .product-image {
  aspect-ratio:
    1 / 1 !important;

  background:
    #111511 !important;
}

.store-v2 .product-image img {
  object-fit: cover;
}

.store-v2 .product-content {
  padding:
    11px !important;
}

.store-v2 .product-category {
  padding:
    4px 7px !important;

  color:
    #b7ff00 !important;

  border:
    1px solid rgba(183,255,0,.12) !important;

  background:
    rgba(183,255,0,.055) !important;

  font-size:
    7px !important;
}

.store-v2 .product-content h2 {
  margin:
    8px 0 4px !important;

  color:
    #f5f7f4 !important;

  font-size:
    13px !important;

  line-height:
    1.25 !important;
}

.store-v2 .description {
  min-height:
    28px !important;

  margin:
    3px 0 9px !important;

  color:
    #777f75 !important;

  font-size:
    9px !important;

  line-height:
    1.4 !important;
}

.store-v2 .old-price {
  color:
    #60685e !important;

  font-size:
    9px !important;
}

.store-v2 .price {
  margin-top:
    1px !important;

  color:
    #b7ff00 !important;

  font-size:
    16px !important;

  font-weight:
    1000 !important;
}

.store-v2 .single-item-status {
  margin:
    8px 0 10px !important;

  font-size:
    8px !important;
}

.store-v2 .buy-button {
  min-height:
    36px !important;

  padding:
    8px !important;

  border-radius:
    9px !important;

  color:
    #050705 !important;

  background:
    #b7ff00 !important;

  border-color:
    #b7ff00 !important;

  font-size:
    8px !important;
}


/* READY / SOLD */

.store-v2 .ready-badge,
.store-v2 .soldout-badge {
  top: 9px;
  left: 9px;

  padding:
    6px 8px !important;

  font-size:
    8px !important;
}

.store-v2 .ready-badge {
  color:
    #050705 !important;

  background:
    #b7ff00 !important;
}

.store-v2 .product-sold {
  opacity: .72;
}


/* WHATSAPP */

.store-v2 .v2-whatsapp {
  position: fixed;

  right: 18px;
  bottom: 18px;

  z-index: 50;

  padding:
    12px 16px;

  border:
    1px solid #b7ff00;

  border-radius:
    999px;

  color:
    #050705;

  background:
    #b7ff00;

  text-decoration:
    none;

  font-size:
    10px;

  font-weight:
    1000;

  letter-spacing:
    .07em;

  box-shadow:
    0 12px 30px rgba(0,0,0,.35),
    0 0 25px rgba(183,255,0,.10);
}


/* FOOTER */

.store-v2 .v2-footer {
  padding:
    34px 18px 30px;

  text-align:
    center;

  border-top:
    1px solid rgba(183,255,0,.12);

  background:
    #030503;
}

.store-v2 .v2-footer-brand {
  color:
    #b7ff00;

  font-size:
    13px;

  font-weight:
    1000;

  letter-spacing:
    .07em;
}

.store-v2 .v2-address {
  max-width:
    520px;

  margin:
    18px auto;
}

.store-v2 .v2-address strong {
  color:
    #b7ff00;

  font-size:
    9px;

  letter-spacing:
    .13em;
}

.store-v2 .v2-address p {
  margin:
    7px 0 0;

  color:
    #80887e;

  font-size:
    11px;

  line-height:
    1.6;
}

.store-v2 .v2-footer-bottom {
  color:
    #50574f;

  font-size:
    9px;
}


/* TABLET */

@media (max-width: 900px) {

  .store-v2 .product-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

}


/* MOBILE */

@media (max-width: 620px) {

  .store-v2 .v2-header {
    padding:
      22px 15px 23px;
  }

  .store-v2 .v2-brandline {
    margin-bottom:
      11px;
  }

  .store-v2 .v2-logo {
    width: 32px;
    height: 32px;
  }

  .store-v2 .v2-header h1 {
    font-size:
      29px;
  }

  .store-v2 .hero-subtitle {
    max-width:
      390px;

    margin-top:
      9px !important;

    font-size:
      9px !important;

    line-height:
      1.4 !important;

    letter-spacing:
      .035em !important;
  }

  .store-v2 .v2-container {
    width:
      calc(100% - 20px);

    margin-top:
      12px;
  }

  .store-v2 .v2-toolbar {
    padding:
      10px;
  }

  .store-v2 .v2-search input {
    height:
      43px;
  }

  .store-v2 .product-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      8px !important;
  }

  .store-v2 .product-content {
    padding:
      9px !important;
  }

  .store-v2 .product-content h2 {
    font-size:
      12px !important;
  }

  .store-v2 .description {
    display:
      none !important;
  }

  .store-v2 .price {
    font-size:
      14px !important;
  }

  .store-v2 .buy-button {
    font-size:
      7.5px !important;
  }

  .store-v2 .v2-whatsapp {
    right:
      12px;

    bottom:
      12px;

    padding:
      11px 14px;
  }

}

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

.storefront .store-header-inner,
.store-v2 .v2-header-inner {
  text-align: center !important;
}

.storefront .brand-topline,
.store-v2 .v2-brandline {
  justify-content: center !important;
}

.storefront .trust-row {
  justify-content: center !important;
}

.storefront .premium-header h1,
.store-v2 .v2-header h1 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.storefront .hero-subtitle,
.store-v2 .hero-subtitle {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}


/* KATEGORI TURUN KE BAWAH, BUKAN SCROLL SAMPING */

.store-v2 .categories {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  overflow-y: visible !important;

  gap: 8px !important;
  padding-top: 11px !important;
}

.store-v2 .category-button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

@media (max-width: 620px) {

  .store-v2 .categories {
    gap: 7px !important;
  }

  .store-v2 .category-button {
    padding: 8px 11px !important;
    font-size: 9px !important;
  }

}