/* E-commerce product audit section — self-contained styles (isolated from the
   site-wide audit). Neutral palette with status/priority accents. */
.pa-hero { max-width: 760px; margin: 0 auto; padding: 48px 20px 8px; text-align: center; }
.pa-badge { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 5px 12px; border-radius: 999px; background: rgba(37,99,235,.10); color: #2563eb; margin-bottom: 16px; }
.pa-hero h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.12; margin: 0 0 14px; }
.pa-sub { font-size: 18px; color: #5b6472; margin: 0 auto 24px; max-width: 620px; }
.pa-form { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; flex-wrap: wrap; }
.pa-form input[type=url] { flex: 1 1 280px; padding: 14px 16px; border: 1px solid #d4d9e0; border-radius: 12px; font-size: 16px; }
.pa-trust { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 18px 0 0; color: #6b7280; font-size: 14px; }
.pa-trust span { display: inline-flex; align-items: center; gap: 6px; }
.pa-trust span::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: #12b76a; }
.pa-error { max-width: 560px; margin: 14px auto 0; color: #b42318; background: #fef3f2; border: 1px solid #fda29b; border-radius: 10px; padding: 10px 14px; font-size: 14px; }

.pa-section { max-width: 860px; margin: 40px auto; padding: 0 20px; }
.pa-section h2 { font-size: 24px; margin: 0 0 6px; }
.pa-muted { color: #6b7280; }
.pa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 22px; }
.pa-cards { display: flex; flex-direction: column; gap: 14px; }

.pa-card { border: 1px solid #e5e8ec; border-radius: 14px; padding: 18px 20px; background: #fff; }
.pa-card.is-locked { border-style: dashed; background: #fcfcfd; }
.pa-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pa-num { width: 30px; height: 30px; border-radius: 8px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #475467; flex: 0 0 auto; }
.pa-card-title { font-weight: 650; font-size: 16px; flex: 1; min-width: 140px; }
.pa-prio { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.pa-prio.P1 { background: #fef3f2; color: #b42318; }
.pa-prio.P2 { background: #fffaeb; color: #b54708; }
.pa-prio.P3 { background: #eff8ff; color: #175cd3; }
.pa-state { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pa-state.ok { background: #ecfdf3; color: #067647; }
.pa-state.warn { background: #fffaeb; color: #b54708; }
.pa-state.fail { background: #fef3f2; color: #b42318; }

.pa-body { margin-top: 12px; font-size: 15px; color: #344054; }
.pa-line { margin: 8px 0; }
.pa-k { font-weight: 650; color: #101828; }
.pa-lockline { display: flex; gap: 8px; align-items: center; color: #667085; font-size: 14px; }
.pa-lockline svg { width: 16px; height: 16px; flex: 0 0 auto; }

.pa-evidence { margin-top: 12px; }
.pa-evidence summary { cursor: pointer; font-size: 13px; color: #667085; }
.pa-evidence ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.pa-evidence li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed #eef0f3; }
.pa-evidence li .ek { color: #667085; }
.pa-evidence li .ev { color: #101828; font-variant-numeric: tabular-nums; word-break: break-word; text-align: right; }

.pa-wall { text-align: center; border: 1px solid #e5e8ec; border-radius: 16px; padding: 26px; margin-top: 18px; background: linear-gradient(180deg, #fff, #fafbfc); }
.pa-wall h3 { margin: 0 0 14px; font-size: 20px; }
.pa-wall p { color: #6b7280; margin: 0 auto 16px; max-width: 460px; }
.pa-wall-bullets { list-style: none; padding: 0; margin: 0 auto 18px; text-align: left; display: inline-block; }
.pa-wall-bullets li { padding: 4px 0; font-size: 14px; color: #344054; }
.pa-wall-bullets li::before { content: "✓ "; color: #12b76a; font-weight: 700; }

.pa-result-head { max-width: 860px; margin: 36px auto 8px; padding: 0 20px; }
.pa-result-head h1 { font-size: 26px; margin: 0 0 6px; }
.pa-url { color: #667085; font-size: 14px; word-break: break-all; }

.pa-dashboard { display: flex; align-items: center; gap: 28px; margin-top: 18px; flex-wrap: wrap; }
.pa-score-wrap { flex: 0 0 auto; }
.pa-score-ring { width: 110px; height: 110px; }
.pa-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.pa-stat { border-radius: 12px; padding: 13px 18px; text-align: center; min-width: 84px; border: 1.5px solid; }
.pa-stat-num { display: block; font-size: 28px; font-weight: 800; line-height: 1; }
.pa-stat-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 5px; opacity: .85; }
.pa-stat--fail { background: #fef3f2; border-color: #fda29b; color: #b42318; }
.pa-stat--warn { background: #fffaeb; border-color: #fec84b; color: #b54708; }
.pa-stat--ok  { background: #ecfdf3; border-color: #6ce9a6; color: #027a48; }

.pa-card.status-fail { box-shadow: inset 4px 0 0 #f04438; }
.pa-card.status-warn { box-shadow: inset 4px 0 0 #f79009; }
.pa-card.status-ok  { box-shadow: inset 4px 0 0 #12b76a; }

.pa-proc { max-width: 560px; margin: 60px auto; text-align: center; }
.pa-bar { height: 8px; border-radius: 999px; background: #eef0f3; overflow: hidden; max-width: 420px; margin: 22px auto; }
.pa-bar-fill { display: block; height: 100%; width: 6%; background: #2563eb; transition: width .3s ease; }

@media (max-width: 560px) { .pa-form { flex-direction: column; } }