/* Corner radii — Dositec's most distinctive visual trait is the very large
   pill radius on cards and buttons, taken literally from the site CSS:
   product card 60px (70px on hover), card image 60px 60px 0 0,
   button 30px, header CTA pill 20px. */
:root {
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --radius-button: 30px;
  --radius-chip: 20px;
  /* 60px es el 14% de una tarjeta de 424px (desktop) pero el 19% de una de 311px
     (movil), donde se come la foto por las esquinas. Escala sola, sin @media. */
  --radius-card: clamp(28px, 16.73px + 3.01vw, 60px);
  --radius-card-hover: calc(var(--radius-card) + 10px);
  --radius-card-image: var(--radius-card) var(--radius-card) 0 0;
  --radius-field: 6px;
}