@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ============================================================
   MS Product Details v3 — premium minimalist, green accent
   ============================================================ */
:root {
  --pd-accent: #16a34a;
  --pd-accent-dark: #15803d;
  --pd-accent-soft: #f0fdf4;
  --pd-accent-ring: rgba(22, 163, 74, .22);
  --pd-bg: #f7f8f7;
  --pd-card: #ffffff;
  --pd-text: #344054;
  --pd-muted: #667085;
  --pd-faint: #98a2b3;
  --pd-border: #e7eaee;
  --pd-star: #f59e0b;
  --pd-radius: 18px;
  --pd-radius-sm: 12px;
  --pd-shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --pd-shadow: 0 4px 20px rgba(16,24,40,.06);
}

.ms-pd { background: var(--pd-bg); color: var(--pd-text); padding: 0 0 calc(92px + env(safe-area-inset-bottom)); }
.ms-pd__inner { max-width: 1180px; margin: 0 auto; padding: 16px 16px 0; }

/* ---------- Layout ---------- */
@media (min-width: 992px) {
  .ms-pd { padding: 32px 0 64px; }
  .ms-pd__inner { padding: 0 24px; }
  .ms-pd__top {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px;
    align-items: start;
  }
  .ms-pd__gallery-col { position: sticky; top: 96px; }
}

