/* ==========================================================
   OLB BUTTONS v1.0.2 – REPAIR RC1
   Ændringer mod v1.0.1 (alle auditbegrundede, ingen visuel redesign):
   B-03  in-cart: .is-in-cart er eneste state-hook; mobile-first uden
         max-width-query og uden !important; hidden bruges ikke.
   X-03  ikonstørrelse ejes af Iconography (--icon-size-*); stroke 2.4 ved 20 px.
   X-07  labels må ombryde når selv én knap ikke har plads (200 % zoom);
         sticky-bar stabler; quantity krymper med 48 px touch-gulv.
   G-07  semantiske gaps i stedet for --space-* primitiver.
   G-08  transitions bruger --olb-motion-base (olb-behavior.css).
   G-10  lokal typografi-media-query fjernet (--font-size-button-sm skifter selv).
   Kræver: Farve 1.0.5 · Typo 0.9.8 · Layout 1.0 · F&D 1.0 · Icons 1.0.1 · olb-behavior.css
   ========================================================== */

:root {
  --button-height: 3rem;
  --button-height-large: 3.5rem;

  --button-padding-x: var(--space-4);            /* 16 */
  --button-padding-x-tight: var(--space-2);      /* 8 */
  --button-padding-x-large: var(--space-6);      /* 24 */
  --button-padding-x-card: var(--space-3);       /* 12 */
  --button-gap: var(--space-2);                  /* 8 */

  --button-radius: var(--radius-button);         /* 8 */
  /* X-03: deprecated aliaser – ejes af Iconography. Fjernes i v1.1. */
  --button-icon-size: var(--icon-size-sm);
  --button-icon-only-size: var(--icon-size-md);

  --quantity-min-width: 8.5rem;                  /* 136 */
}

.olb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-height: var(--button-height);
  padding-inline: var(--button-padding-x);
  border: var(--border-width-strong) solid transparent;
  border-radius: var(--button-radius);

  font-family: var(--font-family-ui);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;

  /* X-07: normal ombrydning. Ved normale bredder er alle labels på én linje
     (målt 320–1440); kun når én knap alene er bredere end sin plads, ombrydes
     labelen i stedet for at løbe ud over kanten. Label skjules/klippes aldrig. */
  white-space: normal;
  overflow-wrap: anywhere;   /* X-07: kun aktiv når ét ord alene er bredere end knappen (≈160 CSS px) */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;

  transition:
    background-color var(--olb-motion-base) ease,
    border-color var(--olb-motion-base) ease,
    color var(--olb-motion-base) ease;
}

/* Exactly ONE variant class per button. */
.olb-button--primary {
  background: var(--color-cta-bg);
  color: var(--color-cta-fg);
}

.olb-button--secondary {
  background: var(--color-surface);
  color: var(--color-cta2-fg);
  border-color: var(--color-cta2-border);
}

.olb-button--tertiary {
  background: transparent;
  color: var(--color-link);
  border-color: transparent;
  padding-inline: var(--button-padding-x-tight);
}

.olb-button--destructive {
  background: var(--color-surface);
  color: var(--color-error);
  border-color: var(--color-error);
}

.olb-button--large {
  min-height: var(--button-height-large);
  padding-inline: var(--button-padding-x-large);
  font-size: var(--font-size-button-lg);
  font-weight: var(--font-weight-bold);
}

.olb-button--full {
  width: 100%;
  min-width: 0;
}

.olb-button--icon {
  width: var(--button-height);
  min-width: var(--button-height);
  padding: 0;
}

/* X-03: ikoner i knapper er .olb-icon fra sprite. Knappen vælger kun rolle:
   label-ikon = sm (20 px, stroke 2.4 → 2 px renderet), icon-only = md (24 px). */
.olb-button .olb-icon {
  --icon-size: var(--icon-size-sm);
  --icon-stroke: 2.4;
}

.olb-button--icon .olb-icon {
  --icon-size: var(--icon-size-md);
  --icon-stroke: 2;
}

/* Product-card */
.olb-product-card__cta {
  width: 100%;
}

