/*
 * Bandung COD product detail v4
 * Loaded after the legacy page rules so the marketplace composition remains
 * isolated while all existing PHP actions and API hooks stay unchanged.
 */
:root {
  --pd-navy: #062b5f;
  --pd-blue: #0b63ce;
  --pd-blue-soft: #edf5ff;
  --pd-orange: #f26a1b;
  --pd-orange-dark: #d9520a;
  --pd-orange-soft: #fff4ec;
  --pd-success: #0b8f5b;
  --pd-success-soft: #eaf9f2;
  --pd-ink: #132238;
  --pd-muted: #66768a;
  --pd-line: #dce5ef;
  --pd-surface: #ffffff;
  --pd-canvas: #f3f7fb;
  --pd-shadow: 0 14px 38px rgba(6, 43, 95, .07);
}

.product-page {
  color: var(--pd-ink);
  background:
    radial-gradient(circle at 92% 3%, rgba(11, 99, 206, .08), transparent 25rem),
    var(--pd-canvas);
}

.product-page :where(button, a, input, textarea) {
  -webkit-tap-highlight-color: transparent;
}

.product-detail-content {
  position: relative;
}

.detail-header .icon-button {
  color: var(--pd-navy);
}

.detail-report-button,
.detail-manage-button {
  position: relative;
  font-size: 0 !important;
}

.detail-report-button > span,
.detail-manage-button > span {
  width: 20px;
  height: 20px;
  display: block;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.detail-report-button > span {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h11.2l.5 1.5L21 6.8V17H8v4H5V3Zm3 3v8h10V8.7L14.3 6H8Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h11.2l.5 1.5L21 6.8V17H8v4H5V3Zm3 3v8h10V8.7L14.3 6H8Z'/%3E%3C/svg%3E");
}

.detail-manage-button > span {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14.7 5.3 4 4-9.9 9.9-4.8.8.8-4.8 9.9-9.9Zm0 2.8-8 8-.2 1.4 1.4-.2 8-8-1.2-1.2ZM16.1 4l1.2-1.2a2 2 0 0 1 2.8 0l1.1 1.1a2 2 0 0 1 0 2.8L20 7.9 16.1 4Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14.7 5.3 4 4-9.9 9.9-4.8.8.8-4.8 9.9-9.9Zm0 2.8-8 8-.2 1.4 1.4-.2 8-8-1.2-1.2ZM16.1 4l1.2-1.2a2 2 0 0 1 2.8 0l1.1 1.1a2 2 0 0 1 0 2.8L20 7.9 16.1 4Z'/%3E%3C/svg%3E");
}

.product-summary-pills {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.product-category-pill {
  min-height: 29px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #c8dcf6;
  border-radius: 999px;
  background: var(--pd-blue-soft);
  color: #0b55a8;
  font-size: 11px;
  font-weight: 550;
}

.product-market-badges {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 17px;
}

.product-market-badge {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--pd-line);
  border-radius: 9px;
  background: #f8fafc;
  color: #53657a;
  font-size: 10.5px;
  font-weight: 450;
  white-space: nowrap;
}

.product-market-badge b {
  color: #314760;
  font-weight: 650;
}

.product-market-badge i {
  width: 15px;
  height: 15px;
  display: block;
  background: #66809d;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.product-market-badge.is-views i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c5.5 0 9 5.1 9 7s-3.5 7-9 7-9-5.1-9-7 3.5-7 9-7Zm0 2C7.9 7 5.1 10.5 5 12c.1 1.5 2.9 5 7 5s6.9-3.5 7-5c-.1-1.5-2.9-5-7-5Zm0 2.5A2.5 2.5 0 1 1 12 14a2.5 2.5 0 0 1 0-4.5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c5.5 0 9 5.1 9 7s-3.5 7-9 7-9-5.1-9-7 3.5-7 9-7Zm0 2C7.9 7 5.1 10.5 5 12c.1 1.5 2.9 5 7 5s6.9-3.5 7-5c-.1-1.5-2.9-5-7-5Zm0 2.5A2.5 2.5 0 1 1 12 14a2.5 2.5 0 0 1 0-4.5Z'/%3E%3C/svg%3E");
}

.product-market-badge.is-stock i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 9 4.5v11L12 22l-9-4.5v-11L12 2Zm0 2.2L6.1 7.1 12 10l5.9-2.9L12 4.2ZM5 8.7v7.6l6 3v-7.6l-6-3Zm8 10.6 6-3V8.7l-6 3v7.6Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 9 4.5v11L12 22l-9-4.5v-11L12 2Zm0 2.2L6.1 7.1 12 10l5.9-2.9L12 4.2ZM5 8.7v7.6l6 3v-7.6l-6-3Zm8 10.6 6-3V8.7l-6 3v7.6Z'/%3E%3C/svg%3E");
}