/* ---------- Gallery ---------- */
.ms-pd__stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--pd-radius); overflow: hidden;
  background: #eef1f0; border: 1px solid var(--pd-border);
  box-shadow: var(--pd-shadow);
}
.ms-pd__slide { display: none; position: absolute; inset: 0; }
.ms-pd__slide.is-active { display: block; }
.ms-pd__slide img, .ms-pd__slide video, .ms-pd__slide iframe {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #f4f6f5;
}
.ms-pd__zoom-badge {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--pd-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; box-shadow: var(--pd-shadow-sm); pointer-events: none;
}
.ms-pd__navbtn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--pd-border);
  background: rgba(255,255,255,.95); color: var(--pd-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; box-shadow: var(--pd-shadow-sm);
  transition: background .15s ease, transform .15s ease;
}
.ms-pd__navbtn:hover { background: #fff; transform: translateY(-50%) scale(1.04); }
.ms-pd__navbtn--prev { left: 14px; }
.ms-pd__navbtn--next { right: 14px; }
.ms-pd__thumbs {
  display: flex; gap: 10px; overflow-x: auto; padding: 12px 2px 4px;
  scrollbar-width: none;
}
.ms-pd__thumbs::-webkit-scrollbar { display: none; }
.ms-pd__thumb {
  flex: 0 0 76px; width: 76px; height: 76px; border-radius: var(--pd-radius-sm);
  overflow: hidden; cursor: pointer; position: relative;
  border: 2px solid transparent; background: #f0f2f1;
  transition: border-color .15s ease, opacity .15s ease; opacity: .75;
}
.ms-pd__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-pd__thumb.is-active { border-color: var(--pd-accent); opacity: 1; }
.ms-pd__thumb .ms-pd__thumb-type {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(16,24,40,.35); color: #fff; font-size: 14px;
}
.ms-pd__counter {
  position: absolute; left: 14px; bottom: 14px; z-index: 5;
  background: rgba(16,24,40,.55); color: #fff; border-radius: 999px;
  font-size: 12px; font-weight: 600; padding: 4px 12px; letter-spacing: .02em;
}

/* ---------- Info column ---------- */
.ms-pd__info { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.ms-pd__cat {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  color: var(--pd-accent-dark); background: var(--pd-accent-soft);
  border: 1px solid rgba(22,163,74,.18);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  padding: 6px 14px; border-radius: 999px; margin: 0 0 14px;
  text-decoration: none;
}
.ms-pd__cat:hover { background: rgba(22,163,74,.12); }
.ms-pd__title {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
  font-weight: 700; line-height: 1.32; letter-spacing: -.011em;
  color: #344054; margin: 0 0 12px; overflow-wrap: anywhere;
}
/* Beat custom.css body:not(.dark) h1 { color:#0f172a !important } */
body:not(.dark) h1.ms-pd__title, body.dark h1.ms-pd__title,
body:not(.dark) .ms-pd__title, body.dark .ms-pd__title {
  color: #344054 !important;
}
.ms-pd__meta-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  margin: 0 0 18px;
}
.ms-pd__stars { display: inline-flex; align-items: center; gap: 2px; color: var(--pd-star); font-size: 15px; }
.ms-pd__stars .far { color: #d5dbe1; }
.ms-pd__rating-num { font-size: 14px; font-weight: 800; color: var(--pd-text); margin-left: 4px; }
.ms-pd__dot-sep { color: #d0d5dd; font-size: 12px; }
.ms-pd__meta-text { font-size: 13.5px; color: var(--pd-muted); }
.ms-pd__meta-text strong { color: var(--pd-text); font-weight: 700; }

.ms-pd__price-box {
  background: var(--pd-card); border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius); box-shadow: var(--pd-shadow-sm);
  padding: 18px 20px; display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 12px; margin: 0 0 16px;
}
.ms-pd__price {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--pd-accent); line-height: 1.1;
}
.ms-pd__price-old { font-size: 1rem; color: var(--pd-faint); text-decoration: line-through; font-weight: 500; }
.ms-pd__price-badge {
  display: inline-flex; align-items: center;
  background: #fef3f2; color: #d92d20;
  font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
}
.ms-pd__price-note { flex: 0 0 100%; font-size: 12.5px; color: var(--pd-muted); display: inline-flex; align-items: center; gap: 6px; }
.ms-pd__price-note i { color: var(--pd-accent); }

.ms-pd__features { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.ms-pd__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #344054; line-height: 1.45; }
.ms-pd__features li i {
  color: var(--pd-accent); font-size: 15px; margin-top: 2px; flex: 0 0 auto;
}

/* Variants */
.ms-pd__variants { margin: 0 0 18px; }
.ms-pd__variants-label { font-size: 13px; font-weight: 700; color: var(--pd-text); margin: 0 0 8px; }
.ms-pd__variants-label span { color: var(--pd-muted); font-weight: 500; }
.ms-pd__variant-select {
  width: 100%; padding: 13px 44px 13px 16px; font-size: 14.5px; font-weight: 600;
  color: var(--pd-text); background: var(--pd-card);
  border: 1.5px solid var(--pd-border); border-radius: var(--pd-radius-sm);
  outline: none; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23667085' d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ms-pd__variant-select:hover { border-color: #cfd6dd; }
.ms-pd__variant-select:focus { border-color: var(--pd-accent); box-shadow: 0 0 0 4px var(--pd-accent-ring); }

/* Stock + CTA */
.ms-pd__stock {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; margin: 0 0 14px;
}
.ms-pd__stock-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ms-pd__stock--in { color: var(--pd-accent-dark); }
.ms-pd__stock--in .ms-pd__stock-dot { background: var(--pd-accent); box-shadow: 0 0 0 4px var(--pd-accent-soft); }
.ms-pd__stock--out { color: #b42318; }
.ms-pd__stock--out .ms-pd__stock-dot { background: #d92d20; box-shadow: 0 0 0 4px #fef3f2; }

.ms-pd__cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 10px; }
.ms-pd__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 54px; border-radius: 999px; font-size: 15.5px; font-weight: 700;
  cursor: pointer; text-decoration: none; border: 0;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.ms-pd__btn:active { transform: scale(.985); }
.ms-pd__btn--buy {
  background: var(--pd-accent); color: #fff;
  box-shadow: 0 8px 18px -6px rgba(22,163,74,.55);
}
.ms-pd__btn--buy:hover { background: var(--pd-accent-dark); color: #fff; transform: translateY(-1px); }
.ms-pd__btn--cart {
  background: var(--pd-card); color: var(--pd-accent-dark);
  border: 1.5px solid rgba(22,163,74,.45);
}
.ms-pd__btn--cart:hover { border-color: var(--pd-accent); background: var(--pd-accent-soft); }
.ms-pd__btn--cart.is-added { border-color: var(--pd-accent); background: var(--pd-accent-soft); }

.ms-pd__minor-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.ms-pd__minor-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--pd-border);
  font-size: 13px; font-weight: 700; color: #475467; text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ms-pd__minor-btn:hover { color: var(--pd-accent-dark); border-color: rgba(22,163,74,.5); background: var(--pd-accent-soft); }
.ms-pd__minor-btn.is-wished { color: #d92d20; border-color: #fda29b; background: #fff1f0; }

/* Trust row */
.ms-pd__trust {
  display: flex; flex-wrap: wrap; gap: 9px 16px; padding: 14px 0 2px;
  border-top: 1px solid var(--pd-border);
}
.ms-pd__trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pd-muted); font-weight: 600; line-height: 1.3; }
.ms-pd__trust-item i { color: var(--pd-accent); font-size: 13px; }

/* ---------- Bottom sections ---------- */
.ms-pd__below { margin-top: 28px; display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 992px) { .ms-pd__below { margin-top: 36px; } }

.ms-pd__card {
  background: var(--pd-card); border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius); box-shadow: var(--pd-shadow-sm); overflow: hidden;
}
.ms-pd__tabbar {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--pd-border); padding: 6px 10px 0;
  background: #fbfcfb;
}
.ms-pd__tabbar::-webkit-scrollbar { display: none; }
.ms-pd__tab {
  border: 0; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--pd-muted);
  padding: 13px 18px 12px; white-space: nowrap; position: relative;
  transition: color .15s ease;
}
.ms-pd__tab i { margin-right: 7px; font-size: 13px; }
.ms-pd__tab:hover { color: var(--pd-text); }
.ms-pd__tab.is-active { color: var(--pd-accent-dark); }
.ms-pd__tab.is-active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2.5px; border-radius: 999px; background: var(--pd-accent);
}
.ms-pd__tabpanel { display: none; padding: 22px; }
.ms-pd__panel-h2 { font-size: 1.02rem; font-weight: 700; margin: 0 0 14px; color: var(--pd-text, #344054); letter-spacing: -.01em; }
.ms-pd__tabpanel.is-active { display: block; animation: pdFade .25s ease; }
@keyframes pdFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Specs grid */
.ms-pd__specs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 28px; margin: 0 0 4px; }
@media (max-width: 575px) { .ms-pd__specs { grid-template-columns: 1fr; } }
.ms-pd__spec { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; border-bottom: 1px dashed #eceff2; }
.ms-pd__spec dt { font-size: 12px; font-weight: 600; color: var(--pd-faint); letter-spacing: .02em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; }
.ms-pd__spec-ic { display: inline-flex; width: 15px; height: 15px; flex: 0 0 auto; color: var(--pd-accent); }
.ms-pd__spec-ic svg { width: 100%; height: 100%; }
.ms-pd__spec dd { font-size: 14px; font-weight: 600; color: var(--pd-text); margin: 0; overflow-wrap: anywhere; }

/* Description prose */
.ms-pd__prose { font-size: 14.5px; line-height: 1.75; color: #344054; overflow-wrap: anywhere; }
.ms-pd__prose img { max-width: 100%; height: auto; border-radius: 12px; }
.ms-pd__prose h1, .ms-pd__prose h2, .ms-pd__prose h3 { color: var(--pd-text); font-weight: 800; margin: 1.1em 0 .5em; font-size: 1.15em; display: flex; align-items: center; gap: 9px; }
.ms-pd__prose h1::before, .ms-pd__prose h2::before, .ms-pd__prose h3::before {
  content: ""; flex: 0 0 auto; width: 17px; height: 17px;
  background-color: var(--pd-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ms-pd__prose p { margin: 0 0 1em; }
.ms-pd__prose ul, .ms-pd__prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.ms-pd__prose li::marker { color: var(--pd-accent); }
.ms-pd__prose ul { list-style: none; padding-left: 0; }
.ms-pd__prose ul > li { position: relative; padding-left: 26px; }
.ms-pd__prose ul > li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 14px; height: 14px;
  background-color: var(--pd-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.2 2.4 2.4 4.6-4.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.2 2.4 2.4 4.6-4.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ms-pd__prose ol > li::marker { font-weight: 800; color: var(--pd-accent-dark); }
.ms-pd__prose a { color: var(--pd-accent-dark); }
.ms-pd__prose table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.ms-pd__prose td, .ms-pd__prose th { border: 1px solid var(--pd-border); padding: 8px 10px; font-size: 13.5px; }
.ms-pd__prose strong { color: var(--pd-text); font-weight: 800; }
.ms-pd__prose blockquote { margin: 0 0 1em; padding: 10px 14px; border-left: 3px solid var(--pd-accent); background: color-mix(in srgb, var(--pd-accent) 6%, transparent); border-radius: 0 10px 10px 0; }

/* Included list */
.ms-pd__included { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ms-pd__included li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; font-size: 14.5px; color: #344054; border-bottom: 1px dashed #eceff2; }
.ms-pd__included li:last-child { border-bottom: 0; }
.ms-pd__included li i { color: var(--pd-accent); margin-top: 3px; font-size: 14px; }

/* FAQ */
.ms-pd__faq-item { border-bottom: 1px dashed #eceff2; padding: 4px 0 16px; margin-bottom: 16px; }
.ms-pd__faq-item:last-child { margin-bottom: 0; border-bottom: 0; }
.ms-pd__faq-q { font-size: 14.5px; font-weight: 700; color: var(--pd-text); margin-bottom: 7px; display: flex; gap: 9px; }
.ms-pd__faq-q i { color: var(--pd-accent); margin-top: 2px; }
.ms-pd__faq-a { font-size: 14px; color: var(--pd-muted); line-height: 1.7; padding-left: 24px; }

/* ---------- Reviews (minimalist, spaced clear of Product Information) ---------- */
.ms-pd__reviews-section {
  margin-top: 28px;
  padding: 0;
  overflow: visible;
}
.ms-pd__reviews-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 26px 28px 0;
}
.ms-pd__reviews-title {
  margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--pd-text);
}
.ms-pd__reviews-sub {
  margin: 5px 0 0; font-size: 13px; font-weight: 500; color: var(--pd-muted);
}

/* Rating summary: score on the left, slim distribution bars on the right */
.ms-pd__review-summary {
  display: flex; align-items: center; gap: 36px;
  padding: 20px 28px 22px; margin-top: 16px;
  border-top: 1px solid var(--pd-border);
}
.ms-pd__summary-score {
  display: grid; justify-items: center; gap: 5px;
  flex: 0 0 auto; min-width: 104px;
}
.ms-pd__summary-value {
  font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--pd-text);
}
.ms-pd__summary-stars { color: var(--pd-star); font-size: 13px; display: flex; gap: 3px; }
.ms-pd__summary-stars .far { color: #dcdfe3; }
.ms-pd__summary-outof { font-size: 11.5px; font-weight: 600; color: var(--pd-faint); letter-spacing: .01em; }
.ms-pd__summary-bars { display: grid; gap: 9px; flex: 1 1 auto; min-width: 0; }
.ms-pd__summary-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ms-pd__summary-lab { font-size: 12.5px; font-weight: 700; color: var(--pd-muted); flex: 0 0 10px; text-align: right; }
.ms-pd__summary-star { color: var(--pd-star); font-size: 9px; flex: 0 0 auto; opacity: .85; }
.ms-pd__summary-track {
  position: relative; flex: 1 1 auto; min-width: 60px; height: 6px;
  background: #f0f1f3; border-radius: 999px; overflow: hidden;
}
.ms-pd__summary-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: var(--pd-star); opacity: .9;
}
.ms-pd__summary-num {
  font-size: 12.5px; font-weight: 600; color: var(--pd-faint);
  flex: 0 0 34px; text-align: right; font-variant-numeric: tabular-nums;
}

/* Two-column review grid on desktop, single on mobile */
.ms-pd__review-list {
  padding: 0 28px 26px; display: grid; gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--pd-border);
}
.ms-pd__review-list:empty { display: none; }
@media (min-width: 992px) {
  .ms-pd__review-list { grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: start; }
}
/* Minimalist entries: no boxes, just a hairline between each review */
.ms-pd__review-card {
  border: 0; border-bottom: 1px solid var(--pd-border);
  border-radius: 0; padding: 20px 0;
  background: transparent; min-width: 0;
}
.ms-pd__review-card:last-child { border-bottom: 0; padding-bottom: 6px; }
/* Row = avatar | flexible text block | reserved stars column.
   Grid tracks make overlap structurally impossible: the middle cell shrinks
   (minmax(0,1fr)) while the stars keep their own track. */
.ms-pd__review-toprow {
  display: grid; grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center; gap: 12px; margin-bottom: 10px;
}
.ms-pd__review-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: block; overflow: hidden; flex: 0 0 38px;
  line-height: 0;
}
.ms-pd__review-avatar svg { display: block; width: 100%; height: 100%; }
.ms-pd__review-who { min-width: 0; }
.ms-pd__review-name {
  font-weight: 700; font-size: 13.5px; color: var(--pd-text); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-pd__review-date { font-size: 12px; color: var(--pd-faint); line-height: 1.3; }
.ms-pd__review-stars { color: var(--pd-star); font-size: 12px; display: inline-flex; gap: 2px; justify-self: end; }
@media (max-width: 400px) { .ms-pd__review-stars { font-size: 11px; gap: 1px; } }
.ms-pd__review-stars .far { color: #d5dbe1; }
.ms-pd__review-body {
  font-size: 14px; color: #475467; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ms-pd__review-empty { text-align: center; padding: 34px 20px; color: var(--pd-muted); }
.ms-pd__review-empty .ms-pd__review-empty-stars { color: #d5dbe1; font-size: 18px; display: inline-flex; gap: 4px; margin-bottom: 8px; }
.ms-pd__review-pagination { padding: 18px 28px 26px; display: flex; justify-content: center; border-top: 1px solid var(--pd-border); }
/* Minimalist pager: bare numbers, no boxes. Only the current page gets a fill. */
.ms-pager { display: flex; justify-content: center; }
.ms-pager__list {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center;
}
.ms-pager__item { display: flex; }
.ms-pager__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 0; border-radius: 9px; background: transparent;
  font-size: 13.5px; font-weight: 600; color: var(--pd-muted);
  text-decoration: none; font-variant-numeric: tabular-nums;
  transition: color .15s ease, background .15s ease;
}
a.ms-pager__link:hover { background: #f4f5f6; color: var(--pd-text); }
a.ms-pager__link:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--pd-accent-ring); }
.ms-pager__item.is-current .ms-pager__link {
  background: var(--pd-accent); color: #fff; font-weight: 700;
}
.ms-pager__item.is-disabled .ms-pager__link { color: #cdd2d7; cursor: default; }
.ms-pager__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 34px; color: var(--pd-faint); font-size: 13px; }
.ms-pager__item .fa-chevron-left,
.ms-pager__item .fa-chevron-right { font-size: 11px; }
@media (max-width: 575px) {
  .ms-pd__review-pagination { padding: 16px 16px 20px; }
  .ms-pager__list { gap: 0; }
  .ms-pager__link { min-width: 32px; height: 32px; padding: 0 6px; font-size: 13px; }
}

/* Tags */
.ms-pd__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ms-pd__tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px; background: #f6f7f6;
  border: 1px solid var(--pd-border); color: #475467;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ms-pd__tag i { color: var(--pd-accent); font-size: 10px; }
.ms-pd__tag:hover { border-color: rgba(22,163,74,.4); color: var(--pd-accent-dark); background: var(--pd-accent-soft); }

/* Seller */
.ms-pd__seller-head { display: flex; align-items: center; gap: 16px; padding: 22px 24px; }
.ms-pd__seller-avatar, .ms-pd__seller-avatar-ph {
  width: 60px; height: 60px; border-radius: 16px; object-fit: cover; flex: 0 0 auto;
}
.ms-pd__seller-avatar-ph {
  background: linear-gradient(135deg, var(--pd-accent), #4ade80);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px;
}
.ms-pd__seller-name { font-size: 16px; font-weight: 800; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-pd__seller-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--pd-accent-soft); color: var(--pd-accent-dark);
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.ms-pd__seller-bio { font-size: 13.5px; color: var(--pd-muted); margin: 0; }
.ms-pd__seller-link {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--pd-accent-soft); color: var(--pd-accent-dark);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  border: 1px solid rgba(22,163,74,.3);
  transition: background .15s ease, color .15s ease;
}
.ms-pd__seller-link:hover { background: var(--pd-accent); color: #fff; }
.ms-pd__seller-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--pd-border); background: #fbfcfb;
}
.ms-pd__seller-stat { text-align: center; padding: 14px 8px; }
.ms-pd__seller-stat b { display: block; font-size: 18px; font-weight: 800; color: var(--pd-text); }
.ms-pd__seller-stat span { font-size: 12px; color: var(--pd-muted); font-weight: 600; }
@media (max-width: 575px) {
  .ms-pd__seller-head { flex-wrap: wrap; padding: 18px; }
  .ms-pd__seller-link { margin-left: 0; width: 100%; justify-content: center; }
}

/* Load soft-card CSS without visual output; empty-state text is neutralized too */
.ms-pd__softui-css { display: none !important; }
.ms-pd__softui-css .mc-empty { display: none !important; }
.ms-pd__related .mc-grid, .ms-pd__related .mc-empty { display: none; }

/* ---------- Related products (horizontal slider) ---------- */
/* Reviews section above has padding-bottom:0, and this section is a plain
   sibling in .ms-pd__inner (not a .ms-pd__below flex child), so without an
   explicit margin it sat flush against the last review card. */
.ms-pd__related { margin-top: 40px; }
@media (max-width: 767.98px) { .ms-pd__related { margin-top: 30px; } }
.ms-pd__section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 0 0 14px;
}
.ms-pd__related-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.ms-pd__related-title i { color: var(--pd-accent); font-size: 15px; }
.ms-pd__section-head .ms-pd__related-title { margin: 0; }
.ms-pd__section-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--pd-muted); font-weight: 600; }

.ms-pd__slider-navs { display: inline-flex; gap: 8px; }
.ms-pd__slider-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--pd-border);
  background: var(--pd-card); color: var(--pd-text); font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--pd-shadow-sm); transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ms-pd__slider-btn:hover { background: var(--pd-accent); border-color: var(--pd-accent); color: #fff; }
.ms-pd__slider-btn:disabled { opacity: .35; cursor: default; }
.ms-pd__slider-btn:disabled:hover { background: var(--pd-card); color: var(--pd-text); border-color: var(--pd-border); }

.ms-pd__slider { overflow: hidden; margin: 0 -4px; }
.ms-pd__slider-track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-behavior: smooth;
  padding: 4px; margin: 0;
  scrollbar-width: none; scroll-snap-type: x mandatory;
}
.ms-pd__slider-track::-webkit-scrollbar { display: none; }
.ms-pd__slidecard {
  flex: 0 0 260px; width: 260px; min-width: 0;
  scroll-snap-align: start; display: flex;
}
/* The shared .mc-col brings grid gutters; inside a slide it must fill the card */
.ms-pd__slidecard .row.mc-grid { display: block !important; }
.ms-pd__slidecard .mc-col {
  flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
  padding: 0 !important; margin: 0 !important;
}
.ms-pd__slidecard .soft-card { height: 100%; }
/* Media keeps the shared square treatment inside the narrower slide */
.ms-pd__slidecard .soft-card__media {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
@media (max-width: 575px) {
  .ms-pd__slidecard { flex: 0 0 186px; width: 186px; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-pd__slider-track { scroll-behavior: auto; }
}

/* ---------- Sticky mobile bar ---------- */
.ms-pd__stickybar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--pd-border);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 -6px 24px rgba(16,24,40,.08);
}
.ms-pd__sticky-price { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--pd-accent); white-space: nowrap; line-height: 1.1; }
.ms-pd__sticky-sub { font-size: 11px; color: var(--pd-muted); font-weight: 600; }
.ms-pd__sticky-btn {
  margin-left: auto; flex: 1; max-width: 260px; height: 48px; border-radius: 999px; border: 0;
  background: var(--pd-accent); color: #fff; font-weight: 700; font-size: 14.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  box-shadow: 0 8px 18px -6px rgba(22,163,74,.55);
}
.ms-pd__sticky-btn:active { transform: scale(.98); }
@media (min-width: 992px) { .ms-pd__stickybar { display: none; } }