/* G-10: --font-size-button-sm er 17 px mobil / 16 px fra 768 i Typografi selv. */
.olb-product-card__cta .olb-button {
  width: 100%;
  min-width: 0;
  padding-inline: var(--button-padding-x-card);
  font-size: var(--font-size-button-sm);
}

/* B-03 · In-cart-kontrakt (v1.0.2). Eneste state-hook: .is-in-cart på
   .olb-product-card. JS toggler kun klassen; hidden bruges IKKE på de tre børn.
   Mobile-first, ingen max-width-query → intet fraktionelt hul ved 359↔360.
   Default:        add vises · incart skjult · quantity skjult
   .is-in-cart:    add skjult · <360 compact incart · ≥360 quantity         */
.olb-product-card .olb-product-card__incart,
.olb-product-card .olb-product-card__quantity {
  display: none;
}

.olb-product-card.is-in-cart .olb-product-card__add {
  display: none;
}

.olb-product-card.is-in-cart .olb-product-card__incart {
  display: inline-flex;
}

/* 360 = dokumenteret component coupling exception (Buttons §1, Layout §8). */
@media (min-width: 360px) {
  .olb-product-card.is-in-cart .olb-product-card__incart {
    display: none;
  }

  .olb-product-card.is-in-cart .olb-product-card__quantity {
    display: grid;
  }
}

/* Hover: fine pointer only */
@media (hover: hover) and (pointer: fine) {
  .olb-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--color-cta-hover);
  }
  .olb-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--color-cta2-hover-bg);
  }
  .olb-button--tertiary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--color-hover-bg);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .olb-button--destructive:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--color-error-soft);
  }
}

.olb-button--primary:active:not(:disabled):not([aria-disabled="true"]) { background: var(--color-cta-hover); }
.olb-button--secondary:active:not(:disabled):not([aria-disabled="true"]) { background: var(--color-cta2-hover-bg); }
.olb-button--tertiary:active:not(:disabled):not([aria-disabled="true"]) { background: var(--color-hover-bg); }
.olb-button--destructive:active:not(:disabled):not([aria-disabled="true"]) { background: var(--color-error-soft); }

/* Disabled: deliberately lighter boundary than secondary. */
.olb-button:disabled,
.olb-button[aria-disabled="true"] {
  background: var(--color-cta-disabled-bg);
  color: var(--color-text-muted);
  border-width: var(--border-width-strong);
  border-color: var(--color-cta-disabled-bg);
  cursor: not-allowed;
}

.olb-button[aria-disabled="true"] { cursor: default; }

/* Loading
   v1.0.1: label/icon use opacity:0 rather than visibility:hidden.
   Geometry stays fixed while the button's accessible name remains available.
   Duplicate activation while busy is guarded by olb-behavior.js. */
.olb-button[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}

.olb-button[aria-busy="true"] .olb-button__label,
.olb-button[aria-busy="true"] .olb-button__icon {
  opacity: 0;
}

.olb-button__spinner {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--icon-size-sm);   /* X-03 */
  height: var(--icon-size-sm);
  border: var(--border-width-strong) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: olb-button-spin .8s linear infinite;
}

.olb-button[aria-busy="true"] .olb-button__spinner { display: block; }

@keyframes olb-button-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .olb-button__spinner { animation-duration: 2.4s; }
}

/* Quantity: wrapper is 48px INCLUDING its 1px border.
   X-07 (v1.0.2): ved 200 % tekst voksede 3rem-kolonnerne til 96 px og
   stepperen (8.5rem = 272 px) sprængte kortet. Step-kolonnerne må nu krympe
   mod et 48 px touch-gulv (Typografi §10), og wrapperen må krympe til sin
   kolonne. Ved 100 % er geometrien uændret: 48 / ≥40 / 48. */
.olb-quantity {
  display: grid;
  grid-template-columns: minmax(48px, 3rem) minmax(0, 1fr) minmax(48px, 3rem);
  width: 100%;
  min-width: min(var(--quantity-min-width), 100%);
  height: var(--button-height);
  border: var(--border-control);
  border-radius: var(--radius-quantity);
  background: var(--color-surface);
  overflow: visible;
}

