/* ============================================================================
   qr.ehsh.se — kundens landningssida
   ============================================================================

   Grafisk profil (ERIKSHJÄLPEN Grafisk Profil_201106):

     Huvudfärg  Vinröd   #96004f   Pantone 7435 C
     Grundfärg  Gul      #dd8300   Pantone 145 C
     Grundfärg  Rosa     #dd8cb0   Pantone 7431 C
     Komplement Ljusgul  #f4d895 / Mörkgrön #2b5b66

   Profilen är tydlig med hierarkin: vinrött dominerar, de andra används som
   detaljer — "exempelvis en textrad, en knapp eller en liten inforuta".
   Därför bär vinrött sidhuvudet, och gult används bara på priset.

   Typografi: Fredoka till rubriker, Roboto Light i löptext. Profilen säger
   att Fredoka aldrig sätts genomgående versalt och att rubriker hålls till
   några få ord — därför inga text-transform och korta rubriker.

   MOBILFÖRST. Sidan nås genom att skanna en QR-kod, alltså i praktiken
   alltid från en telefon som hålls i handen framför en hylla.
   ============================================================================ */

:root {
    --vinrod:    #96004f;
    --vinrod-m:  #7a0041;
    --gul:       #dd8300;
    --rosa:      #dd8cb0;
    --ljusgul:   #f4d895;
    --morkgron:  #2b5b66;

    --text:      #1f1f1f;
    --text-svag: #5f5f5f;
    --linje:     #e4e0e2;
    --botten:    #faf8f9;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--botten);
    color: var(--text);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
    font-family: 'Fredoka', 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 .4rem;
}

/* ── Sidhuvud ───────────────────────────────────────────────────────────── */
.qr-topp {
    background: var(--vinrod);
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qr-topp img { height: 38px; width: auto; display: block; }

/* ── Innehåll ───────────────────────────────────────────────────────────── */
.qr-inne {
    max-width: 560px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.qr-kort {
    background: #fff;
    border: 1px solid var(--linje);
    border-radius: 14px;
    padding: 1.5rem 1.35rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

/* Kategorin är varans identitet på den här sidan — den har inget namn i
   systemet, bara en plats i trädet. Därför är lövet rubriken. */
.qr-kategori {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.7rem;
    line-height: 1.15;
    color: var(--vinrod);
    margin: 0 0 .35rem;
}

/* Sökvägen ovanför: rot › gren › gren. Lövet upprepas inte, det står redan
   som rubrik. */
.qr-stig {
    font-size: .82rem;
    color: var(--text-svag);
    margin: 0 0 1.1rem;
    letter-spacing: .01em;
}
.qr-stig span:not(:last-child)::after {
    content: ' › ';
    color: var(--rosa);
}

/* ── Pris ───────────────────────────────────────────────────────────────── */
.qr-pris {
    font-family: 'Fredoka', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--vinrod);
    margin: .2rem 0 .1rem;
}
.qr-pris .valuta {
    font-size: 1.1rem;
    color: var(--gul);
    margin-left: .3rem;
    vertical-align: .55rem;
}

/* Såld vara: lappen följer med kunden hem, så sidan skannas ofta EFTER köpet.
   Då ska den inte visa ett pris som ser ut som ett erbjudande. */
.qr-sald {
    display: inline-block;
    background: var(--ljusgul);
    color: #6b4a00;
    font-size: .95rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    margin: .4rem 0 .2rem;
}

/* ── Faktarader ─────────────────────────────────────────────────────────── */
.qr-fakta {
    margin: 1.4rem 0 0;
    border-top: 1px solid var(--linje);
    padding-top: 1rem;
}
.qr-rad {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    font-size: .95rem;
}
.qr-rad dt { color: var(--text-svag); margin: 0; }
.qr-rad dd { margin: 0; text-align: right; }

.qr-artikelnr {
    margin-top: 1.2rem;
    font-size: .72rem;
    color: #9a9a9a;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-all;
    text-align: center;
}

/* ── Statiska textblock (hållbarhet, om oss …) ─────────────────
   Redigeras i produktdatabasen och kommer som sanerad HTML. Reglerna håller
   dem inom sidans typografi även om redigeraren sätter egna storlekar. */
.qr-block {
    background: #fff;
    border: 1px solid var(--linje);
    border-radius: 14px;
    padding: 1.35rem 1.35rem;
    margin-top: 1rem;
}
.qr-block h2 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.25rem;
    color: var(--vinrod);
    margin: 0 0 .6rem;
}
.qr-block p:first-of-type { margin-top: 0; }
.qr-block p:last-child    { margin-bottom: 0; }
.qr-block img { max-width: 100%; height: auto; border-radius: 8px; }
.qr-block a { color: var(--vinrod); }
/* Rubriker från redigeraren tvingas ner i storlek — en h1 i ett textblock
   ska inte konkurrera med varans rubrik högst upp. */
.qr-block h1, .qr-block h3, .qr-block h4 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem;
    color: var(--vinrod);
}

/* ── Meddelanden ────────────────────────────────────────────────────────── */
.qr-medd {
    background: #fff;
    border: 1px solid var(--linje);
    border-left: 5px solid var(--rosa);
    border-radius: 10px;
    padding: 1.35rem 1.35rem;
}
.qr-medd h1 { color: var(--vinrod); font-size: 1.35rem; }
.qr-medd p  { margin: .6rem 0 0; }
.qr-medd.fel { border-left-color: var(--morkgron); }

/* ── Sidfot ─────────────────────────────────────────────────────────────── */
.qr-fot {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 1.25rem 2.5rem;
    font-size: .8rem;
    color: var(--text-svag);
    text-align: center;
}
.qr-fot a { color: var(--vinrod); }
.qr-fot .qr-band {
    height: 4px;
    background: linear-gradient(90deg, var(--vinrod) 0 55%, var(--gul) 55% 80%, var(--rosa) 80% 100%);
    border-radius: 2px;
    margin: 0 0 1.1rem;
}

@media (min-width: 600px) {
    body { font-size: 18px; }
    .qr-inne { padding-top: 2.25rem; }
    .qr-kategori { font-size: 2rem; }
}