/* SUGI CARD mobile material/product pages (mpd-*): redesign, same look as the use-case pages.
   Loaded after css/mobile-product-detail.css and css/mobile-detail.css. */

body {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
}
.mpd-page {
  max-width: none !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}
.mpd-header,
.mpd-back-products {
  display: none !important;
}

/* ---------- hero ---------- */
.mpd-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 46px 16px 8px !important;
  background: #fff !important;
  text-align: center !important;
}
.mpd-title {
  order: 1;
  margin: 0 !important;
  color: #1d1d1f !important;
  font-size: 15.6px !important;
  font-weight: 750 !important;
  letter-spacing: -0.7px !important;
  line-height: 1.3 !important;
}
.mpd-image-wrap {
  order: 2;
  position: relative !important;
  width: min(78vw, 300px) !important;
  margin: 30px auto 24px !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.mpd-image {
  width: 100% !important;
  aspect-ratio: auto !important;
  height: auto !important;
  border-radius: 10px !important;
  object-fit: contain !important;
}
.mpd-badge {
  top: -12px !important;
  left: -8px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
}
.mpd-description {
  order: 3;
  max-width: 330px !important;
  margin: 0 0 22px !important;
  color: #667085 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}
.mpd-highlights {
  display: none !important;
}
.mpd-actions {
  order: 4;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}
.mpd-btn {
  min-height: 0 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}
.mpd-btn-primary {
  height: 44px !important;
  padding: 0 34px !important;
  background: #0071e3 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.mpd-btn-outline {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #0071e3 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
.mpd-facts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  padding: 26px 14px 30px !important;
  border: 0 !important;
  background: #fff !important;
}
.mpd-fact {
  padding: 18px 6px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #f5f5f7 !important;
}
.mpd-fact + .mpd-fact {
  border-left: 0 !important;
}
.mpd-fact small {
  color: #6e6e73 !important;
  font-size: 11px !important;
}
.mpd-fact strong {
  margin-top: 6px !important;
  color: #1d1d1f !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: -0.3px !important;
}

/* ---------- sections ---------- */
.mpd-section:not(.m-card):not(.m-section) {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.mpd-section.m-section {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
}
.mpd-section.m-card {
  margin: 12px 14px 0 !important;
}
.mpd-section.m-spec-card {
  margin: 12px 0 0 !important;
}
.mpd-section.m-pricing-card .m-pricing-block:first-child {
  margin-top: 0 !important;
}
.mpd-section.m-order-card {
  margin: 12px 0 0 !important;
}

/* calculator */
.mpd-section[data-mpn-kind="calc"] {
  margin: 12px 14px 0 !important;
  padding: 30px 18px 22px !important;
  border-radius: 28px !important;
  background: #fff !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-section-title {
  margin: 0 0 6px !important;
  color: #1d1d1f !important;
  font-size: 20px !important;
  font-weight: 750 !important;
  letter-spacing: -0.6px !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-section-lead {
  margin: 0 0 18px !important;
  color: #6e6e73 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}
.mpd-price-controls {
  gap: 10px !important;
}
.mpd-price-control label {
  margin: 0 4px 6px !important;
  color: #6e6e73 !important;
  font-size: 12px !important;
}
.mpd-price-select {
  height: 46px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
  font-size: 14px !important;
}
.mpd-price-box {
  margin-top: 4px !important;
  padding: 20px 20px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: #f5f5f7 !important;
}
.mpd-price-label {
  color: #6e6e73 !important;
  font-size: 12px !important;
}
.mpd-price {
  margin-top: 4px !important;
  color: #1d1d1f !important;
  font-size: 26px !important;
  font-weight: 750 !important;
  letter-spacing: -0.8px !important;
}
.mpd-quantity {
  color: #6e6e73 !important;
  font-size: 12px !important;
}
.mpd-price-order-btn {
  height: 48px !important;
  margin-top: 16px !important;
  border-radius: 999px !important;
  background: #0071e3 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-note {
  margin-top: 14px !important;
  color: #6e6e73 !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

/* FAQ (details/summary version rendered by the page script) */
.mpd-section[data-mpn-kind="faq"],
#mpdStaticFaq {
  margin: 12px 14px 0 !important;
  padding: 40px 20px 14px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #f5f5f7 !important;
}
.mpd-section[data-mpn-kind="faq"] .mpd-section-title,
#mpdStaticFaq .mpd-section-title {
  margin: 0 0 18px !important;
  color: #1d1d1f !important;
  font-size: 24px !important;
  font-weight: 750 !important;
  letter-spacing: -0.8px !important;
  line-height: 1.25 !important;
}
.mpd-faq details,
#mpdStaticFaq .mpd-faq-item {
  border-bottom: 1px solid #d2d2d7 !important;
}
.mpd-faq details:last-child,
#mpdStaticFaq .mpd-faq-item:last-child {
  border-bottom: 0 !important;
}
.mpd-faq summary,
#mpdStaticFaq .mpd-faq-question {
  padding: 18px 28px 18px 0 !important;
  color: #1d1d1f !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.45 !important;
}
.mpd-faq summary::after {
  content: "" !important;
  top: 22px !important;
  right: 4px !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid #6e6e73 !important;
  border-bottom: 2px solid #6e6e73 !important;
  color: transparent !important;
  font-size: 0 !important;
  transform: rotate(45deg) !important;
}
.mpd-faq details[open] summary::after {
  top: 26px !important;
  transform: rotate(225deg) !important;
}
.mpd-faq p,
#mpdStaticFaq .mpd-faq-answer {
  padding: 0 0 18px !important;
  color: #424245 !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
}
#mpdStaticFaq .mpd-faq-toggle {
  top: 22px !important;
  right: 4px !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid #6e6e73 !important;
  border-bottom: 2px solid #6e6e73 !important;
  color: transparent !important;
  font-size: 0 !important;
  transform: rotate(45deg) !important;
}
#mpdStaticFaq .mpd-faq-item.open .mpd-faq-toggle {
  top: 26px !important;
  transform: rotate(225deg) !important;
}