.product-market-badge.is-booked {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #a9470b;
}

.product-market-badge.is-booked i {
  background: var(--pd-orange);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v2h2v16H5V5h2V3Zm2 2h6V3H9v2ZM7 7v12h10V7H7Zm2 3h6v2H9v-2Zm0 4h4v2H9v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v2h2v16H5V5h2V3Zm2 2h6V3H9v2ZM7 7v12h10V7H7Zm2 3h6v2H9v-2Zm0 4h4v2H9v-2Z'/%3E%3C/svg%3E");
}

.product-market-badge.is-promo {
  border-color: #fed7aa;
  background: var(--pd-orange-soft);
  color: #b54a0a;
}

.product-market-badge.is-promo i {
  background: var(--pd-orange);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 12 9-9h7l2 2v7l-9 9-9-9Zm9-6.2L5.8 12l6.2 6.2 6-6V6h-6Zm3.5 1.7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 12 9-9h7l2 2v7l-9 9-9-9Zm9-6.2L5.8 12l6.2 6.2 6-6V6h-6Zm3.5 1.7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E");
}

.shop-main {
  grid-template-columns: 58px minmax(0, 1fr) !important;
}

.shop-identity {
  min-width: 0;
}

.shop-title-row {
  flex-wrap: wrap;
}

.shop-pro-badge {
  height: 19px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--pd-navy), var(--pd-blue));
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .05em;
}

.shop-tagline {
  color: #607086 !important;
  white-space: normal !important;
}

.shop-location {
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin-top: 5px !important;
}

