/* Rabattkampanjer (stjarna/kampanjer.py, templates/_kampanjpris.html): etiketten, kampanjpriset med referens och
   raden om lägsta pris senaste 30 dagarna. Lugnt och i designsystemets färger: natt, stjärnguld och vitt, lätt
   rundat (aldrig piller), ingen skugga, ingen rörelse. Kontrast: guld på natt 9,4:1, natt på guld 7,6:1,
   bläck på vitt 17:1. */
/* Den lilla brickan bredvid priser och i listor: bara procenten, stjärnguld med nattblått bläck. */
.kampanj-etikett {
  display: inline-block; padding: 2px 7px; border-radius: var(--r-liten, 6px);
  background: var(--guld, #e3b04b); color: #16244a;
  font: 650 13px/1.3 var(--font-rubrik, "Bricolage Grotesque", system-ui, sans-serif); letter-spacing: -.01em;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Stämpeln över en produktbild: guldringen från certifikatets karta, som markerar just din stjärna. Skivan i
   stjärnguld, en tunn inre ring och fyra siktmärken som går ut över kanten, kampanjens namn i en båge och procenten
   stort i mitten. Lätt sned, som en stämpel som tryckts på för hand. Ingen skugga, ingen rörelse. */
.kampanj-stampel { display: block; width: 96px; height: 96px; overflow: visible; transform: rotate(-9deg); }
.kampanj-stampel .ks-skiva { fill: var(--guld, #e3b04b); }
.kampanj-stampel .ks-ring { fill: none; stroke: #16244a; stroke-width: 1; opacity: .55; }
.kampanj-stampel .ks-sikte { stroke: #16244a; stroke-width: 1.6; stroke-linecap: round; }
.kampanj-stampel .ks-namn { fill: #16244a; font: 600 10.5px var(--font-rubrik, "Bricolage Grotesque", system-ui, sans-serif);
  letter-spacing: .04em; }
.kampanj-stampel .ks-tal { fill: #16244a; font: 700 30px var(--font-rubrik, "Bricolage Grotesque", system-ui, sans-serif);
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kampanj-stampel .ks-proc { font-size: 14px; font-weight: 650; letter-spacing: 0; }
.kampanj-stampel .ks-tal-ord { font-size: 15px; letter-spacing: -.01em; }
/* Över en produktbild: uppe till höger, så att den inte döljer certifikatets namn */
.ke-over { position: absolute; top: 14px; right: 14px; z-index: 2; }
.pk-bild, .pv-bildram { position: relative; }
@media (max-width: 734px) { .kampanj-stampel { width: 78px; height: 78px; } .ke-over { top: 10px; right: 10px; } }

/* Priset: kampanjpris, referens överstruken, lägsta 30-dagarspris i liten grå text */
.kp-fore { color: var(--text-2); font-weight: 400; text-decoration-thickness: 1px; margin-right: .2em; }
.kp-nu { color: inherit; }
.pk-pris .kp-fore, .hp-jamfor .kp-fore, .val-pris .kp-fore { font-size: .66em; }
.kp-lagsta, .pv-lagsta, .hh-lagsta, .summa-lagsta {
  display: block; margin-top: 4px; font: 400 13px/1.4 var(--font); letter-spacing: 0; color: var(--text-2);
}
.pk-pris-kampanj .kp-lagsta { margin-top: 6px; }
.pk-galler { display: block; font: 400 13px/1.4 var(--font); color: var(--text-2); }
.natt .kp-fore, .natt .kp-lagsta, .natt .hh-lagsta { color: var(--m-text-2, #a3abc0); }

/* Heron: en lugn rad ovanför rubriken */
.hh-kampanj { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; font-size: 15px;
  line-height: 1.4; color: var(--m-text, #f1f3f8); }
.hh-kampanj a { color: inherit; text-underline-offset: 3px; }

/* Köpformulärets paketval */
.pv .kampanj-etikett { font-size: 12px; }
.pv .pv-kampanj { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* Paketkorten på mobil (landning-a.css, ≤734 px): namn och pris på samma rad, priset i en smal högerspalt.
   Samma uppställning som förstagångspriset: överstruket pris på egen rad, de små raderna högerställda och smala. */
@media (max-width: 734px) {
  .pk-pris-kampanj { text-align: right; }
  .pk-pris-kampanj .kp-fore { display: block; margin: 0 0 2px; font-size: 13px; }
  .pk-pris-kampanj .kp-lagsta, .pk-pris-kampanj .pk-galler { max-width: 9em; margin-left: auto; font-size: 11.5px;
    line-height: 1.35; }
}

/* Kampanjens landningssida (templates/kampanjer/_kampanjhero.html). Natthimlen med kampanjens namn som en stor,
   tunn konturtext i bakgrunden, beskuren i nederkanten som en horisont. Framför: rubrik, sluttid, tre priser och en
   knapp. Ingen brödtext här uppe. */
.kh { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 7vw, 96px) 0 clamp(112px, 17vw, 260px);
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 64%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 18%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 46%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 12%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 38%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 72%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 78%, rgba(255,255,255,.55) 50%, transparent 51%),
    var(--yta); color: var(--text); }
.kh-bakgrund { position: absolute; z-index: -1; left: 50%; bottom: -.18em; transform: translateX(-50%); margin: 0;
  white-space: nowrap; pointer-events: none; user-select: none;
  font: 700 clamp(96px, 19vw, 300px)/.8 var(--font-rubrik, "Bricolage Grotesque", system-ui, sans-serif); letter-spacing: -.055em;
  color: transparent; -webkit-text-stroke: 1.2px rgba(227, 176, 75, .55); }
.kh-inre { width: var(--kant-ut, calc(100% - 48px)); max-width: var(--bredd, 1080px); margin-inline: auto; }
.kh-smula { font-size: 14px; color: var(--text-2); margin-bottom: clamp(28px, 5vw, 56px); }
.kh-smula a { color: var(--text-2); }
.kh h1 { max-width: 14ch; margin: 0; font: 600 clamp(40px, 6.4vw, 80px)/1.02 var(--font-rubrik, "Bricolage Grotesque", system-ui, sans-serif);
  letter-spacing: -.035em; text-wrap: balance; }
.kh-tid { margin: 16px 0 0; font-size: 17px; color: var(--text-2); }
.kh-priser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0;
  list-style: none; max-width: 860px; border-top: 1px solid var(--linje); }
.kh-priser li { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 0 0; }
.kh-priser li + li { padding-left: 24px; border-left: 1px solid var(--linje); }
.kh-paket { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-2); }
.kh-pris { font: 600 clamp(28px, 3.4vw, 40px)/1.1 var(--font-rubrik, "Bricolage Grotesque", system-ui, sans-serif); letter-spacing: -.02em; }
.kh-pris .kp-fore { font-size: .5em; margin-right: .3em; color: var(--text-2); }
.kh-lagsta { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.kh-handling { margin: clamp(32px, 5vw, 48px) 0 0; }
.kh-besked { margin: 24px 0 0; max-width: 60ch; font-size: 15px; color: var(--text-2); }
@media (max-width: 734px) {
  .kh-inre { width: calc(100% - 32px); }
  .kh-priser { grid-template-columns: 1fr; border-top: 0; }
  .kh-priser li, .kh-priser li + li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px;
    padding: 14px 0; border-left: 0; border-top: 1px solid var(--linje); }
  .kh-lagsta { grid-column: 1 / -1; }
  .kh-pris { font-size: 26px; text-align: right; }
}

/* Den korta raden på paket- och kampanjsidor */
.kampanj-aktiv { margin: var(--s5, 20px) 0 0; }
.kampanj-aktiv .kp-priser { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kampanj-aktiv .kp-priser li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.kampanj-aktiv .kp-lagsta { flex-basis: 100%; margin: 0; }