:root {
    --product-ink: #17231f;
    --product-muted: #58645f;
    --product-green: #08785d;
    --product-green-soft: #eaf7f2;
    --product-border: #aeb9b4;
    --product-surface: #f5f7f6;
    --product-danger: #9e2626;
}

.product-field { min-width: 0; }
.product-field label, .product-field legend { color: var(--product-ink); }
.product-field-error { min-height: 1.25em; margin: 6px 0 0; color: var(--product-danger); font-size: .82rem; font-weight: 600; line-height: 1.35; }
.product-field-error:empty { min-height: 0; }
.product-error-summary { padding: 13px 15px; border-left: 4px solid var(--product-danger); border-radius: 6px; background: #fff1f1; color: #661717; text-align: left; }
.product-error-summary:focus { outline: 3px solid rgba(158,38,38,.25); outline-offset: 2px; }
.product-error-summary p { margin: 0 0 7px; font-weight: 700; }
.product-error-summary ul { margin: 0; padding-left: 20px; }
.product-error-summary a { color: inherit; }

.product-notice { padding: 15px 16px; border: 1px solid rgba(0,0,0,.15); border-radius: 9px; background: var(--product-surface); color: var(--product-ink); text-align: left; }
.product-notice h3 { margin: 0 0 5px; font-size: 1rem; }
.product-notice p { margin: 0; color: var(--product-muted); font-size: .88rem; line-height: 1.5; }
.product-notice-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.product-notice button, .product-dialog button { min-height: 44px; padding: 9px 15px; border: 1px solid var(--product-ink); border-radius: 22px; background: var(--product-ink); color: #fff; font: 600 .9rem Poppins,sans-serif; cursor: pointer; }
.product-notice button.secondary, .product-dialog button.secondary { background: #fff; color: var(--product-ink); }
.product-notice button:hover, .product-dialog button:hover { border-color: var(--product-green); }
.product-notice button:focus-visible, .product-dialog button:focus-visible { outline: 3px solid rgba(0,200,150,.45); outline-offset: 2px; }

.product-metric { border: 1px solid rgba(0,0,0,.14); border-radius: 9px; background: #fff; text-align: center; }
.product-metric-primary { border-color: var(--product-green); background: var(--product-green-soft); }
.product-cta { padding: 20px; border: 1px solid rgba(8,120,93,.35); border-radius: 9px; background: var(--product-green-soft); }
.product-cta h2 { margin: 0 0 7px; font-size: 1.25rem; }
.product-cta p { margin: 0 0 12px; color: var(--product-muted); }
.product-cta-link { display: inline-flex; min-height: 44px; align-items: center; color: #075b47; font-weight: 700; text-decoration: none; background-image: linear-gradient(#08785d,#08785d); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 2px; transition: background-size 220ms ease; }
.product-cta-link:hover, .product-cta-link:focus-visible { background-size: 100% 2px; }
.product-cta-link:focus-visible { outline: 3px solid #71a822; outline-offset: 3px; }

.product-dialog { width: min(520px,calc(100% - 32px)); padding: 24px; border: 0; border-radius: 12px; box-shadow: 0 20px 70px rgba(0,0,0,.28); color: var(--product-ink); }
.product-dialog::backdrop { background: rgba(11,20,17,.68); }
.product-dialog h2 { margin-top: 0; font-size: 1.35rem; }
.product-dialog ul { padding-left: 22px; }
.product-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 18px; }

@media (max-width: 480px) {
    .product-notice-actions, .product-dialog-actions { flex-direction: column; }
    .product-notice-actions button, .product-dialog-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .product-cta-link { transition: none; }
}
