/* ============================================================
   Inkt & Naald — de huisstijl van de shop op het web

   Een oude tattooshop, niet een strak webwinkeltje. Perkament aan de
   muur, flash in de achtergrond, en letters van een geschilderd
   uithangbord:

     Yellowtail  het uithangbord: de naam boven de deur
     Rye         de koppen: een western-slab zoals op oude flash
     Karla       alles wat echt gelezen moet worden

   Kleuren komen van de old-school palet: inkt, perkament, koper,
   en het rood en groen dat in elke traditional tattoo zit.

   Licht en donker staan allebei aan en volgen de stand van het
   scherm. Licht is perkament, donker is de winkel na sluitingstijd.
   ============================================================ */

:root {
    /* --- donker: de winkel na sluitingstijd --- */
    --inkt:    #100c08;
    --vel:     #191309;
    --vel2:    #221a0f;
    --rand:    #3a2e1c;
    --rand2:   #55442a;
    --goud:    #cd9a4e;
    --goud2:   #f0cf94;
    --tekst:   #f0e5d0;
    --zacht:   #9a8c74;
    --rood:    #c2504a;
    --groen:   #6aa583;
    --papier:  radial-gradient(circle at 50% 36%, #f6eedd, #ddd0b4 68%, #c6b795);
    --muur:    .085;      /* hoe hard de flash achter alles door komt */
    --muur-om: invert(1); /* in het donker de inkt omkeren */
    --scherm:  radial-gradient(circle at 50% 28%, #2a1f13 6%, #150f09 64%, #0a0705 100%);
    --waas:    linear-gradient(to top, rgba(0,0,0,.55), transparent);

    --letter-merk: 'Yellowtail', 'Brush Script MT', cursive;
    --letter-kop:  'Rye', Georgia, 'Times New Roman', serif;
    --letter-lees: Karla, 'Segoe UI', system-ui, sans-serif;

    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    :root:not([data-thema="donker"]) {
        /* --- licht: perkament, zoals de vellen aan de muur --- */
        --inkt:  #ece0c5;
        --vel:   #fbf6ea;
        --vel2:  #f4ecd9;
        --rand:  #d6c5a2;
        --rand2: #bda878;
        --goud:  #8a5a1e;
        --goud2: #6d4413;
        --tekst: #241a10;
        --zacht: #6e6152;
        --rood:  #9d2f28;
        --groen: #3b6a50;
        --muur:  .10;
        --muur-om: none;
        --scherm: radial-gradient(circle at 50% 28%, #f7f0e0 8%, #cdbb96 62%, #9d8b68 100%);
        --waas:   linear-gradient(to top, rgba(255,250,240,.85), transparent);
        color-scheme: light;
    }
}
:root[data-thema="licht"] {
    --inkt:  #ece0c5;
    --vel:   #fbf6ea;
    --vel2:  #f4ecd9;
    --rand:  #d6c5a2;
    --rand2: #bda878;
    --goud:  #8a5a1e;
    --goud2: #6d4413;
    --tekst: #241a10;
    --zacht: #6e6152;
    --rood:  #9d2f28;
    --groen: #3b6a50;
    --muur:  .10;
    --muur-om: none;
    --scherm: radial-gradient(circle at 50% 28%, #f7f0e0 8%, #cdbb96 62%, #9d8b68 100%);
    --waas:   linear-gradient(to top, rgba(255,250,240,.85), transparent);
    color-scheme: light;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--inkt);
    color: var(--tekst);
    font-family: var(--letter-lees);
    font-size: 15.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* De flashmuur: echte ontwerpen uit het spel, als behang achter alles.
   Los vastgezet, zodat hij blijft staan terwijl de pagina schuift --
   net als een muur waar je langsloopt. */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    background-image: url('flashmuur.webp');
    background-size: 620px;
    background-repeat: repeat;
    opacity: var(--muur);
    filter: var(--muur-om);
    pointer-events: none;
}

a { color: var(--goud2); text-underline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }

.flauw { color: var(--zacht); }
.klein { font-size: 13px; }

/* ---------------- kop ---------------- */
.kop {
    display: flex; align-items: center; gap: 28px;
    padding: 16px 28px;
    border-bottom: 2px solid var(--rand);
    box-shadow: 0 1px 0 var(--rand);       /* de dubbele lijn van een flashvel */
    background: color-mix(in srgb, var(--inkt) 88%, transparent);
    position: sticky; top: 0; z-index: 20;
    backdrop-filter: blur(9px);
}
.merk { text-decoration: none; color: inherit; flex: none; }
.merk-naam {
    display: block;
    font-family: var(--letter-merk);
    font-size: 34px; line-height: 1.05; color: var(--goud2);
    padding-right: 6px;
}
.merk-naam i { color: var(--goud); font-style: normal; padding: 0 1px; }
.merk-sub {
    display: block; margin-top: -2px;
    font-size: 10px; letter-spacing: .42em; text-transform: uppercase;
    color: var(--zacht);
}
.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav a {
    text-decoration: none; color: var(--tekst);
    padding: 8px 14px; border-radius: 3px;
    font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
    border: 1px solid transparent;
}
.nav a:hover { border-color: var(--rand2); }
.nav a[aria-current="page"] {
    border-color: var(--goud); color: var(--goud2); background: var(--vel);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--goud) 28%, transparent);
}
.ik { display: flex; align-items: center; gap: 12px; flex: none; }
.ik-naam {
    font-family: var(--letter-merk);
    font-size: 19px; color: var(--goud2); white-space: nowrap;
}

/* ---------------- knoppen ----------------
   Een geschilderd bordje: vlakke kleur, een donkere omlijning en een
   lichte binnenlijn, zoals letters op glas. */
.knop {
    display: inline-block; text-decoration: none; cursor: pointer;
    background: var(--goud); color: #15100a;
    border: 1px solid color-mix(in srgb, var(--goud) 62%, #000);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 34%, transparent);
    border-radius: 4px; padding: 11px 20px;
    font-family: var(--letter-lees); font-size: 12.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
}
.knop:hover { background: var(--goud2); color: #15100a; }
.knop.plat {
    background: transparent; color: var(--tekst);
    border-color: var(--rand); box-shadow: none; font-weight: 600;
}
.knop.plat:hover { border-color: var(--goud); color: var(--goud2); background: transparent; }
.knop.klein { padding: 7px 13px; font-size: 11px; }
.knop:disabled, .knop[aria-disabled="true"] { opacity: .4; cursor: default; }

/* ---------------- blad ---------------- */
.blad { max-width: 1180px; margin: 0 auto; padding: 30px 28px; }

.paginakop { margin-bottom: 26px; }
.paginakop h1 {
    font-family: var(--letter-kop);
    font-weight: 400; font-size: 42px; line-height: 1.12;
    margin: 0 0 10px; color: var(--tekst);
}
/* Een sierstreep zoals onderaan een flashvel: een dikke en een dunne
   lijn met een rij stippen ertussen, als een genaaide zoom. */
.paginakop h1::after {
    content: '';
    display: block; margin-top: 13px;
    height: 10px; max-width: 250px;
    border-top: 2px solid var(--rand2);
    border-bottom: 1px solid var(--rand2);
    background: radial-gradient(circle, var(--goud) 1.7px, transparent 2px)
                0 50% / 12px 100% repeat-x;
}
.paginakop p { margin: 0; color: var(--zacht); max-width: 62ch; }

/* ---------------- filterbalk ---------------- */
.filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 14px; margin-bottom: 22px;
    background: var(--vel); border: 1px solid var(--rand); border-radius: 6px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rand) 40%, transparent);
}
.filters input[type="search"], .filters select {
    background: var(--vel2); border: 1px solid var(--rand); border-radius: 4px;
    color: var(--tekst); padding: 10px 13px; font: inherit; font-size: 14px; outline: none;
}
.filters input[type="search"] { flex: 1; min-width: 180px; }
.filters input:focus, .filters select:focus { border-color: var(--goud); }
.telling {
    margin-left: auto; align-self: center; color: var(--zacht);
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------------- de vellen ---------------- */
.raster {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.vel {
    background: var(--vel); border: 1px solid var(--rand); border-radius: 6px;
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rand) 45%, transparent);
    transition: border-color .15s ease, transform .15s ease;
}
.vel:hover { border-color: var(--goud); transform: translateY(-2px); }
.vel .plaat {
    aspect-ratio: 1 / 1; background: var(--papier);
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--rand);
}
.vel .plaat img {
    width: 84%; height: 84%; object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
}
.vel .onder { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.vel b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.vel small { color: var(--zacht); font-size: 11.5px; }
.vel .prijs {
    margin-top: auto; padding-top: 8px;
    font-family: var(--letter-kop); font-size: 15px;
    color: var(--goud2); font-variant-numeric: tabular-nums;
}

.leeg {
    padding: 64px 20px; text-align: center; color: var(--zacht);
    border: 1px dashed var(--rand2); border-radius: 6px;
}
.leeg h2 { font-family: var(--letter-kop); font-weight: 400; color: var(--tekst); }

/* ---------------- kaarten en meldingen ---------------- */
.kaart {
    background: var(--vel); border: 1px solid var(--rand);
    border-radius: 6px; padding: 26px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rand) 45%, transparent);
}
.kaart + .kaart { margin-top: 18px; }
.kaart h2 {
    font-family: var(--letter-kop); font-weight: 400;
    margin: 0 0 8px; font-size: 25px; line-height: 1.2;
}

