﻿/* ==========================================================
   PRODUCT DETAIL FINAL
   ========================================================== */

body.pd2-open {
  overflow: hidden !important;
}

.pd2-overlay {
  position: fixed;
  inset: 0;

  z-index: 99999999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px;

  background: rgba(0,0,0,.84);

  backdrop-filter: blur(8px);
}

.pd2-modal {
  position: relative;

  width:
    min(
      450px,
      calc(100vw - 18px)
    );

  max-height:
    calc(100vh - 24px);

  overflow-y: auto;

  box-sizing: border-box;

  padding:
    22px 18px 17px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 20px;

  color: #fff;

  background:
    linear-gradient(
      180deg,
      #101214,
      #08090a
    );

  box-shadow:
    0 30px 90px rgba(0,0,0,.74);
}


/* CLOSE */

.pd2-close {
  position: absolute;

  top: 10px;
  right: 11px;

  z-index: 2;

  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;

  color: #b3b3b3;

  background:
    rgba(255,255,255,.07);

  font-size: 21px;

  cursor: pointer;
}


/* PRODUCT HEADER */

.pd2-top {
  display: flex;
  align-items: center;

  gap: 13px;

  padding-right: 32px;
}

.pd2-thumb {
  width: 62px;
  height: 62px;

  flex:
    0 0 62px;

  object-fit: cover;

  border-radius: 14px;

  border:
    1px solid rgba(242,104,18,.30);

  background: #151515;
}

.pd2-thumb-empty {
  display: grid;
  place-items: center;

  color: #f26812;

  font-weight: 1000;
}

.pd2-product-heading {
  min-width: 0;
  flex: 1;
}

.pd2-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 9px;
}

.pd2-name-row h2 {
  margin: 0;

  color: #f8f7f5;

  font-size: 18px;
  font-weight: 900;

  line-height: 1.18;
}

.pd2-sub {
  margin-top: 6px;

  color: #969696;

  font-size: 9px;
  font-weight: 700;

  line-height: 1.3;
}


/* STATUS */

.pd2-status {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  flex: 0 0 auto;

  margin-top: 2px;

  font-size: 8px;
  font-weight: 1000;

  white-space: nowrap;
}

.pd2-status i {
  width: 7px;
  height: 7px;

  border-radius: 50%;
}

.pd2-status.ready {
  color: #39ff14;
}

.pd2-status.ready i {
  background: #39ff14;

  box-shadow:
    0 0 8px rgba(57,255,20,.52);
}

.pd2-status.po {
  color: #ff3157;
}

.pd2-status.po i {
  background: #ff3157;
}

.pd2-status.sold {
  color: #999;
}

.pd2-status.sold i {
  background: #777;
}


/* PRICE */

.pd2-price-wrap {
  margin-top: 17px;
}

.pd2-old-price {
  margin-bottom: 2px;

  color: #777;

  font-size: 9px;

  text-decoration: line-through;
}

.pd2-price {
  color: #ff7417;

  font-size: 23px;
  font-weight: 1000;

  line-height: 1.1;

  letter-spacing: -.03em;
}


/* SECTION TITLE */

.pd2-section-title {
  margin:
    22px 0 9px;

  color: #aaa;

  font-size: 9px;
  font-weight: 1000;

  letter-spacing: .12em;
}


/* DETAIL GRID */

.pd2-info-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}

.pd2-info-box {
  min-height: 67px;

  display: flex;
  align-items: center;

  box-sizing: border-box;

  gap: 10px;

  padding: 11px 12px;

  border:
    1px solid rgba(255,255,255,.045);

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #141a20,
      #10151a
    );
}

.pd2-info-wide {
  grid-column: 1 / -1;

  min-height: 58px;
}

.pd2-info-icon {
  flex: 0 0 auto;

  color: #ffb000;

  font-size: 17px;
  font-weight: 1000;
}

.pd2-info-text {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.pd2-info-text > span {
  color: #92979b;

  font-size: 7.5px;
  font-weight: 600;
}

.pd2-info-text > strong {
  margin-top: 3px;

  color: #f2f2f2;

  font-size: 10px;
  font-weight: 900;

  line-height: 1.2;

  overflow-wrap: anywhere;
}

.pd2-info-text > small {
  margin-top: 3px;

  color: #a0a4a7;

  font-size: 7.5px;
  font-weight: 700;

  line-height: 1.25;

  overflow-wrap: anywhere;
}


/* CATATAN */

.pd2-note-title {
  margin-top: 19px;
}

.pd2-notes {
  padding:
    10px 12px;

  border:
    1px solid rgba(255,255,255,.04);

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #141a20,
      #10151a
    );
}

.pd2-notes ul {
  margin: 0;

  padding-left: 17px;
}

.pd2-notes li {
  margin: 5px 0;

  color: #d5d5d5;

  font-size: 8.5px;

  line-height: 1.45;
}


/* WHATSAPP */

.pd2-chat {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  gap: 8px;

  margin-top: 15px;

  border-radius: 11px;

  color: #fff;

  background: #25D366;

  box-shadow:
    0 8px 24px rgba(37,211,102,.20);

  text-decoration: none;

  font-size: 9.5px;
  font-weight: 1000;

  letter-spacing: .02em;
}

.pd2-chat:hover {
  background: #20bd5a;
}

.pd2-wa {
  width: 23px;
  height: 23px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255,255,255,.60);

  border-radius: 50%;

  font-size: 6px;
}


/* MOBILE */

@media (max-width: 620px) {

  .pd2-overlay {
    padding: 7px;
  }

  .pd2-modal {
    width:
      calc(100vw - 14px);

    max-height:
      calc(100dvh - 14px);

    padding:
      19px 15px 14px;

    border-radius: 17px;
  }

  .pd2-thumb {
    width: 56px;
    height: 56px;

    flex-basis: 56px;
  }

  .pd2-name-row h2 {
    font-size: 16px;
  }

  .pd2-price {
    font-size: 21px;
  }

  .pd2-section-title {
    margin-top: 19px;
  }

  .pd2-info-grid {
    gap: 7px;
  }

  .pd2-info-box {
    min-height: 63px;

    padding: 9px;

    gap: 8px;
  }

  .pd2-info-wide {
    min-height: 54px;
  }

  .pd2-info-icon {
    font-size: 15px;
  }

  .pd2-info-text > strong {
    font-size: 9px;
  }

  .pd2-info-text > small {
    font-size: 7px;
  }

  .pd2-chat {
    min-height: 47px;

    font-size: 9px;
  }

}


/* GARANSI - LABEL PUTIH */

.pd2-info-box .pd2-info-text > span {
  color: #ffffff !important;
}

/* Kalau mau label lain tetap abu-abu,
   khusus kotak garansi saja */
.pd2-info-box:nth-child(4) .pd2-info-text > span {
  color: #ffffff !important;
}


/* =========================================
   DESKRIPSI OTOMATIS / CATATAN TOKO
   ========================================= */

.pd2-notes {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.pd2-note-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd2-note-item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 11px 12px;

  border:
    1px solid rgba(255,255,255,.05);

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #141a20,
      #10151a
    );
}

.pd2-note-warranty {
  border-color: rgba(242,104,18,.22);
  background:
    linear-gradient(
      145deg,
      rgba(242,104,18,.10),
      rgba(16,21,26,.96)
    );
}

.pd2-note-cod {
  border-color: rgba(57,255,20,.18);
  background:
    linear-gradient(
      145deg,
      rgba(57,255,20,.08),
      rgba(16,21,26,.96)
    );
}

.pd2-note-icon {
  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  flex: 0 0 24px;

  border-radius: 50%;

  color: #ffffff;
  background: rgba(255,255,255,.08);

  font-size: 11px;
  font-weight: 1000;
}

.pd2-note-warranty .pd2-note-icon {
  background: rgba(242,104,18,.85);
}

.pd2-note-cod .pd2-note-icon {
  background: rgba(57,255,20,.28);
}

.pd2-note-content {
  min-width: 0;
}

.pd2-note-content strong {
  color: #f5f5f5;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .02em;
}

@media (max-width: 620px) {

  .pd2-note-item {
    gap: 9px;
    padding: 10px 11px;
  }

  .pd2-note-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: 10px;
  }

  .pd2-note-content strong {
    font-size: 8.5px;
  }

}


/* =========================================
   CATATAN TOKO - GRID 2 + 2 + FULL
   ========================================= */

.pd2-note-list {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 8px !important;
}

.pd2-note-item {
  min-height: 54px !important;

  display: flex !important;
  align-items: center !important;

  box-sizing: border-box !important;

  padding: 10px 11px !important;

  border:
    1px solid rgba(255,255,255,.06) !important;

  border-radius: 11px !important;

  background:
    linear-gradient(
      145deg,
      #141a20,
      #10151a
    ) !important;
}

/* item ke-5 penuh */
.pd2-note-item:nth-child(5) {
  grid-column: 1 / -1 !important;
}

/* tidak perlu bulatan kode */
.pd2-note-icon {
  display: none !important;
}

.pd2-note-content {
  width: 100% !important;
}

.pd2-note-content strong {
  color: #f5f5f5 !important;

  font-size: 8.5px !important;
  font-weight: 900 !important;

  line-height: 1.3 !important;
}

/* GARANSI */
.pd2-note-item:nth-child(1) {
  border-color:
    rgba(242,104,18,.24) !important;
}

