/* Köpknappar och Vårt val-rutan.
 *
 * En sak får vara djärv: köpknappen till en butik vi har avtal med. Den är en
 * massiv signalröd platta med en mörkare underkant, som en fysisk tryckknapp, och
 * den trycks ned när man klickar. Allt runt den hålls tyst. Butiker utan avtal får
 * en lugn konturknapp, så att ögat landar på rätt ställe.
 *
 * Avtalsbutikerna känns igen på länkens domän — sektionsmallen kan inte bära en
 * egen klass per kort.
 */

:root {
  --vg-cta-red: var(--wp--preset--color--primary);
  --vg-cta-red-deep: var(--wp--preset--color--primary-soft);
  --vg-cta-ink: var(--wp--preset--color--contrast);
  --vg-cta-paper: var(--wp--preset--color--surface);
  --vg-cta-line: var(--wp--preset--color--line);
  --vg-cta-edge: 3px;
}

/* ---- Gemensam knappbas ------------------------------------------------- */
.vg-btn {
  box-sizing: border-box;
  max-inline-size: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-block-size: 48px;
  padding: 0.75em 1.5em;
  border: 2px solid var(--vg-cta-ink);
  border-radius: 3px;
  background: transparent;
  color: var(--vg-cta-ink);
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, transform 80ms ease, box-shadow 80ms ease;
}

.vg-btn:hover {
  background: var(--vg-cta-ink);
  color: var(--vg-cta-paper);
}

.vg-btn:focus-visible {
  outline: 3px solid var(--vg-cta-ink);
  outline-offset: 3px;
}

/* ---- Köpknappen: avtalsbutiker ------------------------------------------ */
.vg-btn--primary,
.vg-toplist__cta .vg-btn:is([href*="do.pnjakt.se"], [href*="id.smartasaker.se"], [href*="ion.kjell.com"], [href*="id.esafe.se"], [href*="do.bobohome.se"]) {
  border-color: var(--vg-cta-red);
  background: var(--vg-cta-red);
  color: var(--vg-cta-paper);
  box-shadow: 0 var(--vg-cta-edge) 0 var(--vg-cta-red-deep);
}

.vg-btn--primary:hover,
.vg-toplist__cta .vg-btn:is([href*="do.pnjakt.se"], [href*="id.smartasaker.se"], [href*="ion.kjell.com"], [href*="id.esafe.se"], [href*="do.bobohome.se"]):hover {
  border-color: var(--vg-cta-red-deep);
  background: var(--vg-cta-red-deep);
  color: var(--vg-cta-paper);
}

.vg-btn--primary:active,
.vg-toplist__cta .vg-btn:is([href*="do.pnjakt.se"], [href*="id.smartasaker.se"], [href*="ion.kjell.com"], [href*="id.esafe.se"], [href*="do.bobohome.se"]):active {
  transform: translateY(var(--vg-cta-edge));
  box-shadow: 0 0 0 var(--vg-cta-red-deep);
}

/* ---- Knappen i produktkortet ------------------------------------------- */
.vg-toplist__cta {
  margin: 0.25rem 0 0;
}

.vg-toplist__cta .vg-btn {
  min-inline-size: min(100%, 20rem);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}

/* Telefon: knappen tar hela bredden — tummen ska inte behöva sikta. */
@media (max-width: 48rem) {
  .vg-toplist__cta .vg-btn {
    display: flex;
    inline-size: 100%;
    min-block-size: 54px;
    padding-inline: 0.75rem;
    font-size: 1rem;
    text-wrap: balance;
  }
}

/* ---- Vårt val-rutan ----------------------------------------------------- */
/* En ruta med tunn bläckram: texten först, knappen under (telefon) eller till
 * höger (skrivbord). Texten läses i vanlig storlek — det är säljargumentet. */
.vg-afflink {
  display: grid;
  gap: 0;
  max-inline-size: var(--vg-measure, 46rem);
  text-align: start;
}

.vg-afflink__note,
.vg-afflink__action {
  box-sizing: border-box;
  max-inline-size: none;
  margin: 0;
  border: 1px solid var(--vg-cta-ink);
  background: var(--vg-cta-paper);
}

.vg-afflink__note {
  padding: 1.25rem 1.25rem 1rem;
  border-block-end: 0;
  color: var(--vg-cta-ink);
  font-size: 1rem;
  line-height: 1.55;
  opacity: 1;
}

.vg-afflink__note strong {
  font-weight: 700;
}

.vg-afflink__action {
  padding: 0 1.25rem 1.25rem;
  border-block-start: 0;
}

.vg-afflink .vg-btn {
  display: flex;
  inline-size: 100%;
  min-block-size: 52px;
}

/* Skrivbord: texten till vänster, knappen till höger, en ram runt båda. */
@media (min-width: 48rem) {
  .vg-afflink {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .vg-afflink__note {
    padding: 1.25rem 1.5rem;
    border-block-end: 1px solid var(--vg-cta-ink);
    border-inline-end: 0;
  }

  .vg-afflink__action {
    display: flex;
    align-items: center;
    padding: 1.25rem 1.5rem 1.25rem 0;
    border-block-start: 1px solid var(--vg-cta-ink);
    border-inline-start: 0;
  }

  .vg-afflink .vg-btn {
    display: inline-flex;
    inline-size: auto;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vg-btn {
    transition: none;
  }

  .vg-btn--primary:active,
  .vg-toplist__cta .vg-btn:active {
    transform: none;
  }
}