.melding {
    border-radius: 5px; padding: 13px 16px; margin-bottom: 18px; font-size: 14px;
    border: 1px solid var(--rand);
}
.melding.fout { background: color-mix(in srgb, var(--rood) 14%, transparent); border-color: var(--rood); }
.melding.goed { background: color-mix(in srgb, var(--groen) 14%, transparent); border-color: var(--groen); }

.veld { display: block; margin-bottom: 15px; }
.veld span {
    display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--zacht); margin-bottom: 6px;
}
.veld input[type="text"], .veld input[type="file"], .veld select, .veld textarea {
    width: 100%; background: var(--vel2); border: 1px solid var(--rand);
    border-radius: 4px; color: var(--tekst); padding: 11px 13px; font: inherit; outline: none;
}
.veld input:focus, .veld select:focus { border-color: var(--goud); }

.code-invoer {
    font-family: var(--letter-kop);
    font-size: 28px; letter-spacing: .28em; text-align: center; text-transform: uppercase;
}

/* ---------------- staat van een bestelling ---------------- */
.staat {
    display: inline-block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px; border: 1px solid var(--rand); color: var(--zacht);
}
.staat.wacht    { border-color: var(--goud); color: var(--goud2); }
.staat.goed     { border-color: var(--groen); color: var(--groen); }
.staat.afgewezen{ border-color: var(--rood); color: var(--rood); }

