/* =========================================================
   IPHONE STORE SOPPENG
   PRODUCT CARD FINAL LAYOUT
   ========================================================= */

@media (max-width: 768px) {

  .storefront .product-card .product-content {
    display: block !important;
    padding: 10px !important;
  }


  /* =========================
     PRODUCT MODEL
     ========================= */

  .storefront .product-card .final-product-name,
  .storefront .product-card .product-model-name {

    display: block !important;

    width: 100% !important;

    margin: 0 0 6px !important;
    padding: 0 !important;

    background: transparent !important;

    color: #f7f7f7 !important;

    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }


  /* =========================
     CATEGORY | STORAGE
     ========================= */

  .storefront .product-card .final-meta-row {

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

    width: 100% !important;

    gap: 6px !important;

    margin: 0 0 7px !important;
    padding: 0 !important;
  }


  .storefront .product-card
  .final-meta-row
  .product-category {

    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    padding: 5px 7px !important;

    border-radius: 6px !important;

    border:
      1px solid rgba(242,104,18,.28) !important;

    background:
      rgba(242,104,18,.07) !important;

    color: #dcdcdc !important;

    font-size: 7.2px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

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


  .storefront .product-card
  .final-meta-row
  .storage-chip {

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

    flex: 0 0 auto !important;

    min-height: 22px !important;

    margin: 0 !important;
    padding: 4px 8px !important;

    border:
      1px solid rgba(242,104,18,.65) !important;

    border-radius: 999px !important;

    background: #151515 !important;

    color: #ff9b48 !important;

    font-size: 7.5px !important;
    font-weight: 950 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }


  /* =========================
     SECOND/BARU | BH
     ========================= */

  .storefront .product-card .final-spec-row {

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

    width: 100% !important;

    gap: 6px !important;

    margin: 0 0 7px !important;
    padding: 0 !important;
  }


  .storefront .product-card
  .final-spec-row
  .condition-chip {

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    min-height: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #ff694b !important;

    font-size: 8px !important;
    font-weight: 950 !important;
    line-height: 1 !important;

    letter-spacing: .3px !important;

    white-space: nowrap !important;
  }


  .storefront .product-card
  .final-spec-row
  .final-bh {

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

    flex: 0 0 auto !important;

    margin: 0 0 0 auto !important;
    padding: 4px 7px !important;

    min-height: 21px !important;

    border:
      1px solid rgba(242,104,18,.55) !important;

    border-radius: 999px !important;

    background: #151515 !important;

    color: #f5f5f5 !important;

    font-size: 7px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }


  .storefront .product-card
  .final-spec-row
  .final-bh::before {

    content: "" !important;

    display: inline-block !important;

    width: 5px !important;
    height: 5px !important;

    margin-right: 4px !important;

    border-radius: 50% !important;

    background: #f26812 !important;
  }


  /* =========================
     PRICE
     ========================= */

  .storefront .product-card .old-price {
    margin: 0 0 2px !important;
  }

  .storefront .product-card .price {

    margin: 0 0 7px !important;

    color: #ff681d !important;

    font-size: 17px !important;
    font-weight: 950 !important;
  }


  /* =========================
     STOCK / PO STATUS
     hanya satu dot
     ========================= */

  .storefront .product-card
  .single-item-status::before,

  .storefront .product-card
  .single-item-status::after {

    content: none !important;
    display: none !important;
  }


  .storefront .product-card
  .single-item-status {

    margin: 0 0 9px !important;
  }


  .storefront .product-card
  .single-item-status
  .status-dot {

    display: inline-block !important;

    width: 6px !important;
    height: 6px !important;

    flex: 0 0 6px !important;

    margin-right: 5px !important;

    border-radius: 50% !important;
  }


  /* =========================
     OLD BH ELEMENTS
     jangan muncul di lokasi lama
     ========================= */

  .storefront .product-card
  .product-image
  .bh-image-badge {

    display: none !important;
  }


  /* BUTTON tetap full */
  .storefront .product-card
  .buy-button,
  .storefront .product-card
  .product-buy-button {

    width: 100% !important;
  }

}



/* === CARD MICRO POLISH START === */

@media (max-width: 768px) {

  /* NAMA PRODUK */
  .storefront .product-card .final-product-name,
  .storefront .product-card .product-model-name {
    font-size: 14.5px !important;
    font-weight: 950 !important;
    line-height: 1.12 !important;

    margin-bottom: 7px !important;

    letter-spacing: -0.15px !important;
  }


  /* CATEGORY + STORAGE */
  .storefront .product-card .final-meta-row {
    gap: 6px !important;
    margin-bottom: 7px !important;
  }

  .storefront .product-card
  .final-meta-row
  .product-category {

    min-height: 23px !important;

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

    padding: 5px 7px !important;

    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    letter-spacing: 0 !important;
  }

  .storefront .product-card
  .final-meta-row
  .storage-chip {

    min-height: 23px !important;

    padding: 5px 8px !important;

    font-size: 8px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }


  /* SECOND / BARU + BH */
  .storefront .product-card .final-spec-row {
    min-height: 22px !important;

    margin-bottom: 8px !important;
  }

  .storefront .product-card
  .final-spec-row
  .condition-chip {

    font-size: 8.2px !important;
    font-weight: 950 !important;
    line-height: 1 !important;

    letter-spacing: .25px !important;

    color: #ff694b !important;
  }

  .storefront .product-card
  .final-spec-row
  .final-bh {

    min-height: 22px !important;

    padding: 5px 7px !important;

    font-size: 7.8px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .storefront .product-card
  .final-spec-row
  .final-bh::before {

    width: 5px !important;
    height: 5px !important;

    margin-right: 4px !important;
  }


  /* HARGA */
  .storefront .product-card .price {
    margin: 0 0 8px !important;

    font-size: 17.5px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;

    letter-spacing: -0.25px !important;
  }


  /* STATUS READY / PO */
  .storefront .product-card
  .single-item-status {

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

    min-width: 0 !important;

    margin: 0 0 10px !important;

    font-size: 8px !important;
    font-weight: 950 !important;
    line-height: 1 !important;

    letter-spacing: .15px !important;

    white-space: nowrap !important;
  }

  /* hanya SATU dot */
  .storefront .product-card
  .single-item-status::before,

  .storefront .product-card
  .single-item-status::after {
    content: none !important;
    display: none !important;
  }

  .storefront .product-card
  .single-item-status
  .status-dot {

    display: inline-block !important;

    width: 6px !important;
    height: 6px !important;

    min-width: 6px !important;

    margin: 0 6px 0 0 !important;

    border-radius: 50% !important;
  }


  /* PO */
  .storefront .product-card
  .single-item-status.po {
    color: #ff5363 !important;
  }

  .storefront .product-card
  .single-item-status.po
  .status-dot {
    background: #ff3e60 !important;

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


  /* READY */
  .storefront .product-card
  .single-item-status.ready {
    color: #dfffe7 !important;
  }

  .storefront .product-card
  .single-item-status.ready
  .status-dot {
    background: #48d56f !important;

    box-shadow:
      0 0 0 4px rgba(72,213,111,.12) !important;
  }


  /* SOLD */
  .storefront .product-card
  .single-item-status.sold
  .status-dot {
    background: #999 !important;
  }


  /* TOMBOL */
  .storefront .product-card .buy-button,
  .storefront .product-card .product-buy-button {

    min-height: 39px !important;

    font-size: 8px !important;
    font-weight: 950 !important;

    letter-spacing: .25px !important;
  }

}

/* === CARD MICRO POLISH END === */



/* === SECOND CHIP POLISH START === */

.storefront .product-card .final-spec-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.storefront .product-card .final-spec-row .condition-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 24px !important;
  padding: 5px 10px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255, 120, 55, 0.40) !important;
  background: rgba(255, 90, 40, 0.10) !important;

  color: #ff6f3c !important;
  font-size: 8.4px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;

  box-shadow: inset 0 0 0 1px rgba(255, 120, 55, 0.06) !important;
}

.storefront .product-card .final-spec-row .condition-chip.baru,
.storefront .product-card .final-spec-row .condition-chip[data-condition="BARU"] {
  border-color: rgba(88, 255, 120, 0.35) !important;
  background: rgba(40, 180, 90, 0.14) !important;
  color: #74ff8d !important;
}

.storefront .product-card .final-spec-row .final-bh {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 768px) {
  .storefront .product-card .final-spec-row .condition-chip {
    min-height: 23px !important;
    padding: 5px 9px !important;
    font-size: 8px !important;
  }
}

/* === SECOND CHIP POLISH END === */

/* =========================================================
   PRODUCT CARD COLOR HARMONY FINAL
   ========================================================= */

@media (max-width: 768px) {

  /* CARD */
  .storefront .product-card {
    background:
      linear-gradient(
        180deg,
        #090a0b 0%,
        #070809 100%
      ) !important;

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


  /* =========================
     CATEGORY
     ========================= */

  .storefront .product-card
  .final-meta-row
  .product-category {

    background:
      #121416 !important;

    border:
      1px solid rgba(242,104,18,.28) !important;

    color:
      #d9d9d9 !important;

    box-shadow:
      inset 0 0 0 1px
      rgba(255,255,255,.01) !important;
  }


  /* =========================
     STORAGE
     ========================= */

  .storefront .product-card
  .final-meta-row
  .storage-chip {

    background:
      rgba(242,104,18,.08) !important;

    border:
      1px solid rgba(242,104,18,.68) !important;

    color:
      #ff9a43 !important;
  }


  /* =========================
     SECOND / BARU
     ========================= */

  .storefront .product-card
  .final-spec-row
  .condition-chip {

    background:
      rgba(255,82,70,.10) !important;

    border:
      1px solid rgba(255,82,70,.42) !important;

    color:
      #ff6d58 !important;

    box-shadow:
      none !important;
  }


  /* BARU kalau ada */
  .storefront .product-card
  .final-spec-row
  .condition-chip.baru,
  .storefront .product-card
  .final-spec-row
  .condition-chip[data-condition="BARU"] {

    background:
      rgba(45,205,95,.10) !important;

    border:
      1px solid rgba(45,205,95,.38) !important;

    color:
      #74e995 !important;
  }


  /* =========================
     BATTERY HEALTH
     ========================= */

  .storefront .product-card
  .final-spec-row
  .final-bh {

    background:
      #121416 !important;

    border:
      1px solid rgba(242,104,18,.42) !important;

    color:
      #ececec !important;

    box-shadow:
      none !important;
  }


  .storefront .product-card
  .final-spec-row
  .final-bh::before {

    background:
      #f26812 !important;

    box-shadow:
      0 0 6px rgba(242,104,18,.30) !important;
  }


  /* =========================
     PRODUCT NAME
     ========================= */

  .storefront .product-card
  .final-product-name,
  .storefront .product-card
  .product-model-name {

    color:
      #f7f7f7 !important;
  }


  /* =========================
     PRICE
     ========================= */

  .storefront .product-card
  .price {

    color:
      #ff681d !important;

    text-shadow:
      0 0 10px rgba(255,104,29,.08) !important;
  }


  /* =========================
     PO STATUS
     ========================= */

  .storefront .product-card
  .single-item-status.po {

    color:
      #ff5968 !important;
  }


  .storefront .product-card
  .single-item-status.po
  .status-dot {

    background:
      #ff4660 !important;

    box-shadow:
      0 0 0 4px rgba(255,70,96,.10) !important;
  }


  /* =========================
     READY
     ========================= */

  .storefront .product-card
  .single-item-status.ready {

    color:
      #72e991 !important;
  }


  .storefront .product-card
  .single-item-status.ready
  .status-dot {

    background:
      #35d86a !important;

    box-shadow:
      0 0 0 4px rgba(53,216,106,.10) !important;
  }


  /* =========================
     BUY BUTTON
     ========================= */

  .storefront .product-card
  .buy-button,
  .storefront .product-card
  .product-buy-button {

    background:
      linear-gradient(
        105deg,
        #ff6618 0%,
        #ff4a30 48%,
        #ff3155 100%
      ) !important;

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

    color:
      #ffffff !important;

    box-shadow:
      0 8px 18px rgba(255,62,65,.12) !important;
  }


  .storefront .product-card
  .buy-button:active,
  .storefront .product-card
  .product-buy-button:active {

    transform:
      scale(.98) !important;
  }

}


/* =========================================================
   CONDITION COLOR FINAL
   SECOND = CORAL
   BARU   = GOLD
   ========================================================= */


/* SECOND */

.storefront .product-card
.condition-chip.condition-second {

  background:
    rgba(255,72,72,.11) !important;

  border:
    1px solid rgba(255,82,72,.55) !important;

  color:
    #ff6b5b !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,100,80,.03) !important;
}


/* BARU */

.storefront .product-card
.condition-chip.condition-baru {

  background:
    rgba(255,174,32,.11) !important;

  border:
    1px solid rgba(255,174,32,.60) !important;

  color:
    #ffb733 !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,190,70,.04),
    0 0 8px
    rgba(255,174,32,.07) !important;
}


/* sedikit lebih jelas */

.storefront .product-card
.condition-chip.condition-second,
.storefront .product-card
.condition-chip.condition-baru {

  font-weight:
    950 !important;

  letter-spacing:
    .2px !important;
}