/* COD */
.pd2-note-item:nth-child(5) {
  border-color:
    rgba(57,255,20,.22) !important;

  background:
    linear-gradient(
      145deg,
      rgba(57,255,20,.07),
      #10151a
    ) !important;
}

.pd2-note-item:nth-child(5)
.pd2-note-content strong {
  color: #dffff0 !important;
}


/* HP */
@media (max-width: 620px) {

  .pd2-note-list {
    gap: 7px !important;
  }

  .pd2-note-item {
    min-height: 50px !important;

    padding: 9px 8px !important;
  }

  .pd2-note-content strong {
    font-size: 7.4px !important;
  }

}


/* =========================================
   CATATAN TOKO - GRID 2 + 2 + FULL
   ========================================= */

.pd2-note-list {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 8px !important;
}

.pd2-note-item {
  min-height: 54px !important;

  display: flex !important;
  align-items: center !important;

  box-sizing: border-box !important;

  padding: 10px 11px !important;

  border:
    1px solid rgba(255,255,255,.06) !important;

  border-radius: 11px !important;

  background:
    linear-gradient(
      145deg,
      #141a20,
      #10151a
    ) !important;
}

/* item ke-5 penuh */
.pd2-note-item:nth-child(5) {
  grid-column: 1 / -1 !important;
}

/* tidak perlu bulatan kode */
.pd2-note-icon {
  display: none !important;
}

.pd2-note-content {
  width: 100% !important;
}

.pd2-note-content strong {
  color: #f5f5f5 !important;

  font-size: 8.5px !important;
  font-weight: 900 !important;

  line-height: 1.3 !important;
}

/* GARANSI */
.pd2-note-item:nth-child(1) {
  border-color:
    rgba(242,104,18,.24) !important;
}

/* COD */
.pd2-note-item:nth-child(5) {
  border-color:
    rgba(57,255,20,.22) !important;

  background:
    linear-gradient(
      145deg,
      rgba(57,255,20,.07),
      #10151a
    ) !important;
}

.pd2-note-item:nth-child(5)
.pd2-note-content strong {
  color: #dffff0 !important;
}


/* HP */
@media (max-width: 620px) {

  .pd2-note-list {
    gap: 7px !important;
  }

  .pd2-note-item {
    min-height: 50px !important;

    padding: 9px 8px !important;
  }

  .pd2-note-content strong {
    font-size: 7.4px !important;
  }

}


/* =========================================
   CATATAN TOKO - FINAL CENTERED
   ========================================= */

/* Judul CATATAN TOKO */
.pd2-note-title {
  text-align: center !important;

  margin-top: 22px !important;
  margin-bottom: 11px !important;

  color: #f4f2ef !important;

  font-size: 11px !important;
  font-weight: 1000 !important;

  letter-spacing: .14em !important;
}


/* Grid 2 + 2 + full */
.pd2-note-list {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 8px !important;
}


/* Semua card */
.pd2-note-item {
  min-height: 62px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;

  padding: 12px 10px !important;

  border:
    1px solid rgba(255,255,255,.07) !important;

  border-radius: 12px !important;

  background:
    linear-gradient(
      145deg,
      #151b21,
      #10151a
    ) !important;

  text-align: center !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 4px 14px rgba(0,0,0,.16) !important;
}


/* item ke-5 penuh */
.pd2-note-item:nth-child(5) {
  grid-column:
    1 / -1 !important;

  min-height: 58px !important;
}


/* tidak pakai icon */
.pd2-note-icon {
  display: none !important;
}


/* Isi card */
.pd2-note-content {
  width: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}


.pd2-note-content strong {
  display: block !important;

  width: 100% !important;

  color: #f7f6f4 !important;

  font-size: 9px !important;
  font-weight: 1000 !important;

  line-height: 1.35 !important;

  letter-spacing: .015em !important;

  text-align: center !important;
}


/* Garansi */
.pd2-note-item:nth-child(1) {
  border-color:
    rgba(242,104,18,.30) !important;

  background:
    linear-gradient(
      145deg,
      rgba(242,104,18,.08),
      #10151a
    ) !important;
}


/* COD full width */
.pd2-note-item:nth-child(5) {
  border-color:
    rgba(57,255,20,.28) !important;

  background:
    linear-gradient(
      145deg,
      rgba(57,255,20,.08),
      #10151a
    ) !important;
}


.pd2-note-item:nth-child(5)
.pd2-note-content strong {
  color: #e6ffe9 !important;

  font-size: 9.3px !important;
}


/* MOBILE */
@media (max-width: 620px) {

  .pd2-note-title {
    font-size: 10.5px !important;

    margin-top: 20px !important;
    margin-bottom: 10px !important;
  }

  .pd2-note-list {
    gap: 7px !important;
  }

  .pd2-note-item {
    min-height: 58px !important;

    padding:
      10px 8px !important;
  }

  .pd2-note-item:nth-child(5) {
    min-height: 54px !important;
  }

  .pd2-note-content strong {
    font-size: 8.4px !important;
  }

  .pd2-note-item:nth-child(5)
  .pd2-note-content strong {
    font-size: 8.7px !important;
  }

}


/* =========================================================
   PRODUCT DETAIL - MOBILE FINAL FIX
   ========================================================= */

