/* Civius button design system owner. Width is layout, not appearance. */

:root {
  --c-button-height-sm: 40px;
  --c-button-height-md: 48px;
  --c-button-height-lg: 52px;
  --c-button-height-xl: 55px;
  --c-button-radius-pill: 999px;
  --c-button-focus: rgba(23, 120, 255, 0.34);
  --c-button-motion-fast: 150ms;
  --c-button-motion: 180ms;
  --civius-border-highlight-duration: 200ms;
}

.c-button {
  --button-block-size: var(--c-button-height-sm);
  --button-inline-size: auto;
  --button-min-inline-size: 150px;
  --button-max-inline-size: 100%;
  --button-padding-start: 18px;
  --button-padding-end: 12px;
  --button-gap: var(--space-part, 15px);
  --button-border-width: 2px;
  --button-radius: var(--c-button-radius-pill);
  --button-font-size: 14px;
  --button-dot-size: 15px;
  --button-fill: #111827;
  --button-stroke: #111827;
  --button-text: var(--button-stroke);
  --button-hover-text: #fff;
  --button-dot-stroke: var(--button-stroke);
  --button-dot-fill: transparent;
  --button-dot-hover-fill: #fff;
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  inline-size: var(--button-inline-size);
  min-inline-size: var(--button-min-inline-size);
  max-inline-size: var(--button-max-inline-size);
  min-block-size: var(--button-block-size);
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  padding: 0 var(--button-padding-end) 0 var(--button-padding-start);
  overflow: hidden;
  border: var(--button-border-width) solid var(--button-stroke);
  border-radius: var(--button-radius);
  background: #fff;
  color: var(--button-text);
  cursor: pointer;
  font-family: var(--font-head, "Montserrat Alternates", "Onest", Arial, sans-serif);
  font-size: var(--button-font-size);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  isolation: isolate;
  appearance: none;
  touch-action: manipulation;
  transition:
    color var(--c-button-motion) ease,
    border-color var(--c-button-motion) ease,
    background-color var(--c-button-motion) ease,
    box-shadow var(--c-button-motion) ease,
    opacity var(--c-button-motion) ease;
}

.c-button--dot {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) var(--button-dot-size);
  justify-content: space-between;
}

.c-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--button-fill);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--c-button-motion-fast) ease;
}

.c-button:hover::before,
.c-button:focus-visible::before {
  transform: scaleX(1);
}

.c-button:hover,
.c-button:focus-visible {
  color: var(--button-hover-text);
}

.c-button:focus-visible {
  outline: 2px solid var(--c-button-focus);
  outline-offset: 3px;
}

.c-button > span,
.c-button > i {
  position: relative;
  z-index: 1;
}

.c-button > span {
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-button > i {
  justify-self: end;
  width: var(--button-dot-size);
  height: var(--button-dot-size);
  border: 0;
  border-radius: 50%;
  background: var(--button-dot-fill);
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-dot-stroke);
  transition: background-color var(--c-button-motion-fast) ease, box-shadow var(--c-button-motion-fast) ease;
}

.c-button:hover > i,
.c-button:focus-visible > i {
  background: var(--button-dot-hover-fill);
}