table.lijst { width: 100%; border-collapse: collapse; }
table.lijst th {
    text-align: left; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--zacht); font-weight: 700; padding: 0 12px 10px;
}
table.lijst td { padding: 12px; border-top: 1px solid var(--rand); vertical-align: middle; }
table.lijst .getal {
    font-family: var(--letter-kop); font-variant-numeric: tabular-nums; text-align: right;
}

/* ---------------- voet ---------------- */
.voet {
    border-top: 2px solid var(--rand);
    box-shadow: 0 -1px 0 var(--rand) inset;
    margin-top: 56px;
    background: color-mix(in srgb, var(--inkt) 82%, transparent);
}
.voet-binnen {
    max-width: 1180px; margin: 0 auto; padding: 26px 28px 40px;
    display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    font-size: 13px;
}
.voet-binnen b { font-family: var(--letter-merk); font-size: 20px; color: var(--goud2); font-weight: 400; }

@media (max-width: 720px) {
    .kop { flex-wrap: wrap; gap: 14px; padding: 14px 16px; }
    .nav { order: 3; width: 100%; }
    .blad { padding: 20px 16px; }
    .paginakop h1 { font-size: 32px; }
    body::before { background-size: 440px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ============================================================
   De studio: het model waar je je ontwerp op legt
   ============================================================ */

.studio-3d {
    display: grid; gap: 26px; margin: 20px 0 16px;
    grid-template-columns: minmax(280px, 1fr) minmax(250px, 300px);
    align-items: start;
}
@media (max-width: 760px) {
    .studio-3d { grid-template-columns: 1fr; }
}

/* Het venster waarin het model staat. Staand, want een mens is
   staand -- een breed venster zou hem klein maken. */
.st-scherm {
    position: relative; width: 100%; aspect-ratio: 3 / 4;
    border: 1px solid var(--rand); border-radius: 6px; overflow: hidden;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rand) 45%, transparent);
    background: var(--scherm);
    touch-action: none;
}
.st-scherm canvas { display: block; width: 100% !important; height: 100% !important; }

.st-melding {
    position: absolute; inset: 0; margin: 0; display: flex;
    align-items: center; justify-content: center;
    color: var(--zacht); font-size: 13.5px; pointer-events: none;
}
.st-melding[hidden] { display: none; }
.st-hint {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    padding: 9px 12px; text-align: center;
    font-size: 11px; letter-spacing: .05em; color: var(--zacht);
    background: var(--waas);
    pointer-events: none;
}

.st-bediening { display: flex; flex-direction: column; gap: 16px; }
.st-bediening .veld { margin: 0; }
.st-bediening input[type="range"] { width: 100%; accent-color: var(--goud); }

.st-groep { display: block; }
.st-label {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--zacht); margin-bottom: 8px;
}

.st-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.st-zones button {
    background: var(--vel2); border: 1px solid var(--rand); border-radius: 4px;
    color: var(--tekst); padding: 9px 8px;
    font-family: var(--letter-lees); font-size: 12.5px;
    cursor: pointer; text-align: center; transition: border-color .15s, color .15s;
}
.st-zones button:hover { border-color: var(--rand2); }
.st-zones button.aan {
    border-color: var(--goud); color: var(--goud2); background: var(--vel);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--goud) 30%, transparent);
}

.st-voet {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; padding-top: 10px;
    border-top: 1px solid var(--rand);
}
.st-prijs {
    font-family: var(--letter-kop);
    font-size: 30px; color: var(--goud2); line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   De keuring: een artiest kijkt een ontwerp na
   ============================================================ */

.keur-plaat {
    background: var(--papier); border: 1px solid var(--rand); border-radius: 6px;
    aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.keur-plaat img { width: 86%; height: 86%; object-fit: contain; }

.keur-feiten {
    display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
    margin: 0; font-size: 13.5px;
}
.keur-feiten dt {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--zacht); align-self: center;
}
.keur-feiten dd { margin: 0; }

.keur-knoppen {
    display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rand);
}
.keur-afkeuren { display: flex; gap: 8px; flex: 1; min-width: 280px; }
.keur-afkeuren input[type="text"] {
    flex: 1; background: var(--vel2); border: 1px solid var(--rand);
    border-radius: 4px; color: var(--tekst); padding: 11px 13px; font: inherit; outline: none;
}
.keur-afkeuren input:focus { border-color: var(--rood); }