@media (max-width: 620px) {

  /* POPUP: lebih proporsional di layar HP */
  .pd2-overlay {
    padding: 10px !important;
    align-items: center !important;
  }

  .pd2-modal {
    width: 94vw !important;
    max-width: 94vw !important;

    max-height: 86dvh !important;

    padding: 16px 14px 14px !important;

    border-radius: 18px !important;
  }


  /* HEADER PRODUK */
  .pd2-top {
    gap: 11px !important;
    padding-right: 30px !important;
  }

  .pd2-thumb {
    width: 60px !important;
    height: 60px !important;
    flex-basis: 60px !important;

    border-radius: 13px !important;
  }

  .pd2-name-row h2 {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  .pd2-sub {
    margin-top: 4px !important;
    font-size: 8.5px !important;
  }

  .pd2-status {
    font-size: 7.5px !important;
  }


  /* HARGA */
  .pd2-price-wrap {
    margin-top: 13px !important;
  }

  .pd2-price {
    font-size: 22px !important;
  }


  /* JUDUL SECTION */
  .pd2-section-title {
    margin-top: 16px !important;
    margin-bottom: 8px !important;

    font-size: 9.5px !important;
  }


  /* =========================
     DETAIL UNIT LEBIH BESAR
     ========================= */

  .pd2-info-grid {
    gap: 8px !important;
  }

  .pd2-info-box {
    min-height: 72px !important;

    padding: 11px 10px !important;

    border-radius: 12px !important;

    gap: 8px !important;
  }

  .pd2-info-wide {
    min-height: 62px !important;
  }

  .pd2-info-icon {
    font-size: 16px !important;
  }

  .pd2-info-text > span {
    font-size: 8px !important;
  }

  .pd2-info-text > strong {
    margin-top: 3px !important;

    font-size: 9.5px !important;
    line-height: 1.25 !important;
  }

  .pd2-info-text > small {
    font-size: 7.4px !important;
  }


  /* =========================
     CATATAN TOKO
     ========================= */

  .pd2-note-title {
    margin-top: 17px !important;
    margin-bottom: 9px !important;

    font-size: 11px !important;

    text-align: center !important;
  }

  .pd2-note-list {
    gap: 8px !important;
  }

  .pd2-note-item {
    min-height: 60px !important;

    padding: 10px 8px !important;

    border-radius: 12px !important;

    text-align: center !important;
  }

  .pd2-note-item:nth-child(5) {
    min-height: 58px !important;
  }

  .pd2-note-content strong {
    font-size: 8.5px !important;
    line-height: 1.3 !important;

    text-align: center !important;
  }


  /* WHATSAPP */
  .pd2-chat {
    min-height: 48px !important;

    margin-top: 13px !important;

    border-radius: 11px !important;

    font-size: 9px !important;
  }


  /* CLOSE */
  .pd2-close {
    top: 9px !important;
    right: 9px !important;

    width: 31px !important;
    height: 31px !important;
  }

}


/* =========================================================
   MOBILE FONT BOOST - FINAL
   ========================================================= */

@media (max-width: 620px) {

  /* Nama produk */
  .pd2-name-row h2 {
    font-size: 19px !important;
    line-height: 1.18 !important;
  }

  /* kategori bawah nama */
  .pd2-sub {
    font-size: 10px !important;
  }

  /* status READY / PO */
  .pd2-status {
    font-size: 8.5px !important;
  }

  /* Harga */
  .pd2-price {
    font-size: 25px !important;
  }

  /* DETAIL UNIT / CATATAN TOKO */
  .pd2-section-title,
  .pd2-note-title {
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: .10em !important;
  }

  /* label kecil: Kondisi, Battery Health, dll */
  .pd2-info-text > span {
    font-size: 9px !important;
    font-weight: 700 !important;
  }

  /* isi utama: SECOND-NORMAL, 96%, dll */
  .pd2-info-text > strong {
    font-size: 11px !important;
    line-height: 1.28 !important;
  }

  /* subtext garansi */
  .pd2-info-text > small {
    font-size: 8.5px !important;
    line-height: 1.3 !important;
  }

  /* Card detail unit sedikit lebih tinggi */
  .pd2-info-box {
    min-height: 78px !important;
    padding: 12px 11px !important;
  }

  .pd2-info-wide {
    min-height: 68px !important;
  }

  /* CATATAN TOKO */
  .pd2-note-item {
    min-height: 66px !important;
    padding: 12px 10px !important;
  }

  .pd2-note-item:nth-child(5) {
    min-height: 62px !important;
  }

  .pd2-note-content strong {
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 1000 !important;
  }

  /* Tombol WA */
  .pd2-chat {
    min-height: 52px !important;
    font-size: 10.5px !important;
  }

}


/* =========================================================
   PRODUCT DETAIL - MOBILE FRIENDLY FINAL
   ========================================================= */

@media (max-width: 620px) {

  /* overlay */
  .pd2-overlay {
    padding: 6px !important;
    align-items: center !important;
  }

  /* modal hampir selebar layar */
  .pd2-modal {
    width: 97vw !important;
    max-width: 97vw !important;

    max-height: 90dvh !important;

    padding: 18px 16px 16px !important;

    border-radius: 18px !important;
  }


  /* =========================
     HEADER PRODUK
     ========================= */

  .pd2-top {
    gap: 12px !important;
    padding-right: 34px !important;
  }

  .pd2-thumb {
    width: 68px !important;
    height: 68px !important;
    flex-basis: 68px !important;

    border-radius: 14px !important;
  }

  .pd2-name-row h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .pd2-sub {
    margin-top: 5px !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;

    color: #c2beb8 !important;
  }

  .pd2-status {
    font-size: 9.5px !important;
    font-weight: 1000 !important;
  }

  .pd2-status i {
    width: 8px !important;
    height: 8px !important;
  }


  /* =========================
     HARGA
     ========================= */

  .pd2-price-wrap {
    margin-top: 15px !important;
  }

  .pd2-price {
    font-size: 27px !important;
    line-height: 1.1 !important;
  }


  /* =========================
     JUDUL BAGIAN
     ========================= */

  .pd2-section-title,
  .pd2-note-title {
    margin-top: 18px !important;
    margin-bottom: 10px !important;

    font-size: 13px !important;
    font-weight: 1000 !important;

    letter-spacing: .10em !important;
  }


  /* =========================
     DETAIL UNIT
     ========================= */

  .pd2-info-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 9px !important;
  }

  .pd2-info-box {
    min-height: 86px !important;

    padding: 13px 12px !important;

    border-radius: 13px !important;

    gap: 10px !important;
  }

  .pd2-info-wide {
    min-height: 72px !important;
  }

  .pd2-info-icon {
    font-size: 18px !important;
    flex: 0 0 auto !important;
  }

  .pd2-info-text {
    gap: 2px !important;
  }

  /* label: Kondisi, Battery Health, dll */
  .pd2-info-text > span {
    font-size: 10px !important;
    font-weight: 700 !important;

    color: #aeb0b2 !important;
  }

  /* nilai utama */
  .pd2-info-text > strong {
    margin-top: 3px !important;

    font-size: 12.5px !important;
    font-weight: 1000 !important;

    line-height: 1.25 !important;

    color: #ffffff !important;
  }

  /* subtext garansi */
  .pd2-info-text > small {
    margin-top: 3px !important;

    font-size: 9.5px !important;
    line-height: 1.3 !important;

    color: #c2c4c5 !important;
  }


  /* =========================
     CATATAN TOKO
     ========================= */

  .pd2-note-title {
    text-align: center !important;

    font-size: 13px !important;
  }

  .pd2-note-list {
    gap: 9px !important;
  }

  .pd2-note-item {
    min-height: 72px !important;

    padding: 13px 11px !important;

    border-radius: 13px !important;
  }

  .pd2-note-item:nth-child(5) {
    min-height: 66px !important;
  }

  .pd2-note-content strong {
    font-size: 11.5px !important;
    font-weight: 1000 !important;

    line-height: 1.3 !important;

    text-align: center !important;
  }


  /* =========================
     CHAT ADMIN
     ========================= */

  .pd2-chat {
    min-height: 54px !important;

    margin-top: 14px !important;

    border-radius: 12px !important;

    font-size: 11px !important;
    font-weight: 1000 !important;
  }

  .pd2-wa {
    width: 25px !important;
    height: 25px !important;

    font-size: 6.5px !important;
  }


  /* close */
  .pd2-close {
    width: 34px !important;
    height: 34px !important;

    font-size: 22px !important;
  }

}


/* =========================================================
   EXTRA SMALL PHONE
   ========================================================= */

@media (max-width: 390px) {

  .pd2-modal {
    width: 98vw !important;
    max-width: 98vw !important;

    padding: 16px 12px 14px !important;
  }

  .pd2-thumb {
    width: 62px !important;
    height: 62px !important;
    flex-basis: 62px !important;
  }

  .pd2-name-row h2 {
    font-size: 18px !important;
  }

  .pd2-sub {
    font-size: 11px !important;
  }

  .pd2-price {
    font-size: 25px !important;
  }

  .pd2-section-title,
  .pd2-note-title {
    font-size: 12.5px !important;
  }

  .pd2-info-box {
    min-height: 82px !important;
    padding: 11px 10px !important;
  }

  .pd2-info-text > span {
    font-size: 9.5px !important;
  }

  .pd2-info-text > strong {
    font-size: 11.5px !important;
  }

  .pd2-note-content strong {
    font-size: 10.5px !important;
  }

}


/* =========================================================
   CATATAN TOKO - MULTI ACCENT, TETAP SATU KONSEP LOGO
   ========================================================= */

/* base */
.pd2-note-item {
  position: relative !important;
  overflow: hidden !important;

  color: #ffffff !important;

  border-width: 1px !important;
  border-style: solid !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 5px 16px rgba(0,0,0,.14) !important;
}

/* GARANSI - ORANGE */
.pd2-note-item:nth-child(1) {
  border-color: rgba(242,104,18,.48) !important;

  background:
    linear-gradient(
      145deg,
      rgba(242,104,18,.15),
      rgba(16,21,26,.97)
    ) !important;
}

.pd2-note-item:nth-child(1)
.pd2-note-content strong {
  color: #ffb067 !important;
}


/* ICLOUD - GOLD / AMBER */
.pd2-note-item:nth-child(2) {
  border-color: rgba(255,174,45,.38) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,174,45,.11),
      rgba(16,21,26,.97)
    ) !important;
}

.pd2-note-item:nth-child(2)
.pd2-note-content strong {
  color: #ffd08a !important;
}


/* TRANSFER DATA - ORANGE RED */
.pd2-note-item:nth-child(3) {
  border-color: rgba(255,92,40,.42) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,92,40,.12),
      rgba(16,21,26,.97)
    ) !important;
}

.pd2-note-item:nth-child(3)
.pd2-note-content strong {
  color: #ff936c !important;
}


/* KONSULTASI - RED / CORAL */
.pd2-note-item:nth-child(4) {
  border-color: rgba(241,36,76,.38) !important;

  background:
    linear-gradient(
      145deg,
      rgba(241,36,76,.11),
      rgba(16,21,26,.97)
    ) !important;
}

.pd2-note-item:nth-child(4)
.pd2-note-content strong {
  color: #ff7d96 !important;
}


/* COD - GREEN BENEFIT */
.pd2-note-item:nth-child(5) {
  border-color: rgba(57,255,20,.32) !important;

  background:
    linear-gradient(
      145deg,
      rgba(57,255,20,.10),
      rgba(16,21,26,.97)
    ) !important;
}

.pd2-note-item:nth-child(5)
.pd2-note-content strong {
  color: #9cff88 !important;
}


/* glow tipis biar premium */
.pd2-note-item::after {
  content: "";

  position: absolute;

  width: 70px;
  height: 70px;

  right: -35px;
  top: -35px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.025);

  pointer-events: none;
}


/* HP */
@media (max-width: 620px) {

  .pd2-note-content strong {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
  }

}


/* COD GRATIS ONGKIR - FONT 2X LEBIH BESAR */

.pd2-note-item:nth-child(5)
.pd2-note-content strong {
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 1000 !important;
  letter-spacing: .01em !important;
}

.pd2-note-item:nth-child(5) {
  min-height: 82px !important;
  padding: 16px 14px !important;
}


/* MOBILE */
@media (max-width: 620px) {

  .pd2-note-item:nth-child(5)
  .pd2-note-content strong {
    font-size: 20px !important;
    line-height: 1.18 !important;
  }

  .pd2-note-item:nth-child(5) {
    min-height: 78px !important;
    padding: 14px 12px !important;
  }

}


/* HP kecil */
@media (max-width: 390px) {

  .pd2-note-item:nth-child(5)
  .pd2-note-content strong {
    font-size: 18px !important;
  }

}


/* =========================================
   PENGIRIMAN LUAR DAERAH
   ========================================= */

.pd2-note-item:nth-child(6) {
  grid-column: 1 / -1 !important;

  min-height: 62px !important;

  border-color:
    rgba(255,255,255,.16) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(16,21,26,.97)
    ) !important;
}

.pd2-note-item:nth-child(6)
.pd2-note-content strong {
  color: #f5f5f5 !important;

  font-size: 13px !important;
  font-weight: 1000 !important;

  text-align: center !important;
}

@media (max-width: 620px) {

  .pd2-note-item:nth-child(6) {
    min-height: 58px !important;
  }

  .pd2-note-item:nth-child(6)
  .pd2-note-content strong {
    font-size: 12px !important;
  }

}




