/* ==========================================================================
   merciChef — Scoped Component Kit (fragments/components.css)
   Canonical implementation of shared cards, buttons, fields, notes, badges,
   FAQ, tables, dialogs, toasts, and interface icons across merciChef.
   Scope rules:
   - Functional controls are scoped beneath .pm-ui, .pm-page, or body.my.
   - Detached overlays (.pm-dialog, .pm-toast) are self-contained at body level.
   - Editorial controls use .mc-editorial and .me-* namespaces.
   - Global important overrides are bridged via scoped selectors.
   ========================================================================== */

/* ---------- 1. Scope, Hidden Precedence & Base Rules ---------- */
.pm-ui [hidden],
.pm-page [hidden],
.payment-page [hidden],
.groups-page [hidden],
.routines-page [hidden],
.holidays-page [hidden],
.rewards-page [hidden],
.voting-page [hidden],
.checkout-page [hidden],
.pm-dialog [hidden] {
  display: none !important;
}

/* Uppercase family name presentation without mutating data */
input[name="lastname"], input[name="last_name"], input[name$="_lastname"],
input[name$="_last_name"], input[name*="lastname"], input[name*="last_name"],
input[id="lastname"], input[id="last_name"], input[id*="lastname"],
input[id*="last_name"], input[autocomplete*="family-name"],
input[autocapitalize="characters"] {
  text-transform: uppercase;
}
input[name="lastname"]::placeholder, input[name="last_name"]::placeholder,
input[name$="_lastname"]::placeholder, input[name$="_last_name"]::placeholder,
input[name*="lastname"]::placeholder, input[name*="last_name"]::placeholder,
input[id="lastname"]::placeholder, input[id="last_name"]::placeholder,
input[id*="lastname"]::placeholder, input[id*="last_name"]::placeholder,
input[autocomplete*="family-name"]::placeholder,
input[autocapitalize="characters"]::placeholder {
  text-transform: none;
}

