/* Primary button — Easyride blue, one chamfered corner */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 0 30px;
  border: 0;
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  clip-path: var(--chamfer);
  position: relative;
  transition: background-color .2s ease;
}
.btn:hover { background: var(--c-brand-hover); color: var(--c-on-brand); }
/* The chamfer clips outside outlines, so the focus ring sits inside. */
.btn:focus-visible { outline: 2px solid var(--c-on-brand); outline-offset: -6px; }

/* Hover: a soft band of light sweeps across once (the chamfer clips it to the button). */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-110%);
  pointer-events: none;
}
.btn:not([aria-disabled="true"]):hover::after,
.btn:not([aria-disabled="true"]):focus-visible::after {
  transform: translateX(110%);
  transition: transform .65s ease;
}
@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
}

.btn[aria-disabled="true"] {
  background: var(--c-disabled);
  color: var(--c-muted);
  cursor: not-allowed;
}
.btn[aria-disabled="true"]:focus-visible { outline-color: var(--c-accent); }

/* Ghost / outline button */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 20px;
  background: transparent;
  border: 1px solid var(--c-accent);
  color: var(--c-text);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.btn-ghost:hover { background: var(--c-hover); }

/* Square icon button (close, menu, basket on phone) */
.icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-line-strong);
  color: var(--c-text);
  cursor: pointer;
}
.icon-btn:hover { background: var(--c-hover); }

/* Underlined text link with a blue rule */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-text-body);
  font-weight: 600;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
}
.text-link:hover { color: #FFFFFF; }

/* Stepper: [-] value [+] */
.stepper {
  display: flex;
  align-items: stretch;
  min-height: var(--control-h);
  border: 1px solid var(--c-line-strong);
}
.stepper button {
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--c-text);
  cursor: pointer;
}
.stepper button:hover { background: var(--c-step-hover); }
.stepper button:disabled { color: var(--c-line-strong); cursor: not-allowed; background: transparent; }
.stepper output {
  min-width: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--c-line-strong);
  border-right: 1px solid var(--c-line-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .stepper button { width: 56px; }
  .stepper output { flex: 1; }
}

/* Availability: label row + one cell per unit */
.availability-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-caption);
}
.availability-row span:first-child { color: var(--c-muted); }
.availability-row span:last-child { font-weight: 600; }
.availability-cells {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(var(--cells, 4), minmax(0, 1fr));
  gap: 4px;
}
.availability-cells span { height: 8px; background: var(--c-cell-off); }
.availability-cells span.is-on { background: var(--c-accent); }

/* Order row: stepper + add button */
.order-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.order-row .btn { flex: 1 1 200px; }
.order-note {
  margin: 14px 0 0;
  font-size: var(--fs-caption);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .order-row { display: grid; gap: 10px; }
  .order-note { margin-top: 12px; }
}