/* === PD2 PREMIUM FINAL START === */

/* =========================================================
   MODAL
   ========================================================= */

.pd2-overlay {
  padding: 8px !important;
}

.pd2-modal {

  width: min(
    480px,
    calc(100vw - 16px)
  ) !important;

  max-height:
    calc(100dvh - 16px) !important;

  padding:
    10px 12px 14px !important;

  border-radius:
    20px !important;

  background:
    linear-gradient(
      180deg,
      #060809 0%,
      #050607 100%
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.08) !important;

  box-shadow:
    0 25px 90px
    rgba(0,0,0,.75) !important;

  overflow-x:
    hidden !important;
}


/* =========================================================
   CLOSE
   ========================================================= */

.pd2-close {

  position:
    sticky !important;

  top: 2px !important;

  z-index:
    50 !important;

  float:
    right !important;

  width:
    37px !important;

  height:
    37px !important;

  margin:
    0 0 -37px auto !important;

  background:
    rgba(25,28,31,.92) !important;

  backdrop-filter:
    blur(12px) !important;

  border:
    1px solid
    rgba(255,255,255,.10) !important;

  color:
    #d9d9d9 !important;
}


/* =========================================================
   HERO PHOTO
   ========================================================= */

.pd2-hero {

  position:
    relative !important;

  width:
    100% !important;

  aspect-ratio:
    4 / 3 !important;

  max-height:
    330px !important;

  margin:
    0 0 15px !important;

  overflow:
    hidden !important;

  border-radius:
    18px !important;

  border:
    1px solid
    rgba(255,255,255,.10) !important;

  background:
    #0a0c0e !important;
}


.pd2-hero-image {

  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    contain !important;

  object-position:
    center !important;

  background:
    #090b0d !important;
}


.pd2-hero-empty {

  width:
    100% !important;

  height:
    100% !important;

  display:
    grid !important;

  place-items:
    center !important;

  color:
    #656a70 !important;

  font-size:
    15px !important;

  font-weight:
    900 !important;
}


.pd2-photo-badge {

  position:
    absolute !important;

  left:
    13px !important;

  bottom:
    13px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  gap:
    7px !important;

  padding:
    8px 11px !important;

  border-radius:
    11px !important;

  color:
    #dedede !important;

  background:
    rgba(11,12,14,.77) !important;

  border:
    1px solid
    rgba(255,255,255,.12) !important;

  backdrop-filter:
    blur(10px) !important;

  font-size:
    8px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .4px !important;
}


.pd2-photo-badge span {
  color:
    #ff681d !important;

  font-size:
    14px !important;
}


/* thumb lama tidak dipakai */

.pd2-thumb {
  display:
    none !important;
}


/* =========================================================
   IDENTITAS PRODUK
   ========================================================= */

.pd2-identity {

  width:
    100% !important;

  margin:
    0 0 5px !important;
}


.pd2-product-heading {

  width:
    100% !important;

  min-width:
    0 !important;
}


.pd2-name-row {

  display:
    flex !important;

  align-items:
    flex-start !important;

  justify-content:
    space-between !important;

  gap:
    10px !important;
}


.pd2-name-row h2 {

  flex:
    1 1 auto !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  color:
    #fff !important;

  font-size:
    25px !important;

  font-weight:
    950 !important;

  line-height:
    1.05 !important;

  letter-spacing:
    -.45px !important;

  word-break:
    normal !important;
}


.pd2-status {

  flex:
    0 0 auto !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  gap:
    5px !important;

  margin-top:
    4px !important;

  font-size:
    9px !important;

  font-weight:
    950 !important;

  white-space:
    nowrap !important;
}


.pd2-status span {

  width:
    8px !important;

  height:
    8px !important;

  border-radius:
    50% !important;
}


.pd2-status-ready {
  color:
    #52ef75 !important;
}

.pd2-status-ready span {
  background:
    #31e85f !important;

  box-shadow:
    0 0 10px
    rgba(49,232,95,.65) !important;
}


.pd2-status-po {
  color:
    #ff6b58 !important;
}

.pd2-status-po span {
  background:
    #ff4d5f !important;
}


.pd2-status-sold {
  color:
    #aaa !important;
}

.pd2-status-sold span {
  background:
    #888 !important;
}


/* STORAGE + CATEGORY */

.pd2-product-meta {

  display:
    flex !important;

  align-items:
    center !important;

  flex-wrap:
    wrap !important;

  gap:
    7px !important;

  margin-top:
    6px !important;

  color:
    #9a9da3 !important;

  font-size:
    10px !important;

  line-height:
    1.2 !important;
}


.pd2-product-meta strong {

  color:
    #c8cbd0 !important;

  font-weight:
    900 !important;
}


.pd2-product-meta span {

  color:
    #a2a5aa !important;

  font-weight:
    750 !important;
}


.pd2-product-meta i {

  display:
    block !important;

  width:
    4px !important;

  height:
    4px !important;

  border-radius:
    50% !important;

  background:
    #ff681d !important;
}


/* =========================================================
   PRICE
   ========================================================= */

.pd2-price-wrap {

  margin:
    14px 0 8px !important;
}


.pd2-price {

  color:
    #ff681d !important;

  font-size:
    29px !important;

  font-weight:
    1000 !important;

  line-height:
    1 !important;

  letter-spacing:
    -.5px !important;
}


.pd2-old-price {

  margin-bottom:
    5px !important;
}


/* WARRANTY SUMMARY */

.pd2-warranty-summary {

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    7px !important;

  margin:
    0 0 21px !important;

  color:
    #a9aaad !important;

  font-size:
    9px !important;

  font-weight:
    750 !important;
}


.pd2-warranty-summary > span {

  color:
    #ff9b22 !important;

  font-size:
    18px !important;
}


.pd2-warranty-summary strong {

  color:
    #bfc1c4 !important;

  font-size:
    9px !important;

  font-weight:
    800 !important;
}


/* =========================================================
   DETAIL UNIT
   ========================================================= */

.pd2-section-title {

  margin:
    0 0 10px !important;

  color:
    #9da2a8 !important;

  font-size:
    11px !important;

  font-weight:
    950 !important;

  letter-spacing:
    1.4px !important;
}


.pd2-info-grid {

  display:
    grid !important;

  grid-template-columns:
    repeat(2, minmax(0,1fr))
    !important;

  gap:
    8px !important;
}


.pd2-info-box {

  min-width:
    0 !important;

  min-height:
    78px !important;

  padding:
    11px !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      145deg,
      #15171d,
      #111318
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.07) !important;
}


.pd2-info-wide {

  grid-column:
    1 / -1 !important;

  min-height:
    64px !important;
}


/* =========================================================
   CATATAN TOKO
   ========================================================= */

.pd2-note-title {

  margin-top:
    22px !important;

  text-align:
    center !important;

  color:
    #f1f1f1 !important;

  font-size:
    14px !important;

  letter-spacing:
    1.7px !important;
}


.pd2-notes {

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;
}


.pd2-note-list {

  display:
    grid !important;

  grid-template-columns:
    repeat(2, minmax(0,1fr))
    !important;

  gap:
    8px !important;
}


/* RESET rule nth-child lama */

.pd2-note-item,
.pd2-note-item:nth-child(5),
.pd2-note-item:nth-child(6),
.pd2-note-item:nth-child(7),
.pd2-note-item:nth-child(8) {

  grid-column:
    auto !important;
}


.pd2-note-item {

  min-width:
    0 !important;

  min-height:
    70px !important;

  padding:
    11px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    8px !important;

  border-radius:
    14px !important;

  border:
    1px solid
    rgba(255,255,255,.08)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(242,104,18,.07),
      #101317
    ) !important;
}


.pd2-note-icon {

  display:
    grid !important;

  place-items:
    center !important;

  flex:
    0 0 30px !important;

  width:
    30px !important;

  height:
    30px !important;

  border-radius:
    9px !important;

  color:
    #ff8a35 !important;

  background:
    rgba(242,104,18,.10)
    !important;

  font-size:
    18px !important;
}


.pd2-note-content {

  width:
    auto !important;

  min-width:
    0 !important;

  flex:
    1 !important;
}


.pd2-note-content strong {

  display:
    block !important;

  color:
    #ff8b43 !important;

  font-size:
    8.5px !important;

  font-weight:
    950 !important;

  line-height:
    1.25 !important;

  text-align:
    left !important;
}


.pd2-note-content small {

  display:
    block !important;

  margin-top:
    4px !important;

  color:
    #a9acb1 !important;

  font-size:
    7.4px !important;

  line-height:
    1.3 !important;
}


/* FREE KONSULTASI sedikit coral */

.pd2-note-item:nth-child(4) {

  border-color:
    rgba(255,62,105,.26)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,44,95,.08),
      #101317
    ) !important;
}


/* TRADE-IN */

.pd2-note-tradein {

  border-color:
    rgba(255,126,35,.28)
    !important;
}


/* CEK TOKO */

.pd2-note-check {

  border-color:
    rgba(255,170,45,.24)
    !important;
}


/* COD FULL WIDTH */

.pd2-note-cod {

  grid-column:
    1 / -1 !important;

  min-height:
    72px !important;

  border-color:
    rgba(49,232,95,.30)
    !important;

  background:
    linear-gradient(
      135deg,
      rgba(13,112,45,.30),
      rgba(5,42,23,.80)
    ) !important;
}


