/* Supplier pages (0.3.0), designs/Supplier*.dc.html. Builds on utkrishi_web's uw.css (same brand colours as the homepage).
   All supplier buttons are green: getting a quote is free, so there is no pay (orange) button here. */
.sp { --sp-line: var(--line, #EAD9BE); }
.sp .uw-sec { padding-block: 24px 32px; }
.sp .uw-leaf, .sp .uw-band { padding-block: 32px; }
.sp-top { background: #fff; }
.sp-kicker { font-size: 14px; font-weight: 600; color: var(--g); }
.sp h1, .sp .sp-h1 { font-size: clamp(25px, 4.4vw, 44px); }
.sp h2, .sp .sp-h2 { font-size: clamp(21px, 3vw, 30px); }
.sp-lead { font-size: 16px; color: var(--b2); max-width: 60ch; }
.sp-crumb { font-size: 14px; color: var(--mu); }
.sp-crumb a { color: var(--g); }
.sp-full { width: 100%; }
.sp-center { text-align: center; display: block; }
.sp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* hub */
.sp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.sp-stat { background: #fff; border: 1px solid var(--sp-line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; }
.sp-stat span { font-size: 13px; color: var(--mu); }
.sp-stat b { font-family: Poppins, sans-serif; font-size: 22px; line-height: 1.3; }
.sp-stat b.sp-stat-sm { font-size: 17px; }
.sp-search { display: flex; gap: 8px; max-width: 560px; }
.sp-search input { flex: 1; min-width: 0; min-height: 50px; border-radius: 12px; border: 1px solid #C9B9A0; padding: 0 14px; font: inherit; font-size: 16px; background: #fff; }
.sp-biz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .sp-biz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sp-biz { background: #fff; border: 1px solid var(--sp-line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; color: var(--ink) !important; text-decoration: none !important; }
.sp-biz:hover { border-color: var(--g); }
.sp-biz b { font-size: 16px; }
.sp-ico { width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--leaf) center/24px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C7939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
.sp-box { background: #fff; border: 1px solid var(--sp-line); border-radius: 16px; padding: 16px; }
.sp-ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sp-ticks li { position: relative; padding-left: 28px; font-size: 15px; color: var(--b2); }
.sp-ticks li::before { content: "✓"; position: absolute; left: 2px; color: var(--g); font-weight: 700; }

/* machine list */
.sp-cost { background: var(--leaf); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.sp-cost-num { font-family: Poppins, sans-serif; font-size: 26px; }
.sp-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fff;
  border: 1px solid var(--sp-line); border-radius: 14px; padding: 12px; color: var(--ink) !important; text-decoration: none !important; }
.sp-row:hover { border-color: var(--g); }
.sp-row-body { display: flex; flex-direction: column; min-width: 0; }
.sp-row-body b { font-size: 16px; line-height: 1.35; }
.sp-row-meta { font-size: 13px; color: var(--g); font-weight: 600; }
.sp-chev { color: var(--g); font-size: 22px; }
.sp-more-title { font-size: 17px !important; margin-top: 10px !important; color: var(--mu); }
.sp-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.sp-allcard, .sp-aside-box { background: #fff; border: 1px solid var(--g); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.sp-allcard-title { font-size: 18px; }

/* machine page */
.sp-layout { display: grid; gap: 24px; padding-block: 8px 32px; }
.sp-aside { display: none; }
@media (min-width: 960px) {
  .sp-layout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .sp-aside { display: block; position: sticky; top: 24px; }
  .sp-hide-lg { display: none !important; }
}
.sp-price { background: #FFF6EA; border: 1px solid #F0D9B5; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.sp-price-row { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; border-bottom: 1px dashed #F0D9B5; padding-bottom: 6px; }
.sp-price-row b { white-space: nowrap; color: var(--ink); }
.sp-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sp-cmp { background: #fff; border: 1px solid var(--sp-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.sp-cmp span { font-size: 14px; color: var(--b2); }
.sp-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sp-filters label { display: flex; flex-direction: column; font-size: 14px; color: var(--mu); gap: 4px; }
.sp select, .sp input[type=text], .sp input[type=tel], .sp textarea { min-height: 50px; border-radius: 12px; border: 1px solid #C9B9A0; padding: 8px 12px;
  font: inherit; font-size: 16px; background: #fff; width: 100%; color: var(--ink); }
.sp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.sp-check input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--g); }
.sp-cards { display: flex; flex-direction: column; gap: 12px; }
.sp-card { background: #fff; border: 1px solid var(--sp-line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.sp-card[hidden] { display: none; }
.sp-card-top { align-items: flex-start; }
.sp-card-title { font-size: 18px; }
.sp-card-text { font-size: 15px; color: var(--b2); }
.sp-card-price { font-size: 15px; color: #8a4b00; }
.sp-badge { font-size: 13px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: #F1EEEA; color: var(--mu); white-space: nowrap; }
.sp-badge-ok { background: #E7F3EA; color: var(--g); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chips span { font-size: 13px; border-radius: 999px; padding: 3px 10px; background: var(--leaf); }
.sp-note { background: var(--leaf); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--b2); }
.sp-bottombar { position: sticky; bottom: 0; z-index: 5; background: #fff; border-top: 1px solid var(--sp-line);
  box-shadow: 0 -6px 18px rgba(31, 42, 36, .08); padding: 10px 16px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
.sp-bb-wa { min-height: 52px; border-radius: 12px; border: 2px solid var(--g); color: var(--g) !important; display: flex; align-items: center; justify-content: center; }
@media (min-width: 960px) { .sp-bottombar { display: none; } }

/* quote form */
.sp-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sp-progress li { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--mu); }
.sp-progress li div { height: 6px; border-radius: 999px; background: var(--sp-line); }
.sp-progress li.on { color: var(--g); font-weight: 600; }
.sp-progress li.on div { background: var(--g); }
.sp-qcard { background: #fff; border: 2px solid var(--g); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sp-qcard-row { display: flex; gap: 12px; align-items: center; }
.sp-qform { display: flex; flex-direction: column; gap: 14px; }
.sp-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 16px; border: 0; margin: 0; padding: 0; }
.sp-field legend { font-weight: 600; font-size: 16px; font-family: inherit; margin-bottom: 6px; padding: 0; border: 0; width: auto; line-height: 1.5; color: var(--ink); }
.sp-chips-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chips-pick label { position: relative; }
.sp-chips-pick input { position: absolute; opacity: 0; }
.sp-chips-pick span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #C9B9A0; background: #fff; font-weight: 600; cursor: pointer; }
.sp-chips-pick input:checked + span { border: 2px solid var(--g); background: #EAF3EC; color: var(--gd); }
.sp-chips-pick input:focus-visible + span { outline: 3px solid var(--g); outline-offset: 2px; }
.sp-msg { font-weight: 600; margin: 0; }
.sp-msg.ok { color: var(--g); } .sp-msg.err { color: #a12a1b; }
.sp-final-title { font-family: Poppins, sans-serif; font-size: 22px; }
.sp-wa-btn { max-width: 420px; }