.c-button--brand {
  --button-fill: var(--blue, #1778ff);
  --button-stroke: var(--blue, #1778ff);
  --button-dot-stroke: var(--blue, #1778ff);
}

.c-button--neutral {
  --button-fill: #111827;
  --button-stroke: #111827;
  --button-dot-stroke: #111827;
}

.c-button--muted {
  --button-fill: #5b5b5b;
  --button-stroke: #d6d6d6;
  --button-text: #555;
  --button-dot-stroke: #d6d6d6;
}

.c-button--danger {
  --button-fill: #dc2626;
  --button-stroke: #dc2626;
  --button-dot-stroke: #dc2626;
}

.c-button--soft {
  --button-fill: #fff;
  --button-stroke: #64748b;
  --button-text: #64748b;
  --button-hover-text: #111827;
  --button-min-inline-size: 0;
  --button-padding-start: 18px;
  --button-padding-end: 18px;
  background: #f8fbff;
}

.c-button--soft::before { content: none; }

.c-button--soft:hover,
.c-button--soft:focus-visible {
  border-color: #94a3b8;
  background: #fff;
}

.c-button--md {
  --button-block-size: var(--c-button-height-md);
  --button-min-inline-size: 0;
  --button-padding-start: 18px;
  --button-padding-end: 18px;
  --button-font-size: 15px;
  --button-dot-size: 18px;
}

.c-button--lg {
  --button-block-size: var(--c-button-height-lg);
  --button-min-inline-size: 228px;
  --button-padding-start: 20px;
  --button-padding-end: 20px;
  --button-font-size: 21px;
  --button-dot-size: 22px;
}

.c-button--xl {
  --button-block-size: var(--c-button-height-xl);
  --button-min-inline-size: 242px;
  --button-padding-start: 22px;
  --button-padding-end: 22px;
  --button-font-size: 22px;
  --button-dot-size: 22px;
}

.c-button--brief {
  --button-inline-size: fit-content;
  --button-min-inline-size: 178px;
  margin-top: 2px;
}

.c-button--compact {
  --button-inline-size: fit-content;
  --button-min-inline-size: 150px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.c-button--home {
  background: linear-gradient(var(--button-fill), var(--button-fill)) right center / 0 100% no-repeat, #fff;
  transition: color 200ms ease, background-size 130ms ease, border-color var(--c-button-motion) ease, box-shadow var(--c-button-motion) ease;
}

.c-button--home::before { content: none; }

.c-button--home:hover,
.c-button--home:focus-visible {
  background-size: 100% 100%, auto;
}

.c-button--card-mini {
  --button-inline-size: 100%;
  --button-min-inline-size: 0;
  --button-block-size: 39px;
  --button-padding-start: 12px;
  --button-padding-end: 6px;
  --button-font-size: 13px;
  --button-hover-text: #4b5563;
}

.c-button--card-mini::before { content: none; }

/* Semantic role for links that form the action row/footer of a content card.
   The visual size remains owned by --card-mini; page CSS only places the link. */
.c-button--card-link {
  text-decoration: none;
}

.c-button--more {
  --button-inline-size: 100%;
  --button-min-inline-size: 0;
  --button-block-size: 42px;
  --button-border-width: 1px;
  --button-stroke: var(--line, #d7dde7);
  --button-text: #64748b;
  --button-padding-start: 18px;
  --button-padding-end: 18px;
  --button-font-size: 13px;
}

.c-button--full { --button-inline-size: 100%; }
.c-button--fit { --button-inline-size: fit-content; }

/* New Civius button skin, adapted from C:\Users\markl\Desktop\civius-buttons.html.
   Markup contract stays stable: .c-button > span is label, .c-button > i is the right icon chip. */
.c-button {
  --civius-button-blue: var(--blue, var(--civius-blue, #0177ff));
  --civius-button-cyan: #00d4ff;
  --button-block-size: clamp(46px, 5vw, 58px);
  --button-min-inline-size: max(150px, min-content);
  --button-gap: calc(var(--button-block-size) * 0.34);
  --button-padding-start: calc(var(--button-block-size) * 0.34);
  --button-padding-end: calc((var(--button-block-size) - var(--button-icon-chip-size)) / 2);
  --button-font-size: clamp(14px, 1.5vw, 17px);
  --button-font-weight: 600;
  --button-letter-spacing: -0.04em;
  --button-radius: var(--radius-size, calc(var(--button-block-size) * 0.345));
  --button-radius-hover: var(--radius-hover-size, calc(var(--button-block-size) / 2));
  --button-icon-chip-size: calc(var(--button-block-size) * 0.62);
  --button-icon-size: calc(var(--button-icon-chip-size) * 0.54);
  --button-icon-radius: calc(var(--button-icon-chip-size) * 0.28);
  --button-icon-radius-hover: 50%;
  --button-arrow-rotate: -45deg;
  --button-icon-border: var(--button-stroke);
  --button-icon-border-width: 2px;
  --button-stroke-light: var(--button-stroke);
  --button-stroke-dark: var(--button-stroke);
  --button-stroke-rest: linear-gradient(135deg, var(--button-stroke-light) 0%, var(--button-stroke-dark) 100%);
  --button-stroke-hover: linear-gradient(135deg, var(--civius-button-blue) 0%, var(--civius-button-cyan) 100%);
  --button-icon-stroke-rest: var(--button-stroke-rest);
  --button-stroke-alpha: 0;
  --button-icon-cover-scale: 2.15;
  --button-icon-color-delay: 0ms;
  --button-icon-radial-duration: var(--button-morph-duration);
  --button-icon-cover-duration: var(--button-morph-duration);
  --button-fill: #fff;
  --button-text: #151515;
  --button-hover-text: var(--civius-button-blue);
  --button-icon-rest-fill: #fff;
  --button-inner-static:
    inset 0 calc(var(--button-block-size) * -0.026) calc(var(--button-block-size) * 0.038) rgba(255, 255, 255, 0.66),
    inset 0 calc(var(--button-block-size) * 0.052) calc(var(--button-block-size) * 0.105) rgba(0, 0, 0, 0.036),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 calc(var(--button-block-size) * 0.12) calc(var(--button-block-size) * 0.24) rgba(0, 0, 0, 0.052);
  --button-inner-hover:
    inset 0 calc(var(--button-block-size) * 0.122) calc(var(--button-block-size) * 0.230) rgba(0, 0, 0, 0.10),
    inset 0 calc(var(--button-block-size) * -0.014) calc(var(--button-block-size) * 0.014) rgba(255, 255, 255, 0.76),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 calc(var(--button-block-size) * 0.12) calc(var(--button-block-size) * 0.24) rgba(0, 0, 0, 0.052);
  --button-morph-duration: 320ms;
  --button-morph-ease: cubic-bezier(0.33, 0, 0.18, 1);
  --button-press-scale: 0.92;
  display: inline-flex;
  inline-size: var(--button-inline-size);
  min-inline-size: var(--button-min-inline-size);
  max-inline-size: var(--button-max-inline-size);
  min-block-size: var(--button-block-size);
  align-items: center;
  justify-content: space-between;
  gap: var(--button-gap);
  padding: 0 var(--button-padding-end) 0 var(--button-padding-start);
  overflow: hidden;
  border: var(--button-border-width) solid transparent;
  border-radius: var(--button-radius);
  background: linear-gradient(var(--button-fill), var(--button-fill)) padding-box;
  box-shadow: var(--button-inner-static);
  color: var(--button-text);
  font-family: var(--font-head, var(--civius-heading-font, "Montserrat Alternates", "Onest", Arial, sans-serif));
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  letter-spacing: var(--button-letter-spacing);
  text-align: left;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: border-radius, transform;
  transition:
    border-radius var(--button-morph-duration) var(--button-morph-ease),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1),
    background var(--button-morph-duration) var(--button-morph-ease),
    color 240ms ease,
    opacity var(--c-button-motion) ease;
}

.c-button:hover,
.c-button:focus-visible,
.c-button.is-hovering,
.c-button.is-pressing,
.c-button:active {
  --button-stroke-alpha: 1;
  border-radius: var(--button-radius-hover);
  background: linear-gradient(#fff, #fbfbfb) padding-box;
  box-shadow: var(--button-inner-hover);
  color: var(--button-hover-text);
}

.c-button.is-pressing,
.c-button:active {
  transform: translate3d(0, 0, 0) scale(var(--button-press-scale));
  transition:
    border-radius var(--button-morph-duration) var(--button-morph-ease),
    transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1),
    background var(--button-morph-duration) var(--button-morph-ease),
    color 240ms ease;
}

.c-button.is-releasing {
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    transform 550ms cubic-bezier(0.16, 1, 0.3, 1),
    border-radius var(--button-morph-duration) var(--button-morph-ease),
    box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.c-button::before,
.c-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  padding: var(--button-border-width);
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition:
    opacity var(--civius-border-highlight-duration) ease,
    border-radius var(--button-morph-duration) var(--button-morph-ease);
}

.c-button::before {
  background: var(--button-stroke-rest);
  opacity: 1;
  transform: none;
  transform-origin: center;
}

.c-button::after {
  background: var(--button-stroke-hover);
  opacity: var(--button-stroke-alpha);
  will-change: opacity;
}

.c-button:hover::before,
.c-button:focus-visible::before {
  transform: none;
}

.c-button:hover::after,
.c-button:focus-visible::after,
.c-button.is-hovering::after,
.c-button.is-pressing::after,
.c-button:active::after {
  opacity: 1;
}

.c-button.is-releasing::after,
.c-button.is-accent-releasing::after {
  opacity: 0;
}

.c-button > span,
.c-button > i {
  position: relative;
  z-index: 1;
}

.c-button > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    color 240ms ease,
    opacity 180ms ease,
    filter 180ms ease;
}

.c-button > i {
  position: relative;
  display: inline-grid;
  box-sizing: border-box;
  width: var(--button-icon-chip-size);
  height: var(--button-icon-chip-size);
  flex: 0 0 var(--button-icon-chip-size);
  margin-left: auto;
  place-items: center;
  overflow: hidden;
  border: var(--button-icon-border-width) solid transparent;
  border-radius: var(--button-icon-radius);
  background:
    linear-gradient(var(--civius-button-blue), var(--civius-button-blue)) padding-box,
    var(--button-icon-stroke-rest) border-box;
  box-shadow: 0 calc(var(--button-icon-chip-size) * 0.026) 0 rgba(0, 0, 0, 0.05);
  color: currentColor;
  transition:
    border-radius var(--button-morph-duration) var(--button-morph-ease),
    border-color 240ms ease,
    background var(--button-morph-duration) var(--button-morph-ease),
    color 240ms ease var(--button-icon-color-delay),
    box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.c-button > i::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  border-radius: inherit;
  background: var(--button-icon-rest-fill);
  opacity: 1;
  pointer-events: none;
  transform: scale(var(--button-icon-cover-scale));
  transform-origin: center;
  transition:
    transform var(--button-icon-cover-duration) var(--button-morph-ease),
    opacity 120ms ease,
    border-radius var(--button-morph-duration) var(--button-morph-ease);
}

.c-button > i::after {
  content: "";
  position: relative;
  z-index: 4;
  display: block;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(var(--button-arrow-rotate));
  transition:
    background-color 240ms ease,
    transform var(--button-morph-duration) var(--button-morph-ease),
    color 240ms ease;
}

.c-button__svg {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 4;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(var(--button-arrow-rotate));
  transform-origin: center;
  transition:
    opacity var(--button-icon-radial-duration) var(--button-morph-ease),
    clip-path var(--button-icon-radial-duration) var(--button-morph-ease),
    transform var(--button-morph-duration) var(--button-morph-ease),
    color 240ms ease;
}

.c-button__svg--base {
  color: currentColor;
  opacity: 1;
  clip-path: circle(80% at 50% 50%);
}

.c-button__svg--radial {
  color: #fff;
  stroke: #fff;
  opacity: 0;
  clip-path: circle(0% at 50% 50%);
}

.c-button:hover > i,
.c-button:focus-visible > i,
.c-button.is-hovering > i,
.c-button.is-pressing > i,
.c-button:active > i {
  --button-icon-color-delay: 0ms;
  --button-icon-cover-duration: var(--button-icon-radial-duration);
  border-radius: var(--button-icon-radius-hover);
  background:
    linear-gradient(var(--civius-button-blue), var(--civius-button-blue)) padding-box,
    var(--button-stroke-hover) border-box;
  box-shadow: none;
  color: #fff;
}

.c-button:hover > i::before,
.c-button:focus-visible > i::before,
.c-button.is-hovering > i::before,
.c-button.is-pressing > i::before,
.c-button:active > i::before {
  opacity: 0;
  transform: scale(0);
}

.c-button:hover .c-button__svg--base,
.c-button:focus-visible .c-button__svg--base,
.c-button.is-hovering .c-button__svg--base,
.c-button.is-pressing .c-button__svg--base,
.c-button:active .c-button__svg--base {
  opacity: 0;
  clip-path: circle(0% at 50% 50%);
}

.c-button:hover .c-button__svg--radial,
.c-button:focus-visible .c-button__svg--radial,
.c-button.is-hovering .c-button__svg--radial,
.c-button.is-pressing .c-button__svg--radial,
.c-button:active .c-button__svg--radial {
  opacity: 1;
  clip-path: circle(80% at 50% 50%);
}

.c-button.is-releasing > i {
  border-radius: var(--button-icon-radius);
  background:
    linear-gradient(var(--civius-button-blue), var(--civius-button-blue)) padding-box,
    var(--button-icon-stroke-rest) border-box;
  box-shadow: 0 calc(var(--button-icon-chip-size) * 0.026) 0 rgba(0, 0, 0, 0.05);
  color: inherit;
}

.c-button.is-releasing > i::before {
  opacity: 1;
  transform: scale(var(--button-icon-cover-scale));
}

.c-button.is-releasing .c-button__svg--base {
  opacity: 1;
  clip-path: circle(80% at 50% 50%);
}

.c-button.is-releasing .c-button__svg--radial {
  opacity: 0;
  clip-path: circle(0% at 50% 50%);
}

.c-button--brand {
  --button-text: var(--civius-button-blue);
  --button-hover-text: var(--civius-button-blue);
  --button-stroke: var(--civius-button-blue);
  --button-stroke-light: var(--civius-button-blue);
  --button-stroke-dark: var(--civius-button-blue);
  --button-stroke-rest: linear-gradient(135deg, var(--civius-button-blue), var(--civius-button-blue));
  --button-icon-stroke-rest: linear-gradient(135deg, var(--civius-button-blue), var(--civius-button-cyan));
  --button-icon-border: var(--civius-button-blue);
}

.c-button--neutral {
  --button-text: #151515;
  --button-hover-text: var(--civius-button-blue);
  --button-stroke: #111;
  --button-stroke-light: #111;
  --button-stroke-dark: #555;
  --button-icon-stroke-rest: linear-gradient(135deg, #111 0%, #555 100%);
  --button-icon-border: #111;
}

.c-button--muted,
.c-button--soft {
  --button-text: #555;
  --button-hover-text: var(--civius-button-blue);
  --button-arrow-rotate: 0deg;
  --button-stroke: #c2c2c2;
  --button-stroke-light: #ebebeb;
  --button-stroke-dark: #c2c2c2;
  --button-stroke-rest: linear-gradient(135deg, #ebebeb 0%, #b8b8b8 100%);
  --button-icon-stroke-rest: linear-gradient(135deg, #ebebeb 0%, #b8b8b8 100%);
  --button-icon-border: #c2c2c2;
  --button-icon-rest-fill: #fff;
  --button-fill: #fff;
}

.c-button--danger {
  --button-text: #dc2626;
  --button-hover-text: #dc2626;
  --button-stroke: #dc2626;
  --button-stroke-light: #dc2626;
  --button-stroke-dark: #dc2626;
  --button-stroke-hover: linear-gradient(135deg, #dc2626 0%, #ff8a8a 100%);
  --button-icon-stroke-rest: linear-gradient(135deg, #dc2626 0%, #ff8a8a 100%);
  --button-icon-border: #dc2626;
}

.c-button--sm,
.c-button--card-mini,
.c-button--more {
  --button-block-size: clamp(38px, 3.9vw, 46px);
  --button-font-size: clamp(11px, 1.05vw, 12px);
  --button-border-width: 2px;
  --button-font-weight: 600;
}

.c-button--card-mini,
.c-button--more {
  --button-block-size: 39px;
  --button-font-size: 13px;
  --button-border-width: 1px;
  --button-arrow-rotate: 0deg;
  --button-stroke-rest: linear-gradient(135deg, #ebebeb 0%, #b8b8b8 100%);
  --button-icon-stroke-rest: linear-gradient(135deg, #ebebeb 0%, #b8b8b8 100%);
  --button-icon-border: #c2c2c2;
  --button-icon-rest-fill: #fff;
  --button-hover-text: var(--civius-button-blue);
}

.c-button--card-mini > i,
.c-button--more > i,
.c-button--sm > i {
  --button-icon-border-width: 1.5px;
}

.c-button--micro {
  --button-block-size: clamp(30px, 3vw, 36px);
  --button-font-size: clamp(11px, 1vw, 12px);
  --button-border-width: 1px;
  --button-font-weight: 500;
}

.c-button--micro > i {
  --button-icon-border-width: 1px;
}

.c-button--md {
  --button-block-size: clamp(46px, 5vw, 58px);
  --button-font-size: clamp(14px, 1.5vw, 17px);
}

.c-button--lg {
  --button-block-size: clamp(56px, 6.4vw, 74px);
  --button-font-size: clamp(17px, 1.95vw, 22px);
}

.c-button--xl {
  --button-block-size: clamp(56px, 6.4vw, 74px);
  --button-font-size: clamp(17px, 1.95vw, 22px);
}

.c-button--store-summary {
  --button-block-size: 43px;
  --button-min-inline-size: 0;
  --button-font-size: 14px;
  --button-font-weight: 600;
  --button-padding-start: 18px;
  --button-padding-end: 6px;
  --button-icon-chip-size: 31px;
  --button-icon-size: 17px;
  --button-icon-radius: 9px;
  --button-radius: 14px;
  --button-radius-hover: 22px;
}

@media (hover: none) and (pointer: coarse) {
  .c-button {
    --button-morph-duration: 280ms;
    --button-morph-ease: cubic-bezier(0.28, 0, 0.18, 1);
    --button-touch-accent-in-duration: 360ms;
    --button-touch-accent-out-duration: 550ms;
    --button-touch-accent-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .c-button:hover,
  .c-button.is-hovering,
  .c-button.is-pressing,
  .c-button:active {
    --button-stroke-alpha: 0;
  }

  .c-button:hover::after,
  .c-button.is-hovering::after,
  .c-button.is-pressing::after,
  .c-button:active::after {
    opacity: 0;
  }

  .c-button.is-hovering:not(.is-accenting),
  .c-button.is-pressing:not(.is-accenting),
  .c-button:active:not(.is-accenting) {
    color: var(--button-text);
  }

  .c-button.is-accenting {
    --button-stroke-alpha: 1;
    color: var(--button-hover-text);
  }

  .c-button.is-accenting::after {
    opacity: 1;
  }

  .c-button.is-accent-releasing {
    --button-stroke-alpha: 0;
  }

  .c-button.is-releasing {
    --button-stroke-alpha: 0;
    border-radius: var(--button-radius);
    background: linear-gradient(var(--button-fill), var(--button-fill)) padding-box;
    box-shadow: var(--button-inner-static);
    color: var(--button-text);
  }

  .c-button > span,
  .c-button__svg {
    transition:
      color var(--button-touch-accent-in-duration) var(--button-touch-accent-ease),
      opacity 180ms ease,
      clip-path var(--button-morph-duration) var(--button-morph-ease),
      transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .c-button.is-releasing > span,
  .c-button.is-releasing .c-button__svg {
    transition:
      color var(--button-touch-accent-out-duration) var(--button-touch-accent-ease),
      opacity 180ms ease,
      clip-path var(--button-morph-duration) var(--button-morph-ease),
      transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .c-button:hover:not(:active):not(.is-hovering):not(.is-pressing):not(.is-releasing):not(.is-accenting):not(.is-accent-releasing) {
    --button-stroke-alpha: 0;
    border-radius: var(--button-radius);
    box-shadow: var(--button-inner-static);
    color: var(--button-text);
    transform: translate3d(0, 0, 0) scale(1);
  }

  .c-button:hover:not(:active):not(.is-hovering):not(.is-pressing):not(.is-releasing):not(.is-accenting):not(.is-accent-releasing) > i {
    border-radius: var(--button-icon-radius);
    color: inherit;
  }

  .c-button:hover:not(:active):not(.is-hovering):not(.is-pressing):not(.is-releasing):not(.is-accenting):not(.is-accent-releasing) > i::before {
    opacity: 1;
    transform: scale(var(--button-icon-cover-scale));
  }

  .c-button:hover:not(:active):not(.is-hovering):not(.is-pressing):not(.is-releasing):not(.is-accenting):not(.is-accent-releasing) .c-button__svg--base {
    opacity: 1;
    clip-path: circle(80% at 50% 50%);
  }

  .c-button:hover:not(:active):not(.is-hovering):not(.is-pressing):not(.is-releasing):not(.is-accenting):not(.is-accent-releasing) .c-button__svg--radial {
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
  }
}

.c-button[disabled],
.c-button[aria-disabled="true"],
.c-button.is-loading {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}

.c-button.is-loading { color: transparent; }

.c-button.is-loading::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--button-stroke);
  animation: civius-button-spin 700ms linear infinite;
}

.c-button-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--button-group-gap, var(--space-part, 15px));
}

.c-button-group--equal > .c-button {
  flex: 1 1 0;
  --button-inline-size: 100%;
}

:where(.c-icon-button) {
  --icon-button-inline-size: auto;
  --icon-button-block-size: auto;
  --icon-button-padding: 0;
  --icon-button-border-width: 2px;
  --icon-button-border-style: solid;
  --icon-button-border-color: transparent;
  --icon-button-radius: 14px;
  --icon-button-radius-hover: 50%;
  --icon-button-fill: #fff;
  --icon-button-color: #151515;
  --icon-button-hover-color: var(--civius-button-blue, var(--blue, #0177ff));
  --icon-button-stroke-rest: linear-gradient(135deg, #ebebeb 0%, #b8b8b8 100%);
  --icon-button-stroke-hover: linear-gradient(135deg, var(--civius-button-blue, var(--blue, #0177ff)) 0%, #00d4ff 100%);
  --icon-button-bg: var(--icon-button-fill);
  --icon-button-hover-bg: var(--icon-button-hover-fill);
  --icon-button-shadow:
    inset 0 -1px 1px rgba(255, 255, 255, 0.66),
    inset 0 2px 4px rgba(0, 0, 0, 0.036),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 6px 14px rgba(0, 0, 0, 0.052);
  --icon-button-hover-shadow:
    inset 0 5px 10px rgba(0, 0, 0, 0.10),
    inset 0 -1px 1px rgba(255, 255, 255, 0.76),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 6px 14px rgba(0, 0, 0, 0.052);
  --icon-button-hover-fill: var(--icon-button-fill);
  --icon-button-hover-border-color: var(--icon-button-border-color);
  --icon-button-press-scale: 0.92;
  position: relative;
  display: inline-grid;
  box-sizing: border-box;
  place-items: center;
  flex: 0 0 auto;
  inline-size: var(--icon-button-inline-size);
  block-size: var(--icon-button-block-size);
  padding: var(--icon-button-padding);
  border-width: var(--icon-button-border-width);
  border-style: var(--icon-button-border-style);
  border-color: var(--icon-button-border-color);
  border-radius: var(--icon-button-radius);
  background: var(--icon-button-bg);
  isolation: isolate;
  overflow: hidden;
  color: var(--icon-button-color);
  box-shadow: var(--icon-button-shadow);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  text-decoration: none;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition:
    border-radius 280ms cubic-bezier(0.33, 0, 0.18, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 280ms cubic-bezier(0.33, 0, 0.18, 1),
    color 180ms ease,
    box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity var(--c-button-motion) ease;
  appearance: none;
  touch-action: manipulation;
}

:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button)::before,
:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  padding: var(--icon-button-border-width);
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition:
    opacity var(--civius-border-highlight-duration) ease,
    border-radius 280ms cubic-bezier(0.33, 0, 0.18, 1);
}

:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button)::before {
  background: var(--icon-button-stroke-rest);
  opacity: 1;
}

:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button)::after {
  background: var(--icon-button-stroke-hover);
  opacity: 0;
  will-change: opacity;
}

.c-icon-button > svg,
.c-icon-button > span {
  position: relative;
  z-index: 1;
}

.civius-site .civius-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.c-icon-button--xs { --icon-button-inline-size: 32px; --icon-button-block-size: 32px; }
.c-icon-button--sm { --icon-button-inline-size: 34px; --icon-button-block-size: 34px; }
.c-icon-button--md { --icon-button-inline-size: 39px; --icon-button-block-size: 39px; }
.c-icon-button--lg { --icon-button-inline-size: 52px; --icon-button-block-size: 52px; }

/* Service-card icon actions are a dedicated component variant. Page styles may
   change only its dimensions (for responsive layout and the cart stepper). */
.c-icon-button--card-action {
  --icon-button-inline-size: 39px;
  --icon-button-block-size: 39px;
  --icon-button-radius: 14px;
  --icon-button-radius-hover: 16.38px;
  --icon-button-stroke-rest: linear-gradient(135deg, #ebebeb 0%, #b8b8b8 100%);
  --icon-button-stroke-hover: linear-gradient(135deg, var(--civius-button-blue, var(--blue, #0177ff)) 0%, #00d4ff 100%);
  --icon-button-shadow: none;
  --icon-button-hover-shadow: none;
  --icon-button-press-scale: 0.88;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--icon-button-inline-size);
  inline-size: var(--icon-button-inline-size);
  min-inline-size: var(--icon-button-block-size);
  max-inline-size: none;
  block-size: var(--icon-button-block-size);
  min-block-size: var(--icon-button-block-size);
  max-block-size: var(--icon-button-block-size);
  border: var(--icon-button-border-width) solid transparent;
  border-radius: var(--icon-button-radius);
  background: var(--icon-button-bg);
  color: var(--icon-button-color);
  box-shadow: none;
  filter: none;
  font-size: 0;
  backface-visibility: hidden;
  contain: paint;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    border-radius 280ms cubic-bezier(0.33, 0, 0.18, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 280ms cubic-bezier(0.33, 0, 0.18, 1),
    color 180ms ease,
    opacity var(--c-button-motion) ease;
}

.c-icon-button--card-action > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  shape-rendering: geometricPrecision;
  backface-visibility: hidden;
}

.c-icon-button--card-action > svg path,
.c-icon-button--card-action > svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button):hover,
:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button):focus-visible,
:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button).is-hovering,
:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button).is-pressing {
  border-color: var(--icon-button-hover-border-color);
  border-radius: var(--icon-button-radius-hover);
  background: var(--icon-button-hover-bg);
  color: var(--icon-button-hover-color);
  box-shadow: var(--icon-button-hover-shadow);
}

:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button):hover::after,
:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button):focus-visible::after,
:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button).is-hovering::after,
:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button).is-pressing::after {
  opacity: 1;
}

:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button).is-pressing,
:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button):active {
  transform: translate3d(0, 0, 0) scale(var(--icon-button-press-scale));
}

:where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button).is-releasing {
  transform: translate3d(0, 0, 0) scale(1);
}

@media (hover: none) and (pointer: coarse) {
  :where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button).is-releasing {
    border-radius: var(--icon-button-radius);
    background: var(--icon-button-bg);
    color: var(--icon-button-color);
    box-shadow: var(--icon-button-shadow);
  }

  :where(.c-icon-button):not(.civius-glass-nav__action):not(.services-mobile-dot):not(.civius-quantity-step-button).is-releasing::after {
    opacity: 0;
  }
}

.c-icon-button--card-action.is-active,
.c-icon-button--card-action[aria-pressed="true"] {
  --icon-button-stroke-rest: var(--icon-button-stroke-hover);
  border-radius: var(--icon-button-radius-hover);
  background: var(--icon-button-hover-bg);
  color: var(--icon-button-hover-color);
  box-shadow: none;
  filter: none;
}

.c-icon-button--card-action.is-active::after,
.c-icon-button--card-action[aria-pressed="true"]::after,
.c-icon-button--card-action.is-active.is-releasing::after,
.c-icon-button--card-action[aria-pressed="true"].is-releasing::after {
  opacity: 1;
}

.c-icon-button--card-action.is-active.is-releasing,
.c-icon-button--card-action[aria-pressed="true"].is-releasing {
  border-radius: var(--icon-button-radius-hover);
  background: var(--icon-button-hover-bg);
  color: var(--icon-button-hover-color);
  box-shadow: none;
}

/* Compound controls share accessibility/reset behavior but keep local mechanics. */
:where(.c-button-control) {
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
}

:where(.c-button-control):focus-visible {
  outline: 2px solid var(--c-button-focus);
  outline-offset: 3px;
}

:where(.c-button-control)[disabled],
:where(.c-button-control)[aria-disabled="true"] {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

.c-icon-button:focus-visible {
  outline: 2px solid var(--c-button-focus);
  outline-offset: 3px;
}

.c-icon-button[disabled],
.c-icon-button[aria-disabled="true"] {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

@keyframes civius-button-spin { to { transform: rotate(1turn); } }

@media (max-width: 760px) {
  .c-button--home {
    --button-block-size: 48px;
    --button-min-inline-size: 0;
    --button-padding-start: 12px;
    --button-padding-end: 12px;
    --button-gap: 10px;
    --button-font-size: 15px;
    --button-dot-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-button,
  .c-button::before,
  .c-button > i,
  .c-icon-button {
    transition-duration: 1ms;
  }

  .c-button.is-loading::after { animation-duration: 1.4s; }
}