.pd2-note-cod
.pd2-note-content strong {

  color:
    #7cff80 !important;

  font-size:
    12px !important;

  text-align:
    center !important;
}


/* SHIPPING FULL WIDTH */

.pd2-note-shipping {

  grid-column:
    1 / -1 !important;

  border-color:
    rgba(130,170,205,.25)
    !important;

  background:
    linear-gradient(
      135deg,
      rgba(45,70,89,.22),
      #101317
    ) !important;
}


.pd2-note-shipping
.pd2-note-content strong {

  color:
    #e6e9ec !important;

  text-align:
    center !important;
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.pd2-chat {

  position:
    sticky !important;

  bottom:
    4px !important;

  z-index:
    20 !important;

  width:
    100% !important;

  min-height:
    55px !important;

  margin-top:
    16px !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      135deg,
      #18d768 0%,
      #10c258 55%,
      #08a94c 100%
    ) !important;

  color:
    #fff !important;

  font-size:
    11px !important;

  font-weight:
    950 !important;

  box-shadow:
    0 12px 28px
    rgba(0,0,0,.38),
    0 0 24px
    rgba(24,215,104,.15)
    !important;
}


/* icon WA lama */

.pd2-wa {

  width:
    29px !important;

  height:
    29px !important;

  margin-right:
    8px !important;

  font-size:
    7px !important;

  font-weight:
    950 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .pd2-overlay {
    padding:
      6px !important;
  }


  .pd2-modal {

    width:
      calc(100vw - 12px)
      !important;

    max-height:
      calc(100dvh - 12px)
      !important;

    padding:
      8px 10px 12px
      !important;

    border-radius:
      18px !important;
  }


  .pd2-hero {

    aspect-ratio:
      4 / 3 !important;

    max-height:
      290px !important;

    margin-bottom:
      13px !important;
  }


  .pd2-name-row h2 {

    font-size:
      23px !important;
  }


  .pd2-status {

    font-size:
      8px !important;
  }


  .pd2-price {

    font-size:
      28px !important;
  }


  .pd2-info-grid {

    grid-template-columns:
      repeat(2, minmax(0,1fr))
      !important;

    gap:
      7px !important;
  }


  .pd2-info-box {

    min-height:
      74px !important;

    padding:
      10px 9px !important;
  }


  .pd2-note-list {

    grid-template-columns:
      repeat(2, minmax(0,1fr))
      !important;

    gap:
      7px !important;
  }


  .pd2-note-item {

    min-height:
      67px !important;

    padding:
      9px 8px !important;

    gap:
      6px !important;
  }


  .pd2-note-icon {

    flex-basis:
      26px !important;

    width:
      26px !important;

    height:
      26px !important;

    font-size:
      15px !important;
  }


  .pd2-note-content strong {

    font-size:
      7.6px !important;
  }


  .pd2-note-content small {

    font-size:
      6.7px !important;
  }


  .pd2-note-cod
  .pd2-note-content strong {

    font-size:
      11px !important;
  }


  .pd2-chat {

    min-height:
      52px !important;

    font-size:
      10px !important;
  }

}

/* === PD2 PREMIUM FINAL END === */

/* =========================================================
   CATATAN TOKO FINAL - SIMPLE LIST
   ========================================================= */

.pd2-note-title {
  margin-top: 24px !important;
  margin-bottom: 10px !important;

  text-align: left !important;

  color: #a9adb3 !important;

  font-size: 11px !important;
  font-weight: 950 !important;

  letter-spacing: 1.3px !important;
}


/* satu panel saja */

