#usr-supplier-module,
#usr-supplier-module * { box-sizing: border-box; margin: 0; padding: 0; }

#usr-supplier-module {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  max-width: 520px;
  margin: 20px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  line-height: 1.6;
  color: #333;
}

#usr-supplier-module .usr-header { background: #E53935; color: #fff; text-align: center; padding: 24px 20px; }
#usr-supplier-module .usr-header h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; letter-spacing: 0.3px; }
#usr-supplier-module .usr-header p { font-size: 14px; opacity: 0.9; font-weight: 400; }

#usr-supplier-module .usr-media {
  background: #f5f5f5;
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

#usr-supplier-module .usr-media-img {
  width: 100%; max-width: 100%; height: auto; display: block;
  border-radius: 4px; margin-bottom: 12px;
}

#usr-supplier-module .usr-brand-name { font-size: 16px; font-weight: 700; color: #333; letter-spacing: 2px; margin-bottom: 12px; }
#usr-supplier-module .usr-link { font-size: 13px; color: #555; word-break: break-all; margin-bottom: 20px; }

#usr-supplier-module .usr-content { padding: 0 20px; }
#usr-supplier-module .usr-section-title { color: #E53935; font-size: 18px; font-weight: 700; padding: 18px 0 12px; border-bottom: 2px solid #E53935; margin-bottom: 14px; }

#usr-supplier-module .usr-step { background: #FFF8F5; border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; display: flex; gap: 14px; align-items: flex-start; }
#usr-supplier-module .usr-step-number { width: 30px; height: 30px; background: #E53935; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
#usr-supplier-module .usr-step-content h4 { font-size: 15px; font-weight: 700; color: #222; margin-bottom: 4px; }
#usr-supplier-module .usr-step-content p { font-size: 13px; color: #555; line-height: 1.55; }

#usr-supplier-module .usr-takeaway { background: #f0f0f0; border-radius: 8px; padding: 16px 18px; margin: 14px 0 18px; border-left: 4px solid #E53935; }
#usr-supplier-module .usr-takeaway h4 { font-size: 15px; font-weight: 700; color: #222; margin-bottom: 6px; }
#usr-supplier-module .usr-takeaway p { font-size: 13px; color: #555; line-height: 1.55; font-style: italic; }

#usr-supplier-module .usr-cta { text-align: center; font-size: 13px; color: #777; padding: 0 0 16px; }
#usr-supplier-module .usr-cta a { color: #E53935; text-decoration: none; font-weight: 600; }
#usr-supplier-module .usr-cta a:hover { text-decoration: underline; }

#usr-supplier-module .usr-footer { text-align: center; padding: 16px 20px 20px; border-top: 1px solid #eee; }
#usr-supplier-module .usr-more-content { font-size: 13px; color: #999; margin-bottom: 12px; }
#usr-supplier-module .usr-social-icons { display: flex; justify-content: center; gap: 28px; margin-bottom: 12px; }
#usr-supplier-module .usr-social-icons a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.2s; }
#usr-supplier-module .usr-social-icons a:hover { transform: scale(1.15); }
#usr-supplier-module .usr-social-icons svg { width: 28px; height: 28px; }
#usr-supplier-module .usr-follow-text { font-size: 14px; color: #E53935; font-weight: 600; }

#usr-supplier-module .usr-back-btn {
  display: block; width: fit-content; margin: 16px auto 20px; background: #E53935;
  color: #fff; border: none; padding: 10px 36px; border-radius: 4px; font-size: 13px;
  font-weight: 600; cursor: pointer; letter-spacing: 1px; transition: background 0.2s; text-decoration: none;
}
#usr-supplier-module .usr-back-btn:hover { background: #c62828; }

@media (max-width: 560px) {
  #usr-supplier-module { max-width: 100%; border-radius: 0; margin: 0; }
}