/* ---------- Share modal ---------- */
.pd-share-modal {
  display: none; position: fixed; inset: 0; z-index: 210;
  background: rgba(16,24,40,.55); align-items: center; justify-content: center; padding: 20px;
}
.pd-share-modal.is-open { display: flex; }
.pd-share-box {
  background: #fff; border-radius: 20px; padding: 26px 24px 22px;
  max-width: 380px; width: 100%; position: relative; box-shadow: var(--pd-shadow);
}
.pd-share-title { font-size: 16px; font-weight: 800; margin: 0 0 18px; color: var(--pd-text); }
.pd-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pd-share-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-decoration: none; color: #475467; font-size: 11.5px; font-weight: 600;
  border: 0; background: none; cursor: pointer; padding: 0;
}
.pd-share-ico {
  width: 46px; height: 46px; border-radius: 14px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.pd-share-x {
  position: absolute; top: 14px; right: 14px; border: 0; background: #f4f5f6;
  width: 32px; height: 32px; border-radius: 50%; color: var(--pd-muted);
  font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Small screens ---------- */
@media (max-width: 991px) {
  .ms-pd__inner { padding: 12px 14px 0; }
  .ms-pd__gallery-col { margin-bottom: 20px; }
  .ms-pd__cta-row { gap: 10px; }
  .ms-pd__below { gap: 16px; }
}
@media (max-width: 575px) {
  .ms-pd__price { font-size: 1.6rem; }
  .ms-pd__price-box { padding: 15px 16px; }
  .ms-pd__cta-row { grid-template-columns: 1fr; }
  .ms-pd__minor-row { gap: 10px; }
  .ms-pd__thumb { flex: 0 0 64px; width: 64px; height: 64px; }
  .ms-pd__tabpanel { padding: 16px; }
  .ms-pd__reviews-section { margin-top: 22px; }
  .ms-pd__reviews-head { padding: 20px 16px 0; }
  .ms-pd__review-summary {
    flex-direction: column; align-items: stretch; gap: 18px;
    padding: 18px 16px 20px;
  }
  .ms-pd__summary-score { min-width: 0; justify-items: start; }
  .ms-pd__summary-value { font-size: 38px; }
  .ms-pd__review-list { padding: 0 16px 20px; }
  .ms-pd__review-card { padding: 16px 0; }
  .ms-pd__review-pagination { padding: 0 16px 20px; }
  .ms-pd__tab { padding: 12px 13px; font-size: 13px; }
  .ms-pd__navbtn { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-pd__btn, .ms-pd__navbtn, .ms-pd__thumb, .ms-pd__tab, .ms-pd__minor-btn, .ms-pd__sticky-btn { transition: none; }
  .ms-pd__tabpanel.is-active { animation: none; }
}
/* Gradient initial avatars (RandomAvatarService) — subtle ring so the
   vivid disc sits well on plain card backgrounds */
.ms-pd__review-avatar--gradient {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.ms-pd__review-avatar--gradient svg text {
  font-weight: 800;
}

/* ═══ Desktop polish (2026-10-22): kedalaman kad + CTA premium ═══ */
@media (min-width:992px){
  .ms-pd__price-box{transition:box-shadow .3s ease,border-color .3s ease}
  .ms-pd__price-box:hover{box-shadow:0 18px 40px -20px rgba(33,204,135,.25);border-color:rgba(33,204,135,.3)}
  .ms-pd__cta-row .btn{min-height:48px;font-weight:800;transition:transform .25s cubic-bezier(.175,.885,.32,1.275),box-shadow .25s ease}
  .ms-pd__cta-row .btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(33,204,135,.5)}
  .ms-pd__slidecard{transition:transform .3s ease,box-shadow .3s ease}
  .ms-pd__slidecard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(16,24,40,.16)}
}