.pd2-notes {
  padding: 14px 15px !important;

  border:
    1px solid rgba(255,255,255,.07) !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      145deg,
      #12161b,
      #0d1115
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


/* bukan grid lagi */

.pd2-note-list {
  display: flex !important;
  flex-direction: column !important;

  gap: 0 !important;

  width: 100% !important;
}


/* hapus semua kotak item */

.pd2-note-item,
.pd2-note-item:nth-child(1),
.pd2-note-item:nth-child(2),
.pd2-note-item:nth-child(3),
.pd2-note-item:nth-child(4),
.pd2-note-item:nth-child(5),
.pd2-note-item:nth-child(6),
.pd2-note-item:nth-child(7),
.pd2-note-item:nth-child(8) {

  position: relative !important;

  display: block !important;

  width: 100% !important;

  min-height: 0 !important;

  margin: 0 !important;

  padding:
    8px 4px 8px 17px !important;

  grid-column: auto !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}


/* garis halus antar catatan */

.pd2-note-item:not(:last-child) {
  border-bottom:
    1px solid rgba(255,255,255,.055) !important;
}


/* bullet orange */

.pd2-note-item::before {
  content: "" !important;

  position: absolute !important;

  left: 2px !important;
  top: 13px !important;

  width: 5px !important;
  height: 5px !important;

  border-radius: 50% !important;

  background: #f26812 !important;

  box-shadow:
    0 0 7px rgba(242,104,18,.30) !important;
}


/* icon lama hilang */

.pd2-note-icon {
  display: none !important;
}


/* text */

.pd2-note-content {
  display: block !important;

  width: 100% !important;

  min-width: 0 !important;
}


.pd2-note-content strong,
.pd2-note-item:nth-child(1) .pd2-note-content strong,
.pd2-note-item:nth-child(4) .pd2-note-content strong,
.pd2-note-cod .pd2-note-content strong,
.pd2-note-shipping .pd2-note-content strong {

  display: block !important;

  margin: 0 !important;

  color: #e7e8ea !important;

  font-size: 9.5px !important;
  font-weight: 800 !important;

  line-height: 1.35 !important;

  text-align: left !important;

  letter-spacing: 0 !important;
}


/* subtext */

.pd2-note-content small {
  display: block !important;

  margin-top: 2px !important;

  color: #858b92 !important;

  font-size: 7.8px !important;
  font-weight: 500 !important;

  line-height: 1.35 !important;
}


/* COD sedikit hijau, tapi tetap list sederhana */

.pd2-note-cod::before {
  background: #39d967 !important;

  box-shadow:
    0 0 7px rgba(57,217,103,.35) !important;
}

.pd2-note-cod .pd2-note-content strong {
  color: #8af59f !important;
}


/* pengiriman */

.pd2-note-shipping::before {
  background: #8faabd !important;
}


/* mobile */

@media (max-width: 620px) {

  .pd2-notes {
    padding:
      11px 12px !important;

    border-radius:
      12px !important;
  }

  .pd2-note-item {
    padding:
      7px 3px 7px 16px !important;
  }

  .pd2-note-item::before {
    top:
      12px !important;
  }

  .pd2-note-content strong {
    font-size:
      9px !important;
  }

  .pd2-note-content small {
    font-size:
      7.3px !important;
  }

}


/* =========================================================
   CATATAN TOKO - SIMPLE STYLE SEPERTI CONTOH
   ========================================================= */

.pd2-note-title {
  margin-top: 20px !important;
  margin-bottom: 10px !important;
  text-align: left !important;
  color: #9aa3b2 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

.pd2-notes {
  padding: 18px 18px !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 14px !important;
  background: #0d2347 !important;
  box-shadow: none !important;
}

.pd2-note-list {
  display: block !important;
  width: 100% !important;
}

.pd2-note-item,
.pd2-note-item:nth-child(1),
.pd2-note-item:nth-child(2),
.pd2-note-item:nth-child(3),
.pd2-note-item:nth-child(4),
.pd2-note-item:nth-child(5),
.pd2-note-item:nth-child(6),
.pd2-note-item:nth-child(7),
.pd2-note-item:nth-child(8) {
  display: list-item !important;
  list-style: disc !important;
  list-style-position: outside !important;
  margin: 0 0 10px 18px !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  grid-column: auto !important;
}

.pd2-note-item:last-child {
  margin-bottom: 0 !important;
}

.pd2-note-item::before {
  display: none !important;
  content: none !important;
}

.pd2-note-icon {
  display: none !important;
}

.pd2-note-content {
  display: block !important;
}

.pd2-note-content strong {
  display: inline !important;
  color: #e8eefc !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  text-align: left !important;
  letter-spacing: 0 !important;
}

.pd2-note-content small {
  display: none !important;
}

/* hilangkan warna-warna khusus lama */
.pd2-note-cod .pd2-note-content strong,
.pd2-note-shipping .pd2-note-content strong {
  color: #e8eefc !important;
}

/* mobile */
@media (max-width: 620px) {
  .pd2-notes {
    padding: 16px 16px !important;
    border-radius: 12px !important;
  }

  .pd2-note-item {
    margin: 0 0 9px 16px !important;
  }

  .pd2-note-content strong {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }
}


/* =========================================================
   CATATAN TOKO - SIMPLE STYLE SEPERTI CONTOH
   ========================================================= */

.pd2-note-title {
  margin-top: 20px !important;
  margin-bottom: 10px !important;
  text-align: left !important;
  color: #9aa3b2 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

.pd2-notes {
  padding: 18px 18px !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 14px !important;
  background: #0d2347 !important;
  box-shadow: none !important;
}

.pd2-note-list {
  display: block !important;
  width: 100% !important;
}

.pd2-note-item,
.pd2-note-item:nth-child(1),
.pd2-note-item:nth-child(2),
.pd2-note-item:nth-child(3),
.pd2-note-item:nth-child(4),
.pd2-note-item:nth-child(5),
.pd2-note-item:nth-child(6),
.pd2-note-item:nth-child(7),
.pd2-note-item:nth-child(8) {
  display: list-item !important;
  list-style: disc !important;
  list-style-position: outside !important;
  margin: 0 0 10px 18px !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  grid-column: auto !important;
}

.pd2-note-item:last-child {
  margin-bottom: 0 !important;
}

.pd2-note-item::before {
  display: none !important;
  content: none !important;
}

.pd2-note-icon {
  display: none !important;
}

.pd2-note-content {
  display: block !important;
}

.pd2-note-content strong {
  display: inline !important;
  color: #e8eefc !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  text-align: left !important;
  letter-spacing: 0 !important;
}

.pd2-note-content small {
  display: none !important;
}

/* hilangkan warna-warna khusus lama */
.pd2-note-cod .pd2-note-content strong,
.pd2-note-shipping .pd2-note-content strong {
  color: #e8eefc !important;
}

/* mobile */
@media (max-width: 620px) {
  .pd2-notes {
    padding: 16px 16px !important;
    border-radius: 12px !important;
  }

  .pd2-note-item {
    margin: 0 0 9px 16px !important;
  }

  .pd2-note-content strong {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }
}


/* =========================================================
   CATATAN TOKO SIMPLE FINAL
   1 BOX + SEMUA CATATAN
   ========================================================= */

.pd2-note-title {
  margin: 22px 0 10px !important;

  text-align: left !important;

  color: #9299a5 !important;

  font-size: 11px !important;
  font-weight: 800 !important;

  letter-spacing: 1.1px !important;
}


/* SATU BOX SAJA */

.pd2-notes {
  display: block !important;

  width: 100% !important;

  padding: 17px 18px !important;

  border:
    1px solid rgba(255,255,255,.06) !important;

  border-radius: 13px !important;

  background: #0d1d36 !important;

  box-shadow: none !important;
}


/* sembunyikan seluruh struktur card lama bila masih tersisa */

.pd2-note-list {
  display: block !important;
}


/* LIST BARU */

.pd2-simple-note-list {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  padding:
    0 0 0 18px !important;

  list-style:
    disc !important;
}


.pd2-simple-note-list li {
  display: list-item !important;

  margin:
    0 0 8px !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  color: #e6ebf2 !important;

  font-size: 11px !important;
  font-weight: 500 !important;

  line-height: 1.45 !important;

  letter-spacing: 0 !important;
}


.pd2-simple-note-list li:last-child {
  margin-bottom: 0 !important;
}


/* bullet putih sederhana */

.pd2-simple-note-list li::marker {
  color: #ffffff !important;
  font-size: .85em !important;
}


/* jangan biarkan style note lama memengaruhi list */

.pd2-simple-note-list strong,
.pd2-simple-note-list small,
.pd2-simple-note-list span {
  color: inherit !important;
}


/* MOBILE */

@media (max-width: 620px) {

  .pd2-note-title {
    margin-top: 20px !important;

    font-size: 10px !important;
  }

  .pd2-notes {
    padding:
      15px 15px !important;

    border-radius:
      12px !important;
  }

  .pd2-simple-note-list {
    padding-left:
      17px !important;
  }

  .pd2-simple-note-list li {
    margin-bottom:
      7px !important;

    font-size:
      10px !important;

    line-height:
      1.45 !important;
  }

}



/* =========================================================
   DETAIL PRODUCT CLEAN FINAL
   FOTO -> HARGA -> DETAIL UNIT
   ========================================================= */

/* nama, status, storage, kategori di header disembunyikan
   karena semuanya sudah pindah ke Detail Unit */

.pd2-identity {
  display: none !important;
}


/* garansi kecil bawah harga juga pindah ke Detail Unit */

.pd2-warranty-summary {
  display: none !important;
}


/* harga langsung setelah foto */

.pd2-price-wrap {
  margin:
    14px 0 24px !important;
}


/* DETAIL UNIT */

.pd2-detail-model,
.pd2-detail-category {
  grid-column:
    1 / -1 !important;
}


/* model dibuat sedikit lebih menonjol */

.pd2-detail-model
.pd2-info-value,
.pd2-detail-model strong {

  font-size:
    13px !important;

  font-weight:
    950 !important;

  color:
    #ffffff !important;
}


/* kategori boleh panjang */

.pd2-detail-category
.pd2-info-value,
.pd2-detail-category strong {

  white-space:
    normal !important;

  overflow-wrap:
    anywhere !important;
}


/* status */

.pd2-info-grid
.pd2-info-box {

  min-width:
    0 !important;
}


/* supaya teks tidak pecah per huruf */

.pd2-info-box strong,
.pd2-info-box span,
.pd2-info-box div {

  word-break:
    normal !important;

  overflow-wrap:
    break-word !important;

  writing-mode:
    horizontal-tb !important;
}


/* MOBILE */

@media (max-width: 620px) {

  .pd2-price-wrap {
    margin:
      13px 0 21px !important;
  }

  .pd2-detail-model
  .pd2-info-value,
  .pd2-detail-model strong {

    font-size:
      12px !important;
  }

}


/* =========================================================
   DETAIL UNIT COMPACT USER FRIENDLY FINAL
   ========================================================= */

.pd2-info-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 6px !important;
}


/* semua box lebih pendek */

.pd2-info-box {
  min-height: 55px !important;

  padding: 8px 9px !important;

  gap: 7px !important;

  border-radius: 11px !important;

  align-items: center !important;

  box-sizing: border-box !important;
}


/* MODEL tetap full width */

.pd2-detail-model {
  grid-column: 1 / -1 !important;

  min-height: 53px !important;
}


/* KATEGORI + WARNA = 2 KOLOM */

.pd2-info-wide.pd2-detail-category,
.pd2-info-wide.pd2-detail-color {
  grid-column: auto !important;

  min-height: 55px !important;
}


/* ICON */

.pd2-info-icon {
  flex: 0 0 23px !important;

  width: 23px !important;
  min-width: 23px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #ffad00 !important;

  font-size: 9px !important;
  font-weight: 950 !important;

  line-height: 1 !important;
}


/* TEXT WRAPPER */

.pd2-info-box > div:not(.pd2-info-icon) {
  flex: 1 1 auto !important;

  min-width: 0 !important;
}


/* LABEL */

.pd2-info-box span {
  display: block !important;

  margin-bottom: 3px !important;

  color: #aeb2b9 !important;

  font-size: 9.5px !important;
  font-weight: 750 !important;

  line-height: 1.05 !important;

  letter-spacing: 0 !important;
}


/* NILAI */

.pd2-info-box strong {
  display: block !important;

  color: #f7f7f7 !important;

  font-size: 11.5px !important;
  font-weight: 900 !important;

  line-height: 1.2 !important;

  letter-spacing: 0 !important;

  word-break: normal !important;
  overflow-wrap: break-word !important;
}


/* MODEL */

.pd2-detail-model strong {
  font-size: 13px !important;
}


/* KATEGORI DAN WARNA */

.pd2-detail-category strong,
.pd2-detail-color strong {
  font-size: 10.5px !important;

  line-height: 1.2 !important;
}


/* GARANSI PANJANG */

.pd2-info-box strong {
  max-width: 100% !important;
}


/* DETAIL UNIT TITLE */

.pd2-section-title {
  margin-bottom: 8px !important;

  font-size: 11.5px !important;
  font-weight: 900 !important;

  letter-spacing: 1px !important;
}


/* MOBILE */

@media (max-width: 620px) {

  .pd2-info-grid {
    gap: 6px !important;
  }

  .pd2-info-box {
    min-height: 53px !important;

    padding: 7px 8px !important;

    gap: 6px !important;

    border-radius: 10px !important;
  }

  .pd2-detail-model {
    min-height: 51px !important;
  }

  .pd2-info-wide.pd2-detail-category,
  .pd2-info-wide.pd2-detail-color {
    min-height: 53px !important;
  }

  .pd2-info-icon {
    flex-basis: 21px !important;

    width: 21px !important;
    min-width: 21px !important;

    font-size: 8px !important;
  }

  .pd2-info-box span {
    font-size: 9px !important;
  }

  .pd2-info-box strong {
    font-size: 11px !important;
  }

  .pd2-detail-model strong {
    font-size: 12.5px !important;
  }

  .pd2-detail-category strong,
  .pd2-detail-color strong {
    font-size: 10px !important;
  }

}


/* =========================================================
   DETAIL UNIT - CENTER ALIGN FINAL
   ========================================================= */

.pd2-info-box {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 54px !important;

  padding: 8px 9px !important;
}


/* ICON TETAP DI KIRI */

.pd2-info-icon {
  position: absolute !important;

  left: 10px !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  width: 23px !important;
  min-width: 23px !important;

  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* CONTENT BENAR-BENAR CENTER */

.pd2-info-box > div:not(.pd2-info-icon) {
  width: 100% !important;

  min-width: 0 !important;

  padding-left: 27px !important;
  padding-right: 27px !important;

  box-sizing: border-box !important;

  text-align: center !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}


/* LABEL */

.pd2-info-box span {
  width: 100% !important;

  margin: 0 0 4px !important;

  text-align: center !important;

  color: #b9bdc3 !important;

  font-size: 9.5px !important;
  font-weight: 750 !important;

  line-height: 1.05 !important;
}


/* VALUE */

.pd2-info-box strong {
  width: 100% !important;

  text-align: center !important;

  color: #ffffff !important;

  font-size: 11.5px !important;
  font-weight: 900 !important;

  line-height: 1.2 !important;

  word-break: normal !important;
  overflow-wrap: break-word !important;
}


/* =========================================================
   MODEL - LEBIH BESAR
   ========================================================= */

.pd2-detail-model {
  min-height: 68px !important;

  padding-top: 10px !important;
  padding-bottom: 10px !important;
}


.pd2-detail-model span {
  margin-bottom: 5px !important;

  font-size: 10px !important;
}


.pd2-detail-model strong {
  font-size: 16px !important;
  font-weight: 1000 !important;

  line-height: 1.1 !important;

  letter-spacing: -0.2px !important;
}


/* KATEGORI + WARNA */

.pd2-detail-category strong,
.pd2-detail-color strong {
  font-size: 10.5px !important;
}


/* GARANSI PANJANG */

.pd2-info-box strong {
  max-width: 100% !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .pd2-info-box {
    min-height: 53px !important;

    padding: 7px 8px !important;
  }


  .pd2-info-icon {
    left: 8px !important;

    width: 21px !important;
    min-width: 21px !important;
  }


  .pd2-info-box > div:not(.pd2-info-icon) {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }


  .pd2-info-box span {
    font-size: 9px !important;
  }


  .pd2-info-box strong {
    font-size: 11px !important;
  }


  .pd2-detail-model {
    min-height: 65px !important;
  }


  .pd2-detail-model span {
    font-size: 9.5px !important;
  }


  .pd2-detail-model strong {
    font-size: 15px !important;
  }


  .pd2-detail-category strong,
  .pd2-detail-color strong {
    font-size: 10px !important;
  }

}


/* =========================================================
   DETAIL UNIT - RAPIIHKAN MODEL & GARANSI
   ========================================================= */

/* HAPUS LABEL MODEL */
.pd2-detail-model span,
.pd2-detail-model .pd2-label,
.pd2-detail-model .info-label {
  display: none !important;
}

/* HAPUS LABEL GARANSI */
.pd2-detail-warranty span,
.pd2-detail-warranty .pd2-label,
.pd2-detail-warranty .info-label,
.pd2-detail-garansi span,
.pd2-detail-garansi .pd2-label,
.pd2-detail-garansi .info-label {
  display: none !important;
}

/* BOX MODEL: fokus ke nama produk */
.pd2-detail-model {
  min-height: 70px !important;
  padding: 12px 14px !important;
}

.pd2-detail-model strong,
.pd2-detail-model .pd2-value,
.pd2-detail-model .info-value {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 22px !important;
  line-height: 1.08 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.3px !important;
  color: #ffffff !important;
}

/* GARANSI: langsung isi saja */
.pd2-detail-warranty strong,
.pd2-detail-warranty .pd2-value,
.pd2-detail-warranty .info-value,
.pd2-detail-garansi strong,
.pd2-detail-garansi .pd2-value,
.pd2-detail-garansi .info-value {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

/* sedikit rapikan semua box */
.pd2-info-box {
  min-height: 58px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.pd2-info-box strong {
  font-size: 12.5px !important;
}

.pd2-info-box span {
  font-size: 10px !important;
}

/* mobile */
@media (max-width: 620px) {
  .pd2-detail-model {
    min-height: 66px !important;
    padding: 10px 12px !important;
  }

  .pd2-detail-model strong,
  .pd2-detail-model .pd2-value,
  .pd2-detail-model .info-value {
    font-size: 20px !important;
    line-height: 1.06 !important;
  }

  .pd2-detail-warranty strong,
  .pd2-detail-warranty .pd2-value,
  .pd2-detail-warranty .info-value,
  .pd2-detail-garansi strong,
  .pd2-detail-garansi .pd2-value,
  .pd2-detail-garansi .info-value {
    font-size: 12.5px !important;
  }

  .pd2-info-box {
    min-height: 54px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .pd2-info-box strong {
    font-size: 12px !important;
  }

  .pd2-info-box span {
    font-size: 9.5px !important;
  }
}


/* =========================================================
   FIX DETAIL UNIT:
   - Nama produk box pertama dibesarkan
   - Label "Model" disembunyikan
   - Label "Garansi" disembunyikan
   ========================================================= */

/* -------------------------
   BOX PERTAMA = MODEL
   ------------------------- */

/* sembunyikan label "Model" */
.pd2-detail-grid > *:first-child small,
.pd2-detail-grid > *:first-child .pd2-label,
.pd2-detail-grid > *:first-child .info-label,
.pd2-detail-grid > *:first-child .detail-label,
.pd2-detail-grid > *:first-child .field-label,
.pd2-detail-grid > *:first-child .label {
  display: none !important;
}

/* perbesar nama produk 2x */
.pd2-detail-grid > *:first-child strong,
.pd2-detail-grid > *:first-child .pd2-value,
.pd2-detail-grid > *:first-child .info-value,
.pd2-detail-grid > *:first-child .detail-value,
.pd2-detail-grid > *:first-child .field-value,
.pd2-detail-grid > *:first-child h3,
.pd2-detail-grid > *:first-child h4 {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 30px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

/* box model sedikit dirapikan */
.pd2-detail-grid > *:first-child {
  min-height: 90px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* -------------------------
   BOX KE-7 = GARANSI
   urutan sekarang:
   1 model
   2 penyimpanan
   3 status
   4 kondisi
   5 battery
   6 kelengkapan
   7 garansi
   8 kategori
   9 warna
   ------------------------- */

/* sembunyikan label "Garansi" */
.pd2-detail-grid > *:nth-child(7) small,
.pd2-detail-grid > *:nth-child(7) .pd2-label,
.pd2-detail-grid > *:nth-child(7) .info-label,
.pd2-detail-grid > *:nth-child(7) .detail-label,
.pd2-detail-grid > *:nth-child(7) .field-label,
.pd2-detail-grid > *:nth-child(7) .label {
  display: none !important;
}

/* isi box garansi tetap jelas */
.pd2-detail-grid > *:nth-child(7) strong,
.pd2-detail-grid > *:nth-child(7) .pd2-value,
.pd2-detail-grid > *:nth-child(7) .info-value,
.pd2-detail-grid > *:nth-child(7) .detail-value,
.pd2-detail-grid > *:nth-child(7) .field-value,
.pd2-detail-grid > *:nth-child(7) h3,
.pd2-detail-grid > *:nth-child(7) h4 {
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  margin: 0 !important;
}

/* mobile */
@media (max-width: 620px) {
  .pd2-detail-grid > *:first-child strong,
  .pd2-detail-grid > *:first-child .pd2-value,
  .pd2-detail-grid > *:first-child .info-value,
  .pd2-detail-grid > *:first-child .detail-value,
  .pd2-detail-grid > *:first-child .field-value,
  .pd2-detail-grid > *:first-child h3,
  .pd2-detail-grid > *:first-child h4 {
    font-size: 28px !important;
  }

  .pd2-detail-grid > *:nth-child(7) strong,
  .pd2-detail-grid > *:nth-child(7) .pd2-value,
  .pd2-detail-grid > *:nth-child(7) .info-value,
  .pd2-detail-grid > *:nth-child(7) .detail-value,
  .pd2-detail-grid > *:nth-child(7) .field-value,
  .pd2-detail-grid > *:nth-child(7) h3,
  .pd2-detail-grid > *:nth-child(7) h4 {
    font-size: 13px !important;
  }
}


/* =========================================================
   FINAL FIX - MODEL BESAR + LABEL GARANSI HILANG
   selector benar: .pd2-info-grid
   ========================================================= */

/* =====================================
   BOX 1 = MODEL
   ===================================== */

/* hapus tulisan "Model" */
.pd2-info-grid > .pd2-info-box:nth-child(1) span {
  display: none !important;
}

/* nama produk 2x lebih besar */
.pd2-info-grid > .pd2-info-box:nth-child(1) strong {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  text-align: center !important;

  color: #ffffff !important;

  font-size: 24px !important;
  font-weight: 1000 !important;

  line-height: 1.05 !important;

  letter-spacing: -0.4px !important;

  white-space: normal !important;
  word-break: normal !important;
}

/* box model jangan terlalu tinggi */
.pd2-info-grid > .pd2-info-box:nth-child(1) {
  min-height: 72px !important;

  padding-top: 12px !important;
  padding-bottom: 12px !important;
}


/* =====================================
   BOX 7 = GARANSI
   ===================================== */

/* hapus tulisan "Garansi" */
.pd2-info-grid > .pd2-info-box:nth-child(7) span {
  display: none !important;
}

/* isi garansi tetap jelas */
.pd2-info-grid > .pd2-info-box:nth-child(7) strong {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  text-align: center !important;

  font-size: 12px !important;
  font-weight: 900 !important;

  line-height: 1.22 !important;
}


/* =====================================
   MOBILE
   ===================================== */

@media (max-width: 620px) {

  .pd2-info-grid > .pd2-info-box:nth-child(1) strong {
    font-size: 23px !important;
  }

  .pd2-info-grid > .pd2-info-box:nth-child(1) {
    min-height: 68px !important;
  }

  .pd2-info-grid > .pd2-info-box:nth-child(7) strong {
    font-size: 11.5px !important;
  }

}




/* === WHATSAPP CTA PREMIUM START === */

/* =========================================================
   CATATAN TOKO
   beri ruang supaya item terakhir tidak tertutup CTA
   ========================================================= */

.pd2-notes {
  padding-bottom: 82px !important;
}


/* =========================================================
   WHATSAPP CTA PREMIUM
   ========================================================= */

.pd2-chat {
  position: sticky !important;

  bottom:
    max(
      8px,
      env(safe-area-inset-bottom)
    ) !important;

  z-index: 50 !important;

  width: 100% !important;

  min-height: 54px !important;

  margin-top: 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 10px !important;

  border:
    1px solid rgba(255,255,255,.16) !important;

  border-radius: 15px !important;

  background:
    linear-gradient(
      135deg,
      rgba(23,214,103,.96) 0%,
      rgba(10,195,88,.96) 55%,
      rgba(5,171,75,.96) 100%
    ) !important;

  backdrop-filter:
    blur(10px) !important;

  -webkit-backdrop-filter:
    blur(10px) !important;

  color: #ffffff !important;

  font-size: 11px !important;
  font-weight: 950 !important;

  letter-spacing: .2px !important;

  text-decoration: none !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.42),
    0 0 0 1px rgba(38,255,128,.08),
    0 0 18px rgba(20,211,99,.22)
    !important;

  transform: translateZ(0);

  transition:
    transform .16s ease,
    box-shadow .2s ease,
    filter .2s ease !important;

  animation:
    pd2WaSoftPulse 3.4s ease-in-out infinite !important;
}


/* ICON WA */

.pd2-chat .pd2-wa {
  width: 32px !important;
  height: 32px !important;

  flex: 0 0 32px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin-right: 2px !important;

  border:
    1px solid rgba(255,255,255,.45) !important;

  border-radius: 50% !important;

  background:
    rgba(255,255,255,.08) !important;

  color: #ffffff !important;

  font-size: 7px !important;
  font-weight: 950 !important;
}


/* HOVER DESKTOP */

.pd2-chat:hover {
  transform:
    translateY(-2px)
    scale(1.01) !important;

  filter:
    brightness(1.05) !important;

  box-shadow:
    0 13px 32px rgba(0,0,0,.46),
    0 0 26px rgba(20,211,99,.34)
    !important;
}


/* TAP HP */

.pd2-chat:active {
  transform:
    scale(.97) !important;

  animation: none !important;

  box-shadow:
    0 6px 18px rgba(0,0,0,.38),
    0 0 12px rgba(20,211,99,.24)
    !important;
}


/* PULSE HALUS - BUKAN KEDIP */

@keyframes pd2WaSoftPulse {

  0%,
  100% {
    box-shadow:
      0 10px 28px rgba(0,0,0,.42),
      0 0 0 1px rgba(38,255,128,.08),
      0 0 15px rgba(20,211,99,.18);
  }

  50% {
    box-shadow:
      0 10px 28px rgba(0,0,0,.42),
      0 0 0 4px rgba(38,255,128,.07),
      0 0 25px rgba(20,211,99,.34);
  }
}


/* MOBILE */

@media (max-width: 620px) {

  .pd2-notes {
    padding-bottom: 78px !important;
  }

  .pd2-chat {
    min-height: 52px !important;

    border-radius: 14px !important;

    font-size: 10.5px !important;
  }

  .pd2-chat .pd2-wa {
    width: 30px !important;
    height: 30px !important;

    flex-basis: 30px !important;
  }

}


/* ACCESSIBILITY:
   kalau user memilih reduced motion,
   animasi otomatis mati
*/

@media (prefers-reduced-motion: reduce) {

  .pd2-chat {
    animation: none !important;
  }

}

/* === WHATSAPP CTA PREMIUM END === */



/* === WA GLASS FINAL START === */

.pd2-chat {

  /* 86%: masih jelas tapi background sedikit terlihat */
  background:
    linear-gradient(
      135deg,
      rgba(24, 215, 104, .86) 0%,
      rgba(12, 197, 89, .86) 55%,
      rgba(6, 169, 76, .86) 100%
    ) !important;

  border:
    1px solid rgba(255,255,255,.20) !important;

  backdrop-filter:
    blur(14px)
    saturate(1.18) !important;

  -webkit-backdrop-filter:
    blur(14px)
    saturate(1.18) !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.38),
    0 0 0 1px rgba(48,255,139,.08),
    0 0 18px rgba(20,211,99,.22)
    !important;

  overflow: visible !important;

  animation:
    pd2WaPremiumGlow
    3.6s
    ease-in-out
    infinite !important;
}


/* =========================
   WHATSAPP ICON
   ========================= */

.pd2-chat .pd2-wa {

  width: 34px !important;
  height: 34px !important;

  flex: 0 0 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 2px 0 0 !important;

  padding: 0 !important;

  border:
    1px solid rgba(255,255,255,.38) !important;

  border-radius: 50% !important;

  background:
    rgba(255,255,255,.10) !important;

  color: #ffffff !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.06) !important;
}


.pd2-chat .pd2-wa svg {

  display: block !important;

  width: 24px !important;
  height: 24px !important;

  overflow: visible !important;
}


/* bubble outline */

.pd2-chat .pd2-wa-bubble {

  fill: none !important;

  stroke: currentColor !important;

  stroke-width: 1.8 !important;

  stroke-linejoin: round !important;
}


/* phone */

.pd2-chat .pd2-wa-phone {

  fill: currentColor !important;

  stroke: none !important;
}


/* =========================
   PULSE / GLOW HALUS
   ========================= */

@keyframes pd2WaPremiumGlow {

  0%,
  100% {

    box-shadow:
      0 10px 28px rgba(0,0,0,.38),
      0 0 0 1px rgba(48,255,139,.08),
      0 0 15px rgba(20,211,99,.18);

  }

  50% {

    box-shadow:
      0 10px 28px rgba(0,0,0,.38),
      0 0 0 3px rgba(48,255,139,.07),
      0 0 25px rgba(20,211,99,.32);

  }

}


/* TAP */

.pd2-chat:active {

  transform:
    scale(.97) !important;

  filter:
    brightness(1.05) !important;

  animation:
    none !important;
}


/* MOBILE */

@media (max-width: 620px) {

  .pd2-chat .pd2-wa {

    width: 32px !important;
    height: 32px !important;

    flex-basis: 32px !important;
  }


  .pd2-chat .pd2-wa svg {

    width: 22px !important;
    height: 22px !important;
  }

}


/* user yang mematikan animasi */

@media (prefers-reduced-motion: reduce) {

  .pd2-chat {

    animation:
      none !important;
  }

}

/* === WA GLASS FINAL END === */

/* =========================================================
   FOTO UNIT FINAL
   - Hilangkan simbol ?
   - Ikon kamera CSS
   - Foto auto zoom/fill
   ========================================================= */


/* FOTO AUTO FILL */

.pd2-hero-image {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  background: #090b0d !important;
}


/* sembunyikan simbol lama */

.pd2-photo-badge > span {
  display: none !important;
}


/* badge */

.pd2-photo-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 7px !important;
}


/* kamera kecil - dibuat CSS supaya pasti terbaca */

.pd2-photo-badge::before {
  content: "" !important;

  position: relative !important;

  display: inline-block !important;

  width: 14px !important;
  height: 10px !important;

  flex: 0 0 14px !important;

  border:
    1.7px solid #ff7a1a !important;

  border-radius: 2px !important;

  box-sizing: border-box !important;

  background:
    radial-gradient(
      circle at center,
      transparent 0 2px,
      #ff7a1a 2.2px 3.2px,
      transparent 3.4px
    ) !important;
}


/* mobile */

@media (max-width: 620px) {

  .pd2-photo-badge::before {
    width: 13px !important;
    height: 10px !important;

    flex-basis: 13px !important;
  }

}


/* =========================================================
   CATATAN TOKO COMPACT FINAL
   ========================================================= */

.pd2-notes {
  padding:
    14px 16px 16px !important;

  min-height: 0 !important;
  height: auto !important;

  margin-bottom: 12px !important;
}


/* rapatkan bullet sedikit */

.pd2-simple-note-list li {
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
}

.pd2-simple-note-list li:last-child {
  margin-bottom: 0 !important;
}


/* tombol berdiri sendiri, jangan menempel di dalam box */

.pd2-chat {
  margin-top: 10px !important;
}


/* mobile */

@media (max-width: 620px) {

  .pd2-notes {
    padding:
      13px 14px 15px !important;

    margin-bottom: 10px !important;
  }

  .pd2-simple-note-list li {
    margin-bottom: 5px !important;
  }

}


/* =========================================================
   CATATAN TOKO COMPACT FINAL
   ========================================================= */

.pd2-notes {
  padding:
    14px 16px 16px !important;

  min-height: 0 !important;
  height: auto !important;

  margin-bottom: 12px !important;
}


/* rapatkan bullet sedikit */

.pd2-simple-note-list li {
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
}

.pd2-simple-note-list li:last-child {
  margin-bottom: 0 !important;
}


/* tombol berdiri sendiri, jangan menempel di dalam box */

.pd2-chat {
  margin-top: 10px !important;
}


/* mobile */

@media (max-width: 620px) {

  .pd2-notes {
    padding:
      13px 14px 15px !important;

    margin-bottom: 10px !important;
  }

  .pd2-simple-note-list li {
    margin-bottom: 5px !important;
  }

}