.shop-location i {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: var(--pd-orange);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a8 8 0 0 1 8 8c0 5.5-8 12-8 12S4 15.5 4 10a8 8 0 0 1 8-8Zm0 2a6 6 0 0 0-6 6c0 3.5 4.1 7.8 6 9.5 1.9-1.7 6-6 6-9.5a6 6 0 0 0-6-6Zm0 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a8 8 0 0 1 8 8c0 5.5-8 12-8 12S4 15.5 4 10a8 8 0 0 1 8-8Zm0 2a6 6 0 0 0-6 6c0 3.5 4.1 7.8 6 9.5 1.9-1.7 6-6 6-9.5a6 6 0 0 0-6-6Zm0 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.shop-stats div {
  position: relative;
}

.shop-stats strong {
  font-variant-numeric: tabular-nums;
}

.shop-view-link {
  width: 100% !important;
  min-height: 43px !important;
  margin-top: 13px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #b9cde5 !important;
  border-radius: 12px !important;
  background: #f8fbff !important;
  color: var(--pd-navy) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.shop-view-link > span {
  width: 18px;
  height: 18px;
  background: var(--pd-blue);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14l2 5v2a3 3 0 0 1-2 2.8V20H5v-6.2A3 3 0 0 1 3 11V9l2-5Zm1.4 2-.8 3h12.8l-.8-3H6.4ZM5 11a1 1 0 0 0 2 0H5Zm4 0a1 1 0 0 0 2 0H9Zm4 0a1 1 0 0 0 2 0h-2Zm4 0a1 1 0 0 0 2 0h-2ZM7 14v4h10v-4a3 3 0 0 1-3-1 3 3 0 0 1-4 0 3 3 0 0 1-3 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14l2 5v2a3 3 0 0 1-2 2.8V20H5v-6.2A3 3 0 0 1 3 11V9l2-5Zm1.4 2-.8 3h12.8l-.8-3H6.4ZM5 11a1 1 0 0 0 2 0H5Zm4 0a1 1 0 0 0 2 0H9Zm4 0a1 1 0 0 0 2 0h-2Zm4 0a1 1 0 0 0 2 0h-2ZM7 14v4h10v-4a3 3 0 0 1-3-1 3 3 0 0 1-4 0 3 3 0 0 1-3 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.shop-view-link > i {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.detail-actions .nego-button {
  gap: 8px;
  border: 1px solid #a9c5e7 !important;
  background: #f7fbff;
  color: var(--pd-navy);
}

.detail-actions .green {
  background: linear-gradient(135deg, var(--pd-orange), #ef7d25) !important;
  color: #fff;
  box-shadow: 0 10px 22px rgba(242, 106, 27, .2);
}

.detail-actions .green:hover {
  background: linear-gradient(135deg, var(--pd-orange-dark), var(--pd-orange)) !important;
}

.detail-actions.without-cod {
  grid-template-columns: 1fr !important;
}

.detail-booked-state {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  background: #fff8f1;
}

.detail-booked-state > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #ffedd5;
}

.detail-booked-state > span::before {
  content: "";
  width: 21px;
  height: 21px;
  background: var(--pd-orange);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v2h2v16H5V5h2V3Zm2 2h6V3H9v2ZM7 7v12h10V7H7Zm5 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm-1 2v3h3v-1h-2v-2h-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v2h2v16H5V5h2V3Zm2 2h6V3H9v2ZM7 7v12h10V7H7Zm5 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm-1 2v3h3v-1h-2v-2h-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.detail-booked-state b,
.detail-booked-state small {
  display: block;
}

.detail-booked-state b {
  color: #8b3d0c;
  font-size: 12.5px;
  font-weight: 650;
}

.detail-booked-state small {
  margin-top: 3px;
  color: #9a5a31;
  font-size: 10.5px;
  line-height: 1.4;
  font-weight: 400;
}

.detail-actions .stock-action {
  border-color: #dce5ef !important;
  background: #eef2f6 !important;
  color: #607086 !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

.product-detail-facts {
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)) !important;
}

.product-detail-facts div:last-child {
  border-right: 0;
}

.description-card > p {
  white-space: pre-line;
}

.product-safety-note {
  border-color: #d9e5f2;
  background: #f5f9ff;
  color: #16385f;
}

.product-safety-note::before {
  background: var(--pd-blue);
}

.product-safety-note > span {
  border-color: #c9dcf2;
  background: #e8f2ff;
}

.product-safety-note > span::before {
  background-color: var(--pd-blue);
}

.product-safety-note > a {
  color: var(--pd-blue);
}

.product-safety-copy strong {
  color: #153a66;
}

.product-safety-note .product-safety-copy p {
  color: #5a6f88;
}

.service-icon {
  background: var(--pd-blue-soft) !important;
  color: var(--pd-blue) !important;
}

.service-item em {
  border-color: #bce5d3 !important;
  background: var(--pd-success-soft) !important;
  color: var(--pd-success) !important;
}

.hero-dots button.active,
.product-gallery-thumbs button.active {
  border-color: var(--pd-orange) !important;
  background-color: var(--pd-orange);
  box-shadow: 0 0 0 3px #ffeadc !important;
}

.price-main {
  color: var(--pd-orange) !important;
}

.promo-strip b {
  border-color: #c8dcf6 !important;
  background: var(--pd-blue-soft) !important;
  color: #0a58ad !important;
}

.promo-strip span::before {
  background: var(--pd-success) !important;
  box-shadow: 0 0 0 4px var(--pd-success-soft) !important;
}

@media (min-width: 900px) {
  .app-shell.product-page {
    background:
      radial-gradient(circle at 92% 3%, rgba(11, 99, 206, .08), transparent 25rem),
      var(--pd-canvas);
  }

  .product-detail-content {
    width: min(calc(100% - 56px), 1280px);
    padding: 30px 0 72px;
  }

  .detail-header {
    min-height: 46px;
    padding-bottom: 18px;
  }

  .detail-header h1 {
    color: var(--pd-navy);
    font-size: 20px;
    font-weight: 650;
  }

  .detail-header .icon-button:last-child {
    margin-left: auto;
  }

  .product-primary {
    grid-template-columns: minmax(0, 1.32fr) minmax(430px, .68fr);
    gap: 24px;
  }

  .product-gallery-column,
  .product-summary-column,
  .product-lower > section {
    border: 1px solid var(--pd-line);
    border-radius: 18px;
    box-shadow: var(--pd-shadow);
  }

  .product-gallery-column {
    padding: 18px;
  }

  .product-hero,
  .product-hero-slider,
  .detail-photo {
    border-radius: 13px;
    background:
      linear-gradient(135deg, rgba(11, 99, 206, .025), rgba(242, 106, 27, .025)),
      #f6f8fb;
  }

  .product-hero-slide,
  .detail-photo {
    aspect-ratio: 1.18 / 1;
  }

  .detail-photo img {
    padding: 10px;
    object-fit: contain;
    background: transparent;
  }

  .product-gallery-thumbs button {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
    border-radius: 11px;
  }

  .product-gallery-thumbs button.active {
    border: 2px solid var(--pd-orange) !important;
  }

  .product-summary-column {
    top: 18px;
    border-radius: 18px;
  }

  .promo-strip {
    padding: 13px 23px;
    border-bottom: 1px solid #e3eaf2;
    background: linear-gradient(90deg, #f8fbff, #fffaf6);
    color: #415870;
    font-weight: 500;
  }

  .detail-section {
    padding: 23px;
  }

  .product-condition-pill {
    border-color: #c7e7d8;
    background: var(--pd-success-soft);
    color: #08784e;
    font-weight: 550;
  }

  .detail-title {
    margin: 16px 0 10px;
    color: var(--pd-ink);
    font-size: clamp(23px, 1.6vw, 28px);
    line-height: 1.32;
    font-weight: 620;
  }

  .price-main {
    font-size: 35px;
    font-weight: 700;
    letter-spacing: -.02em;
  }

  .voucher-row {
    margin-top: 18px;
    padding-top: 17px;
  }

  .voucher-row span::before {
    background: var(--pd-success-soft);
    color: var(--pd-success);
  }

  .seller-shop {
    padding: 21px 23px;
  }

  .detail-seller-avatar {
    width: 58px;
    height: 58px;
    border: 1px solid #cfe0f1;
    border-radius: 16px;
  }

  .shop-main b {
    font-size: 15.5px;
    font-weight: 650;
  }

  .shop-stats {
    margin-top: 17px;
    border-color: #e1e8f0;
  }

  .shop-stats div {
    background: #fafcff;
  }

  .shop-stats strong {
    color: var(--pd-navy);
    font-size: 13.5px;
    font-weight: 650;
  }

  .detail-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 10px;
    padding: 18px 23px 23px;
  }

  .detail-actions a,
  .detail-actions button {
    min-height: 50px;
    font-size: 13px;
    font-weight: 600;
  }

  .product-lower {
    grid-template-columns: minmax(0, 1.33fr) minmax(360px, .67fr);
    gap: 24px;
    margin-top: 24px;
  }

  .product-lower > section {
    padding: 26px;
    border-radius: 18px;
  }

  .fulfillment-section > header h2,
  .description-card h2 {
    color: var(--pd-navy);
    font-size: 19px;
    font-weight: 650;
  }

  .product-detail-facts {
    margin-bottom: 23px;
  }

  .product-detail-facts div {
    padding: 14px 15px;
  }

  .product-detail-facts b {
    color: #223b58;
    font-weight: 600;
  }
}

@media (max-width: 899px) {
  .product-page {
    padding-bottom: calc(164px + env(safe-area-inset-bottom, 0px));
    background: #f4f7fa;
  }

  .detail-header {
    min-height: calc(66px + env(safe-area-inset-top, 0px));
    padding: calc(env(safe-area-inset-top, 0px) + 7px) 14px 7px;
  }

  .detail-header h1 {
    font-size: 18px;
    font-weight: 620;
  }

  .detail-header .icon-button {
    display: grid;
    place-items: center;
  }

  .detail-header .icon-button:last-child {
    visibility: visible;
  }

  .detail-header .detail-report-button {
    color: #52677f;
  }

  .product-hero-slider,
  .product-hero-slide,
  .detail-photo {
    background: #f7f8fa;
  }

  .detail-photo img {
    object-fit: contain;
    background: #f7f8fa;
  }

  .product-gallery-thumbs {
    padding: 11px 14px 14px;
    border-bottom-color: #eef2f6;
  }

  .product-gallery-thumbs button {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    border-width: 1px;
    border-radius: 11px;
  }

  .product-gallery-thumbs button.active {
    border: 2px solid var(--pd-orange) !important;
  }

  .detail-section {
    padding: 20px 17px 22px;
    border-bottom-color: #eef2f6;
  }

  .product-summary-meta {
    display: block;
  }

  .product-condition-pill,
  .product-category-pill {
    min-height: 30px;
    padding: 0 10px;
    font-size: 10.5px;
  }

  .detail-title {
    margin: 14px 0 9px;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 620;
  }

  .price-main {
    font-size: 29px;
    font-weight: 700;
  }

  .product-market-badges {
    margin-top: 15px;
    gap: 6px;
  }

  .product-market-badge {
    min-height: 30px;
    font-size: 10px;
  }

  .seller-shop {
    padding: 20px 17px;
    border-bottom-color: #eef2f6;
  }

  .shop-main {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 12px;
  }

  .detail-seller-avatar {
    width: 62px;
    height: 62px;
    border-radius: 17px;
  }

  .shop-main b {
    font-size: 15px;
    font-weight: 650;
  }

  .shop-main small {
    font-weight: 400;
  }

  .shop-stats {
    gap: 0;
    overflow: hidden;
    border: 1px solid #e1e8f0;
    border-radius: 13px;
  }

  .shop-stats div {
    padding: 10px 4px;
    border: 0;
    border-right: 1px solid #e1e8f0;
    border-radius: 0;
    background: #fafcff;
  }

  .shop-stats div:last-child {
    border-right: 0;
  }

  .shop-stats strong {
    font-weight: 650;
  }

  .fulfillment-section {
    padding: 22px 17px;
    border-bottom-color: #eef2f6;
  }

  .fulfillment-section > header h2,
  .description-card h2 {
    color: var(--pd-navy);
    font-size: 19px;
    font-weight: 650;
  }

  .service-list {
    margin-top: 15px;
  }

  .service-item {
    min-height: 80px;
    grid-template-columns: 48px minmax(0, 1fr) 25px;
    padding: 12px 13px;
    border-radius: 15px;
  }

  .service-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
  }

  .description-card {
    padding: 22px 17px 28px;
  }

  .product-detail-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 0 0 19px;
    border: 1px solid #e1e8f0;
    border-radius: 13px;
    background: #fafcff;
    overflow: hidden;
  }

  .product-detail-facts div {
    min-width: 0;
    padding: 12px;
    border-right: 1px solid #e1e8f0;
    border-bottom: 1px solid #e1e8f0;
  }

  .product-detail-facts div:nth-child(2n) {
    border-right: 0;
  }

  .product-detail-facts div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .product-detail-facts span,
  .product-detail-facts b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-detail-facts span {
    color: #728195;
    font-size: 10px;
  }

  .product-detail-facts b {
    margin-top: 4px;
    color: #253e5b;
    font-size: 11.5px;
    font-weight: 600;
  }

  .product-safety-note {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 14px;
  }

  .product-safety-note > a {
    grid-column: 2;
  }

  .detail-actions {
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
    padding: 9px 12px 10px;
    box-shadow: 0 -10px 26px rgba(6, 43, 95, .1);
  }

  .detail-actions a,
  .detail-actions button {
    min-height: 50px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
  }

  .detail-actions .nego-button::before,
  .detail-actions .green::before {
    width: 20px;
    height: 20px;
  }

  .detail-booked-state {
    padding: 8px 10px;
  }

  .detail-booked-state > span {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 370px) {
  .detail-header {
    padding-left: 10px;
    padding-right: 10px;
  }

  .detail-section,
  .seller-shop,
  .fulfillment-section,
  .description-card {
    padding-left: 13px;
    padding-right: 13px;
  }

  .detail-title {
    font-size: 18px;
  }

  .price-main {
    font-size: 26px;
  }

  .product-market-badge {
    padding: 0 7px;
  }

  .shop-main {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }

  .detail-seller-avatar {
    width: 56px;
    height: 56px;
  }

  .detail-actions {
    gap: 7px;
    padding-left: 9px;
    padding-right: 9px;
  }

  .detail-actions a,
  .detail-actions button {
    font-size: 12px;
  }
}