/* ---------- 2. Shared Cards & Panels ---------- */
.pm-card,
.payment-card,
.groups-card {
  background: var(--pm-surface, #ffffff);
  border: 1px solid var(--pm-border, #e7dcce);
  border-radius: var(--pm-radius-card, 14px);
  box-shadow: var(--pm-shadow-card, 0 10px 35px -18px rgba(0, 0, 0, 0.25));
  padding: var(--pm-card-padding, 24px);
  margin-bottom: var(--pm-space-5, 20px);
  box-sizing: border-box;
}

.pm-card--flat {
  box-shadow: var(--pm-shadow-flat, none) !important;
}

.pm-card--flush {
  padding: 0 !important;
}

.pm-card h2, .payment-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: var(--pm-weight-strong, 600);
  line-height: 1.25;
  color: var(--pm-ink, #1a1a1a);
}

.pm-card h3, .payment-card h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: var(--pm-weight-strong, 600);
  line-height: 1.3;
  color: var(--pm-ink, #1a1a1a);
}

.pm-card h4, .payment-card h4 {
  margin: 16px 0 6px;
  font-size: 15px;
  font-weight: var(--pm-weight-strong, 600);
  line-height: 1.25;
  color: var(--pm-ink, #1a1a1a);
}

.pm-card form, .payment-card form {
  margin: 0;
  padding: 0;
}

.pm-section-header, .payment-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.pm-section-header h2, .pm-section-header h3 {
  margin-bottom: 0;
}

.pm-sub, .section-note {
  color: var(--pm-muted, #6f6a62);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 12px;
}

.pm-section-title, .section-title {
  display: block;
  margin: 0 0 6px;
  font-weight: var(--pm-weight-strong, 600);
  font-size: 14px;
  line-height: 1.25;
  color: var(--pm-ink, #1a1a1a);
}

.pm-row, .holiday-row {
  border: 1px solid var(--pm-border, #e7dcce);
  border-radius: var(--pm-radius-control, 10px);
  background: var(--pm-surface-warm, #fbf7f1);
  padding: 16px;
  margin: 0 0 12px;
  box-sizing: border-box;
}
.pm-row h4, .holiday-row h4 {
  margin: 0 0 4px;
  font-weight: var(--pm-weight-strong, 600);
  font-size: 16px;
  color: var(--pm-ink, #1a1a1a);
}

/* ---------- 3. Shared Buttons & CTAs ---------- */
/* Base button recipe */
.pm-btn:not(.custom),
.pm-ui .pm-btn,
.pm-ui .button-primary,
.pm-ui .gp-btn,
.pm-ui .votebtn,
.pm-page .pm-btn,
.pm-page .button-primary,
.pm-page .gp-btn,
.pm-page .cta,
.pm-page .votebtn,
.pm-dialog .pm-btn,
.signin-card .signin-submit,
.checkout-page .pm-btn,
.checkout-page .button-primary,
.checkout-page .gp-btn,
.checkout-page .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent !important;
  background: var(--pm-primary, #c6522d);
  color: #ffffff !important;
  padding: 10px 20px;
  border-radius: var(--pm-radius-control, 10px);
  font-weight: var(--pm-weight-strong, 600);
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  min-width: 0;
  font-family: inherit;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: none;
  transition: background-color var(--pm-transition, .15s ease),
              border-color var(--pm-transition, .15s ease),
              color var(--pm-transition, .15s ease),
              transform .1s ease;
}

/* Functional Hover */
.pm-btn:hover:not(:disabled),
.pm-ui .button-primary:hover:not(:disabled),
.pm-ui .gp-btn:hover:not(:disabled),
.pm-ui .votebtn:hover:not(:disabled),
.pm-page .pm-btn:hover:not(:disabled),
.pm-page .button-primary:hover:not(:disabled),
.pm-page .gp-btn:hover:not(:disabled),
.pm-page .cta:hover:not(:disabled),
.pm-page .votebtn:hover:not(:disabled),
.pm-dialog .pm-btn:hover:not(:disabled),
.signin-card .signin-submit:hover:not(:disabled),
.checkout-page .pm-btn:hover:not(:disabled),
.checkout-page .button-primary:hover:not(:disabled),
.checkout-page .gp-btn:hover:not(:disabled),
.checkout-page .cta:hover:not(:disabled) {
  background: var(--pm-primary-dark, #a84324) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  text-decoration: none;
}

/* Sizes: Large (marketing default) & Compact */
.pm-btn.pm-btn--lg,
.mc-editorial .button.primary:not(.custom) {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 17px;
}

.pm-btn--sm,
.pm-ui .pm-btn.pm-btn--sm,
.pm-btn.small,
.pm-ui .pm-btn.small,
.pm-ui .gp-btn.small,
.pm-page .pm-btn.pm-btn--sm,
.pm-page .pm-btn.small,
.pm-page .gp-btn.small,
.pm-dialog .pm-btn.pm-btn--sm,
.checkout-page .pm-btn.pm-btn--sm,
.checkout-page .pm-btn.small {
  padding: 6px 12px;
  font-size: 14px;
  min-height: 40px;
  border-radius: 9px;
}

/* Secondary / Plain / Outline */
.pm-btn.plain,
.pm-btn--outline,
.pm-ui .pm-btn.plain,
.pm-ui .gp-btn.plain,
.pm-page .pm-btn.plain,
.pm-page .gp-btn.plain,
.pm-dialog .pm-btn.plain,
.checkout-page .pm-btn.plain {
  background: var(--pm-surface, #ffffff) !important;
  color: var(--pm-ink, #1a1a1a) !important;
  border-color: var(--pm-border, #e7dcce) !important;
}

.pm-btn.plain:hover:not(:disabled),
.pm-btn--outline:hover:not(:disabled),
.pm-ui .pm-btn.plain:hover:not(:disabled),
.pm-ui .gp-btn.plain:hover:not(:disabled),
.pm-page .pm-btn.plain:hover:not(:disabled),
.pm-page .gp-btn.plain:hover:not(:disabled),
.pm-dialog .pm-btn.plain:hover:not(:disabled),
.checkout-page .pm-btn.plain:hover:not(:disabled) {
  background: var(--pm-surface-hover, #f6efe6) !important;
  color: var(--pm-ink, #1a1a1a) !important;
  border-color: var(--pm-border, #e7dcce) !important;
}

/* Danger Button (Standard & Strong) */
.pm-btn.danger,
.pm-ui .pm-btn.danger,
.pm-ui .gp-btn.danger,
.pm-page .pm-btn.danger,
.pm-page .gp-btn.danger,
.pm-dialog .pm-btn.danger {
  background: var(--pm-surface, #ffffff) !important;
  color: var(--pm-danger, #b71c1c) !important;
  border-color: var(--pm-danger, #b71c1c) !important;
}

.pm-btn.danger:hover:not(:disabled),
.pm-ui .pm-btn.danger:hover:not(:disabled),
.pm-ui .gp-btn.danger:hover:not(:disabled),
.pm-page .pm-btn.danger:hover:not(:disabled),
.pm-page .gp-btn.danger:hover:not(:disabled),
.pm-dialog .pm-btn.danger:hover:not(:disabled) {
  background: var(--pm-danger-soft, #fdecea) !important;
  color: var(--pm-danger, #b71c1c) !important;
  border-color: var(--pm-danger, #b71c1c) !important;
}

.pm-btn.danger-strong,
.pm-ui .pm-btn.danger-strong,
.pm-ui .gp-btn.danger-strong,
.pm-page .pm-btn.danger-strong,
.pm-page .gp-btn.danger-strong,
.pm-dialog .pm-btn.danger-strong {
  background: var(--pm-danger, #b71c1c) !important;
  color: #ffffff !important;
  border-color: var(--pm-danger, #b71c1c) !important;
}

.pm-btn.danger-strong:hover:not(:disabled),
.pm-ui .pm-btn.danger-strong:hover:not(:disabled),
.pm-ui .gp-btn.danger-strong:hover:not(:disabled),
.pm-page .pm-btn.danger-strong:hover:not(:disabled),
.pm-page .gp-btn.danger-strong:hover:not(:disabled),
.pm-dialog .pm-btn.danger-strong:hover:not(:disabled) {
  background: var(--pm-danger-dark, #8f1616) !important;
  color: #ffffff !important;
  border-color: var(--pm-danger-dark, #8f1616) !important;
}

/* Disabled & Pending States */
.pm-btn:disabled,
.pm-ui .pm-btn:disabled,
.pm-ui .gp-btn:disabled,
.pm-page .pm-btn:disabled,
.pm-page .gp-btn:disabled,
.pm-dialog .pm-btn:disabled,
.signin-card .signin-submit:disabled,
.checkout-page .pm-btn:disabled {
  opacity: 0.5 !important;
  cursor: default !important;
  pointer-events: none;
}

button.pm-saving,
input[type=submit].pm-saving,
.button.pm-saving,
.pm-btn.pm-saving {
  opacity: 0.58 !important;
  cursor: wait !important;
  pointer-events: none;
  filter: saturate(.55);
}

button.pm-saving::after,
input[type=submit].pm-saving::after,
.button.pm-saving::after,
.pm-btn.pm-saving::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pm-saving-spin .7s linear infinite;
  margin-left: 6px;
}

@keyframes pm-saving-spin {
  to { transform: rotate(360deg); }
}

/* Navigation Arrow Discipline: Suppress arrows on forms, submits, dialogs, tabs */
.pm-btn::after,
.signin-submit::after,
.pm-dialog button::after,
.pm-no-arrow::after,
.pm-no-arrow::before {
  content: none !important;
}

/* Focus Indicator */
.pm-btn:focus-visible,
.pm-ui .pm-btn:focus-visible,
.pm-ui .gp-btn:focus-visible,
.pm-page .pm-btn:focus-visible,
.pm-page .gp-btn:focus-visible,
.pm-dialog .pm-btn:focus-visible,
.signin-card .signin-submit:focus-visible,
.checkout-page .pm-btn:focus-visible {
  outline: 2px solid var(--pm-focus, #a84324);
  outline-offset: 2px;
}

/* ---------- 4. Canonical Editorial Links ---------- */
.me-link {
  color: var(--pm-forest, #2c3e2f);
  text-decoration: none;
  font-weight: var(--pm-weight-strong, 600);
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left calc(100% - 7px);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: color var(--pm-transition, .15s ease);
}
.me-link:hover {
  color: var(--pm-accent-text, #a84324);
}
.me-forest .me-link,
.me-dark .me-link {
  color: #ffffff;
}
.me-forest .me-link:hover,
.me-dark .me-link:hover {
  color: var(--pm-rose, #e8916b);
}

/* Paired anonymous actions inside the terracotta site header. */
header#menu .headerExtraButtons {
  align-items: center !important;
  gap: 10px !important;
}
header#menu #account.button:not(.primary),
header#menu #wizard.pm-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 8px;
  box-shadow: none;
  font: 600 16px/1.4 Manrope, sans-serif !important;
  white-space: nowrap;
  box-sizing: border-box;
}
header#menu #account.button:not(.primary) {
  border: 1px solid rgba(255,255,255,.85) !important;
  background: transparent !important;
  color: #fff !important;
}
header#menu #account.button:not(.primary):hover {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
header#menu #wizard.pm-nav-cta {
  border: 1px solid var(--pm-surface, #fff) !important;
  background: var(--pm-surface, #fff) !important;
  color: var(--pm-forest, #2c3e2f) !important;
}
header#menu #wizard.pm-nav-cta::after {
  content: " ▸";
  display: inline-block;
  margin-left: .45em;
  line-height: inherit;
}
header#menu #wizard.pm-nav-cta:hover {
  border-color: var(--pm-forest, #2c3e2f) !important;
  background: var(--pm-forest, #2c3e2f) !important;
  color: #fff !important;
}
header#menu #wizard.pm-nav-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (min-width:1200px) {
  header#menu #right { display:flex; align-items:center; height:var(--header); min-height:0; }
  header#menu .headerExtraButtons { height:100%; padding-block:0; }
  header#menu #account, header#menu #wizard { margin-block:0; }
}
@media (max-width:1199px) {
  header#menu .headerExtraButtons { left:20px; right:20px; width:calc(100% - 40px); }
  header#menu #account, header#menu #wizard {
    flex:1 1 auto;
    margin:0;
    padding:8px 14px;
  }
}

/* ---------- 5. Forms, Fields & Selects ---------- */
.pm-form-grid, .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 12px;
}

.pm-field, .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}

.pm-field label, .form-field label, .signin-label {
  font-weight: var(--pm-weight-strong, 600);
  font-size: 14px;
  color: var(--pm-ink, #1a1a1a);
  line-height: 1.3;
}

.pm-field input:not([type=checkbox]):not([type=radio]),
.pm-field select,
.pm-field textarea,
.form-field input:not([type=checkbox]):not([type=radio]),
.form-field select,
.form-field textarea,
.signin-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px solid var(--pm-border-control, #6f6a62);
  border-radius: var(--pm-radius-control, 10px);
  font-size: 16px;
  font-family: inherit;
  color: var(--pm-ink, #1a1a1a);
  background-color: #ffffff;
  transition: border-color var(--pm-transition, .15s ease), box-shadow var(--pm-transition, .15s ease);
}

.pm-field input:focus,
.pm-field select:focus,
.pm-field textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.signin-input:focus {
  outline: none;
  border-color: var(--pm-primary, #c6522d);
  box-shadow: 0 0 0 3px rgba(198, 82, 45, 0.15);
}

.pm-field input:focus-visible,
.pm-field select:focus-visible,
.pm-field textarea:focus-visible,
.signin-input:focus-visible {
  outline: 2px solid var(--pm-focus, #a84324);
  outline-offset: 1px;
}

.pm-field input.invalid,
.form-field input.invalid,
.signin-input.invalid {
  border-color: var(--pm-danger, #b71c1c);
  color: var(--pm-danger, #b71c1c);
}

.pm-field input[readonly],
.form-field input[readonly] {
  background-color: #f7f1e9;
  color: var(--pm-muted, #6f6a62);
}

.pm-field textarea,
.form-field textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.45;
}

/* Custom Dropdown Chevron */
.pm-field select,
.form-field select,
.pm-select select,
.rt-select select {
  min-height: 44px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%236f6a62' d='M1.41 0 6 4.58 10.59 0 12 1.41 6 7.41 0 1.41z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  line-height: 1.3;
}

/* Compact field variant for dense desktop rows */
.pm-field--compact input,
.pm-field--compact select {
  min-height: 40px;
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
}

.pm-form-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pm-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.pm-check-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* ---------- 6. Notes, Alerts & Feedback ---------- */
.pm-note,
.signin-alert,
.pm-page .note,
.payment-page .note,
.checkout-page .note {
  border-radius: var(--pm-radius-control, 10px);
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.45;
  border: 1px solid var(--pm-border-soft, #f0e9dd);
  border-left: 4px solid var(--pm-primary, #c6522d);
  background: var(--pm-surface-warm, #fbf7f1);
  color: var(--pm-ink, #1a1a1a);
  margin-bottom: 16px;
  box-sizing: border-box;
}

.pm-note--success,
.pm-note.good,
.signin-alert.success,
.pm-page .note.good,
.payment-page .note.good,
.checkout-page .note.good {
  background: var(--pm-success-soft, #e9f6ec);
  border-color: #cdebd4;
  border-left-color: var(--pm-success, #2c8a43);
  color: var(--pm-success-ink, #1d5c33);
}

.pm-note--warn,
.pm-note.warn,
.pm-page .note.warn,
.payment-page .note.warn,
.checkout-page .note.warn {
  background: var(--pm-warn-soft, #fdf3e3);
  border-color: #f3ddbd;
  border-left-color: var(--pm-warn, #b45309);
  color: var(--pm-warn-ink, #8a4a0b);
}

.pm-note--danger,
.pm-note.danger,
.signin-alert.error,
.pm-page .note.danger,
.payment-page .note.danger,
.checkout-page .note.danger {
  background: var(--pm-danger-soft, #fdecea);
  border-color: #f8d7da;
  border-left-color: var(--pm-danger, #b71c1c);
  color: var(--pm-danger-ink, #b71c1c);
}

.pm-note--info,
.pm-note.info,
.pm-page .note.info,
.payment-page .note.info {
  background: var(--pm-info-soft, #eef6ff);
  border-color: #d0e2ff;
  border-left-color: var(--pm-info, #1b4a7a);
  color: var(--pm-info-ink, #1b4a7a);
}

/* ---------- 7. Badges & Inset Pills ---------- */
.pm-badge,
.gp-badge,
.holiday-badge {
  display: inline-block;
  border-radius: var(--pm-radius-pill, 999px);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: var(--pm-weight-strong, 600);
  vertical-align: middle;
  background: #eee;
  color: var(--pm-ink, #1a1a1a);
  white-space: nowrap;
}

.pm-badge.admin, .pm-badge.active, .gp-badge.admin, .gp-badge.active {
  background: var(--pm-forest, #2c3e2f);
  color: #ffffff;
}

.pm-badge.default, .pm-badge.brand, .gp-badge.default {
  background: var(--pm-primary, #c6522d);
  color: #ffffff;
}

.pm-badge.beta, .gp-badge.beta {
  background: var(--pm-primary, #c6522d);
  color: #ffffff;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pm-badge.member, .gp-badge.member {
  background: #eeeeee;
  color: var(--pm-ink, #1a1a1a);
}

.pm-pill, .holiday-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--pm-surface-selected, #efe6db);
  border: 1px solid var(--pm-border, #e7dcce);
  border-radius: 14px;
  padding: 10px 14px 8px;
  font-weight: var(--pm-weight-strong, 600);
  color: var(--pm-ink, #1a1a1a);
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------- 8. Native FAQ Component (.pm-faq) ---------- */
.pm-faq {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pm-faq details {
  border-top: 1px solid var(--pm-border, #e7dcce);
  padding: 18px 0;
  box-sizing: border-box;
}

.pm-faq details:last-of-type {
  border-bottom: 1px solid var(--pm-border, #e7dcce);
}

.pm-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 18px;
  font-weight: var(--pm-weight-strong, 600);
  color: var(--pm-ink, #1a1a1a);
  list-style: none;
  user-select: none;
}

.pm-faq summary::-webkit-details-marker {
  display: none;
}

.pm-faq summary::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--pm-primary, #c6522d);
  border-bottom: 2px solid var(--pm-primary, #c6522d);
  transform: rotate(45deg);
  transition: transform var(--pm-transition, .15s ease);
  margin-left: 12px;
  flex: 0 0 auto;
}

.pm-faq details[open] summary::after {
  transform: rotate(-135deg);
}

.pm-faq-answer,
.pm-faq details p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pm-forest, #2c3e2f);
}

/* ---------- 9. Tables ---------- */
.pm-table, .gp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 6px 0;
}

.pm-table th, .gp-table th {
  text-align: left;
  border-bottom: 2px solid var(--pm-border, #e7dcce);
  padding: 8px 10px 10px;
  font-size: 12px;
  color: var(--pm-muted, #6f6a62);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: var(--pm-weight-strong, 600);
}

.pm-table td, .gp-table td {
  border-bottom: 1px solid var(--pm-border-soft, #f0e9dd);
  padding: 10px;
  vertical-align: middle;
}

.pm-table td.num, .gp-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pm-table tr.total td, .gp-table tr.total td {
  border-top: 2px solid var(--pm-border, #e7dcce);
  border-bottom: 0;
  font-weight: var(--pm-weight-strong, 600);
}

.pm-table tr:hover td, .gp-table tr:hover td {
  background: var(--pm-surface-warm, #fbf7f1);
}

.pm-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 10. Dialogs & Toasts (Detached Body Overlays) ---------- */
.pm-dialog-host.invisible {
  display: none !important;
}

.pm-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: var(--pm-overlay, rgba(0, 0, 0, 0.35));
}

.pm-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 701;
  width: calc(100% - 32px);
  max-width: 420px;
  background: var(--pm-surface, #ffffff);
  border-radius: var(--pm-radius-dialog, 16px);
  padding: 28px 24px;
  box-shadow: var(--pm-shadow-dialog, 0 20px 80px rgba(0, 0, 0, 0.18));
  box-sizing: border-box;
}

.pm-dialog h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: var(--pm-weight-strong, 600);
  color: var(--pm-ink, #1a1a1a);
}

.pm-dialog p {
  margin: 0 0 20px;
  color: var(--pm-muted, #6f6a62);
  font-size: 15px;
  line-height: 1.45;
  max-width: none;
}

.pm-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pm-dialog .pm-dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none !important;
  background: transparent !important;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--pm-muted, #6f6a62);
  padding: 0 4px;
  box-shadow: none;
  min-width: 0;
}
.pm-dialog .pm-dialog-close:hover {
  color: var(--pm-ink, #1a1a1a) !important;
}

/* Toast */
.pm-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-24px);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pm-surface, #ffffff);
  color: var(--pm-ink, #1a1a1a);
  border: 1px solid var(--pm-border, #e7dcce);
  border-left: 4px solid var(--pm-primary, #c6522d);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: var(--pm-shadow-toast, 0 18px 50px -10px rgba(0, 0, 0, 0.28));
  font-weight: var(--pm-weight-strong, 600);
  font-size: 15px;
  line-height: 1.3;
  max-width: calc(100vw - 32px);
  width: max-content;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  box-sizing: border-box;
}

.pm-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.pm-toast.dismissing {
  opacity: 0;
  transform: translateX(-50%) translateY(-24px);
}

.pm-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pm-primary, #c6522d);
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}
.pm-toast-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.pm-toast-icon .pm-dim {
  fill: currentColor;
}

.pm-toast-text {
  flex: 1 1 auto;
  min-width: 0;
}

.pm-toast .pm-toast-close {
  appearance: none;
  border: none !important;
  background: transparent !important;
  color: var(--pm-muted, #6f6a62);
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  margin: -4px 0 0 4px;
  cursor: pointer;
  font-weight: var(--pm-weight-strong, 600);
  box-shadow: none;
  min-width: 0;
}
.pm-toast .pm-toast-close:hover {
  color: var(--pm-ink, #1a1a1a) !important;
}

/* ---------- 11. Interface Icons & Tools ---------- */
.pm-pencil,
button.pm-pencil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 1px solid var(--pm-border, #e7dcce) !important;
  border-radius: 9px;
  background: #ffffff;
  color: var(--pm-primary, #c6522d);
  cursor: pointer;
  box-shadow: none;
  min-width: 0;
  flex: 0 0 auto;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color var(--pm-transition, .15s ease), color var(--pm-transition, .15s ease);
}

.pm-pencil:hover,
button.pm-pencil:hover {
  background: var(--pm-surface-hover, #f6efe6) !important;
  color: var(--pm-primary, #c6522d);
}

.pm-pencil svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.pm-tooltip, .tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  transform: translateY(4px);
}
.pm-tooltip .pm-info-icon, .tooltip .info-icon {
  width: 22px;
  height: 22px;
  color: var(--pm-primary, #c6522d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}
.pm-tooltip .pm-info-icon svg, .tooltip .info-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pm-tooltip .pm-info-icon .pm-dim, .tooltip .info-icon .pm-dim {
  fill: currentColor;
}

/* ---------- 12. Checkout & Wizard Geometry Preservation ---------- */
.checkout-page select,
.wizard select {
  height: auto;
  min-height: 40px;
}