.olb-quantity__step {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 48px; /* X-07: touch-gulv, Typografi §10 */
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--color-brand-primary);
  cursor: pointer;
  z-index: 0;
}

.olb-quantity__step::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: -1;
}

.olb-quantity__step:first-child::before {
  border-radius:
    calc(var(--radius-quantity) - var(--border-width-default)) 0 0
    calc(var(--radius-quantity) - var(--border-width-default));
}

.olb-quantity__step:last-child::before {
  border-radius:
    0 calc(var(--radius-quantity) - var(--border-width-default))
    calc(var(--radius-quantity) - var(--border-width-default)) 0;
}

/* Transparent hit-area extension only; never paints outside the control. */
.olb-quantity__step::after {
  content: "";
  position: absolute;
  inset: -1px 0;
  background: transparent;
}

.olb-quantity__step:first-child { border-inline-end: var(--border-divider); }
.olb-quantity__step:last-child  { border-inline-start: var(--border-divider); }

.olb-quantity__value {
  display: grid;
  place-items: center;
  min-width: 0;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-qty);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
}

@media (hover: hover) and (pointer: fine) {
  .olb-quantity__step:hover:not(:disabled)::before {
    background: var(--color-cta2-hover-bg);
  }
}

/* Dark contexts */
.olb-on-dark .olb-button--primary {
  border-color: var(--color-text-inverse);
}

.olb-on-dark .olb-button--secondary {
  background: var(--color-surface);
  color: var(--color-brand-primary);
  border-color: var(--color-surface);
}

.olb-on-dark .olb-button--tertiary {
  color: var(--color-text-inverse);
}

.olb-on-dark .olb-button--destructive {
  background: var(--color-error-soft);
  color: var(--color-error);
  border-color: var(--color-error-soft);
}


@media (hover: hover) and (pointer: fine) {
  .olb-on-dark .olb-button--tertiary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}


/* Disabled always wins over context/inverse styling. */
.olb-on-dark .olb-button:disabled,
.olb-on-dark .olb-button[aria-disabled="true"] {
  background: var(--color-cta-disabled-bg);
  color: var(--color-text-muted);
  border-width: var(--border-width-strong);
  border-color: var(--color-cta-disabled-bg);
}

/* Sticky CTA
   X-07 (v1.0.2): flex-wrap lader total og CTA stable, når de ikke kan stå
   side om side (kun ved ekstrem smal effektiv bredde, fx 320 @ 200 %).
   Ved 320–1440 @ 100 % står de fortsat på én linje (målt). */
.olb-sticky-cta {
  flex-wrap: wrap;
  gap: var(--gap-tight);           /* G-07: 8 */
}

.olb-sticky-cta .olb-button--primary {
  flex: 1 0 auto;
  max-width: 100%;
}

/* Under 360: dokumenteret component coupling exception (Typografi §10, Buttons §3).
   Mobile-first udtrykt som default + ≥360-udvidelse. */
.olb-sticky-cta .olb-button--large {
  padding-inline: var(--button-padding-x);   /* 16, G-07 */
}

.olb-sticky-cta__total {
  font-size: var(--font-size-sticky-total-compact);
}

@media (min-width: 360px) {
  .olb-sticky-cta .olb-button--large {
    padding-inline: var(--button-padding-x-large);   /* 24 */
  }

  .olb-sticky-cta__total {
    font-size: var(--font-size-price);   /* 20, Layout §19 */
  }
}

/* Checkout CTA: fill its action/summary column on ALL widths. */
.olb-checkout-cta .olb-button--primary {
  width: 100%;
}

/* Modal */
/* X-10: future-facing (Behavior v1.0.1 §13) – ingen aktiv Sprint 1-kontrakt. */
.olb-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);          /* G-07: 12 */
}
.olb-modal__actions .olb-button { width: 100%; }

@media (min-width: 768px) {
  .olb-modal__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .olb-modal__actions .olb-button { width: auto; }
}

/* v1.0.2 – repair RC1. Future design changes require explicit version update. */