/* Butikkens utseende. Holdt utenfor styles.css slik at butikkarbeidet og
   resten av produktet ikke deler stilark. Lastes ved siden av styles.css fra
   index.html, og arver alle tokens derfra. */

/* ---------------- innrammingen over butikken ---------------- */
/* Selve butikken rendres av Spreadshop-klienten. Herfra kommer bare
   innrammingen over den. */

.butikk-lede {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-5);
}
.butikk-lede p { margin: 0; max-width: 58ch; }
.butikk-lede .meta {
  font-family: var(--font-condensed); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}

/* Marginen er null. Står som en rolig linje, ikke som et salgspoeng — den er
   en opplysning om hvem du handler med, ikke en grunn til å kjøpe. */
.butikk-margin {
  margin: calc(var(--space-5) * -1) 0 var(--space-5);
  padding: 10px 0 0; border-top: var(--border-hairline);
  color: var(--text-muted); max-width: var(--measure);
}

/* ---------------- selve embedden ---------------- */
/* Spreadshop-embedden bor utenfor #view og skjules med hidden ved fanebytte,
   slik at klienten slipper å bygges opp på nytt. Fontene arves herfra —
   Spreadshop setter dem bevisst ikke selv. */

#shop-mount{ margin-top:24px; }
#shop-mount[hidden]{ display:none; }
#shop-mount iframe{
  display:block; width:100%; border:0;
  border-radius:var(--radius-md); box-shadow:var(--shadow-hard-sm);
  background:#fff;
}