/* calculator and FAQ need side margins; they are not cards in the generated markup */
.mpd-section[data-mpn-kind="calc"],
.mpd-section[data-mpn-kind="faq"] {
  margin-left: 14px !important;
  margin-right: 14px !important;
}
.mpd-section[data-mpn-kind="calc"] {
  box-sizing: border-box !important;
}
.mpd-price-select {
  min-width: 0 !important;
}
.mpd-price-controls {
  grid-template-columns: 1.4fr 1fr !important;
}
.mpd-note {
  color: #6e6e73 !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}
.m-pricing-card .m-processing-fee-note {
  font-size: 12px !important;
}
.mpd-section.m-section .m-use-chips .m-use-chip {
  font-size: 12px !important;
}

/* Three icon badges under the hero (replaces the grey fact tiles) */
.m-feature-band.mpn-badges {
  margin: 0 0 12px !important;
  padding: 24px 8px 26px !important;
  background: #fff !important;
  border: 0 !important;
}
.m-feature-band.mpn-badges .m-hero-feature-row-safe {
  margin-top: 0 !important;
}

/* ---------- calculator redesign ---------- */
.mpd-section[data-mpn-kind="calc"] {
  padding: 34px 20px 24px !important;
  text-align: center !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-section-title {
  margin: 0 0 8px !important;
  font-size: 22px !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-section-lead {
  margin: 0 0 24px !important;
  font-size: 12px !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-price-controls {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
  text-align: left !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-price-select {
  width: 100% !important;
  height: 52px !important;
  padding: 0 44px 0 20px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f5f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 20px center !important;
  color: #1d1d1f !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-price-box {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 26px 16px 24px !important;
  border-radius: 24px !important;
  background: #f5f5f7 !important;
  text-align: center !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-price-box > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-price {
  font-size: 36px !important;
  letter-spacing: -1.2px !important;
  line-height: 1.15 !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-quantity {
  margin-top: 6px !important;
  text-align: center !important;
  font-size: 13px !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-price-order-btn {
  width: 100% !important;
  max-width: 320px !important;
  margin: 18px auto 0 !important;
}
.mpd-section[data-mpn-kind="calc"] .mpd-note {
  text-align: center !important;
}

.mpd-page .mpd-section[data-mpn-kind="calc"],
.mpd-page .mpd-section[data-mpn-kind="faq"] {
  margin: 12px 14px 0 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  border-radius: 28px !important;
  background: #fff !important;
}
.mpd-page .mpd-section[data-mpn-kind="calc"] {
  padding-top: 34px !important;
  padding-bottom: 24px !important;
}
.mpd-page .mpd-section[data-mpn-kind="faq"] {
  padding-top: 40px !important;
  padding-bottom: 14px !important;
  border-radius: 20px !important;
  background: #f5f5f7 !important;
}

/* Real image for material spec tile. */
.m-spec-tile-v2 .m-spec-visual-v2 {
  width: 92px !important;
  max-width: 100% !important;
  aspect-ratio: 1.586 / 1 !important;
  display: block !important;
  margin: 14px auto 0 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  background: #f5f5f7 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
}