/* One button contract. Markup declares ui-button plus its role and optional variant. */
:root {
  --button-radius:var(--radius-control); --button-font:var(--text-label);
  --button-height:var(--control-height); --button-gap:18px; --button-padding:12px 18px;
  --button-ink:#e7f0f5; --button-surface:#14232c; --button-border:#718b9a80;
  --button-hover:#223944; --button-hover-border:#a7c1ce; --button-hover-ink:var(--button-ink);
}
.ui-button {
  display:inline-flex; align-items:center; justify-content:space-between;
  min-width:0; min-height:var(--button-height); max-width:100%;
  gap:var(--button-gap); padding:var(--button-padding);
  border:1px solid var(--button-border); border-radius:var(--button-radius);
  background:var(--button-surface); color:var(--button-ink);
  font-family:var(--font-body); font-size:var(--button-font); font-weight:500;
  line-height:1.35; letter-spacing:0; text-align:left; text-decoration:none;
  cursor:pointer; vertical-align:middle; box-shadow:inset 0 1px #ffffff05;
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s;
}
.ui-button>svg { width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ui-button>.button-icon { flex:0 0 20px; width:20px; text-align:center; font-size:20px; line-height:1; }
.btn-orange {
  --button-surface:var(--action-primary); --button-border:var(--action-primary-border); --button-ink:var(--action-primary-ink);
  --button-hover:var(--action-primary-hover); --button-hover-border:var(--action-primary-hover-border); --button-hover-ink:var(--action-primary-ink);
}
.control-button { justify-content:center; text-align:center; }
:is(.control-button,.compare-button):is([aria-pressed="true"],[aria-selected="true"],[data-selected="true"]),details[open]>.control-button {
  --button-surface:var(--action-selected); --button-border:var(--action-primary); --button-ink:var(--action-selected-ink);
  --button-hover:var(--action-selected); --button-hover-border:var(--action-primary); --button-hover-ink:var(--action-selected-ink);
}
.control-button:is([aria-pressed="true"],[aria-selected="true"],[data-selected="true"]),details[open]>.control-button { box-shadow:inset 0 -2px var(--action-primary); }
.compare-button[aria-pressed="true"] { --button-hover:#304b5b; --button-hover-border:#ffbf94; }
.control-button.light-switch[aria-pressed="true"] {
  --button-surface:#153d30; --button-border:#458f6b; --button-ink:#b8f4cf;
  --button-hover:#1d503d; --button-hover-border:#69bc90; --button-hover-ink:#d4ffe5; box-shadow:none;
}
.control-button:focus-visible { outline-offset:3px; }
@media (hover:hover) {
  .ui-button:where(:not(:disabled):not([aria-disabled="true"])):hover { background:var(--button-hover); border-color:var(--button-hover-border); color:var(--button-hover-ink); }
}
.ui-button:where(:not(:disabled):not([aria-disabled="true"])):active { box-shadow:inset 0 2px 5px #0003; }
.ui-button:is(:disabled,[aria-disabled="true"]) { opacity:.5; cursor:not-allowed; }
.ui-button.icon-button { width:var(--control-icon-size); min-width:var(--control-icon-size); height:var(--control-icon-size); min-height:var(--control-icon-size); padding:10px; flex-shrink:0; }
/* Surface and compact-size variants are inherited; component files own placement. */
:where(.tech-paper) { --button-ink:#21333d; --button-hover-ink:#21333d; --button-surface:#ffffff66; --button-border:#526d7a80; --button-hover:#fff; }
:where(.klio-object) { --button-surface:#f0f3f3; --button-ink:#21333d; --button-hover-ink:#21333d; --button-border:#526d7a80; --button-hover:#e2eaed; }
:where(.header-inner,.compare-tray,.mobile-product-action,.comparison-actions) { --button-height:44px; --button-font:var(--text-caption); --button-gap:var(--space-3); --button-padding:11px 14px; }
@media(max-width:760px) {
  :root { --button-font:var(--text-caption); --button-gap:var(--space-3); --button-padding:12px 14px; }
  .header-inner { --button-font:11px; --button-gap:var(--space-2); --button-padding:10px 12px; }
  .comparison-actions { --button-font:11px; --button-gap:6px; --button-padding:10px 8px; }
}
@media(max-width:360px) { .header-inner { --button-font:10px; --button-gap:6px; --button-padding:10px 9px; } }