/* BUTIKEN I HEMSIDANS UTSEENDE (2026-10-14, Joakims ja till A4 på beställningen).
   Beställningen och Unikt kort byggde på gästernas mörka kundhud (style.css och gast.css).
   Här byts tokens och några få delar, så att sidorna får hemsidans salvia, Familjen Grotesk
   och Garamond, och knappar som hemsidans. Klassen butik finns bara på butikens sidor, så
   rummen, ceremonin, piloterna och de frysta utgåvorna rörs inte. */

body.kund.gast.butik {
  --ground: #e7ece6; --surface: #f7f9f6; --surface-2: #f7f9f6;
  --ink: #16201c; --ink-soft: #3e4a44; --ink-faint: #4f5b55;
  --rule: #c8d1c9; --rule-soft: #dbe2dc;
  --accent: #8a2d52; --accent-wash: #f3e6ec; --accent-line: rgba(138, 45, 82, .35);
  --btn-bg: #16201c; --btn-ink: #f7f9f6;
  --ok-bg: #f3e6ec; --ok-line: rgba(138, 45, 82, .35); --ok-ink: #6d2341;
  --disp: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --etikett: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --garamond: 'EB Garamond', Garamond, Georgia, serif;
  --rubrik-typ: var(--disp); --rubrik-vikt: 600; --rubrik-spatie: -.02em; --rubrik-em-typ: var(--garamond);
  --knapp-typ: var(--etikett); --knapp-vikt: 600; --knapp-spatie: 0; --knapp-storlek: 17px; --knapp-linje: transparent;
  --skugga: 0 2px 4px rgba(22, 32, 28, .08), 0 22px 44px rgba(22, 32, 28, .18);
  color-scheme: light;
  font-size: 17px; line-height: 1.55;
}

/* Rubrikerna som på hemsidan: grotesk, tät och mörk. Tillfällets namn i Garamond. */
body.butik h1 { font-size: clamp(34px, 6vw, 48px); line-height: 1.05; margin-bottom: 14px; }
body.butik h2 { font-size: 22px; line-height: 1.2; }
body.butik .skriv-tillfalle, body.butik .eget-prov { font-family: var(--garamond); font-style: italic; font-size: 19px; color: var(--accent); }
body.butik .prova-ingress { color: var(--ink-soft); }

/* Knapparna som hemsidans: mörka, rundade, gemener. Den andra knappen är en kontur. */
body.butik .btn, body.butik .rec-btn {
  border-radius: 14px; min-height: 54px; padding: 0 26px;
  text-transform: none; letter-spacing: 0;
  box-shadow: none;
}
@media (hover: hover) {
  body.butik .btn:hover { background: var(--accent); color: #fff; box-shadow: none; }
  body.butik .btn.andra:hover, body.butik .btn.ghost:hover { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
}
body.butik .btn.andra, body.butik .btn.ghost { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Fälten: ljusa ytor med rundade hörn, som intresserutan på hemsidan. */
body.butik input, body.butik textarea, body.butik select {
  background-color: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 14px;
  font-family: var(--text); font-size: 17px;
}
body.butik select { min-height: 54px; padding: 0 40px 0 16px; }
body.butik .field input[type="text"], body.butik .field input[type="email"], body.butik .field input[type="date"],
body.butik .field input[type="number"], body.butik .field textarea { border-radius: 14px; background-color: var(--surface); }
body.butik input::placeholder, body.butik textarea::placeholder { color: #7d8781; }
body.butik input[type="radio"], body.butik input[type="checkbox"] { accent-color: var(--accent); }

/* Korten i designvalet ligger på bordet som på hemsidan. */
body.butik .designkort img, body.butik .kortbild img { box-shadow: var(--skugga); border-radius: 2px; }
body.butik .designkort b { font-family: var(--garamond); font-style: italic; font-weight: 500; font-size: 21px; }
body.butik .designkort small { color: var(--ink-faint); }

body.butik .banner.warn { background: var(--accent-wash); color: var(--ok-ink); border-color: var(--accent-line); }