:root {
    --paper:#f4eddf;
    --cream:#fffaf0;
    --ink:#34291f;
    --muted:#756a5d;
    --gold:#c39b37;
    --line:#d8ccb9;
    --dark:#2b241e
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:16px/1.6 Georgia,'Times New Roman',serif
}
a {
    color:inherit
}
.container {
    width:min(1180px,92%);
    margin:auto
}
.site-header {
    background:var(--cream);
    border-bottom:1px solid var(--line);
    padding:1rem 4%;
    display:flex;
    gap:2rem;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:5
}
.brand a {
    display:flex;
    gap:.8rem;
    text-decoration:none;
    align-items:center
}
.brand strong {
    font-size:1.5rem
}
.brand small {
    display:block;
    color:var(--muted)
}
.mark {
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border:2px solid var(--gold);
    border-radius:50%;
    font-weight:bold;
    color:var(--gold)
}
nav {
    display:flex;
    gap:1rem;
    flex-wrap:wrap
}
nav a {
    text-decoration:none
}
.hero {
    margin:2rem 0 3rem;
    min-height:360px;
    border:1px solid var(--line);
    background:linear-gradient(100deg,rgba(255,250,240,.98),rgba(255,250,240,.72)),radial-gradient(circle at 80% 50%,#d8bd65,transparent 35%);
    display:flex;
    align-items:center;
    padding:clamp(2rem,6vw,5rem)
}
.hero>div {
    max-width:650px
}
.hero h1 {
    font-size:clamp(2.2rem,5vw,4.5rem);
    line-height:1.05;
    margin:.2rem 0 1rem
}
.eyebrow {
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#8b6b20;
    font-size:.8rem
}
.button,button {
    display:inline-block;
    background:var(--dark);
    color:white;
    border:0;
    padding:.75rem 1.1rem;
    text-decoration:none;
    cursor:pointer;
    font:inherit
}
.button.secondary {
    background:#756a5d
}
.grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:1.2rem;
    margin:1rem 0 3rem
}
.card {
    background:var(--cream);
    border:1px solid var(--line)
}
.card>a {
    text-decoration:none
}
.thumb {
    aspect-ratio:4/3;
    background:#e7dcc9;
    display:grid;
    place-items:center;
    overflow:hidden;
    color:#aa8c42;
    font-size:3rem
}
.thumb img {
    width:100%;
    height:100%;
    object-fit:cover
}
.card-body {
    padding:1rem
}
.card h3 {
    margin:.3rem 0;
    font-size:1.2rem
}
.card small,.card p {
    color:var(--muted)
}
.sold,.badge {
    display:inline-block;
    background:#7b342d;
    color:white;
    padding:.2rem .5rem;
    margin-left:.5rem
}
.object {
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    gap:3rem;
    margin:3rem 0
}
.gallery {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:.8rem
}
.gallery a:first-child {
    grid-column:1/-1
}
.gallery img {
    width:100%;
    display:block;
    background:white;
    border:1px solid var(--line)
}
.placeholder {
    min-height:400px;
    display:grid;
    place-items:center;
    background:#e7dcc9;
    font-size:6rem;
    color:#aa8c42
}
.price {
    font-size:1.7rem;
    font-weight:bold
}
dl {
    display:grid;
    grid-template-columns:140px 1fr;
    border-top:1px solid var(--line)
}
dt,dd {
    margin:0;
    padding:.55rem 0;
    border-bottom:1px solid var(--line)
}
dt {
    font-weight:bold
}
.category-list {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:1rem
}
.category-list a {
    background:var(--cream);
    border:1px solid var(--line);
    padding:1.2rem;
    text-decoration:none;
    display:flex;
    justify-content:space-between
}
.search {
    display:flex;
    max-width:700px
}
.search input {
    flex:1
}
.prose {
    max-width:760px;
    margin:3rem auto
}
footer {
    margin-top:4rem;
    padding:2rem 4%;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    color:var(--muted)
}
input,select,textarea {
    width:100%;
    padding:.65rem;
    border:1px solid #b9ad9c;
    background:#fffdf8;
    color:var(--ink);
    font:inherit
}
label {
    display:block;
    margin:.6rem 0
}
.admin {
    background:#eee9df;
    font-family:system-ui,sans-serif
}
.adminbar {
    background:#2b241e;
    color:white;
    padding:1rem 4%;
    display:flex;
    justify-content:space-between;
    gap:1rem
}
.adminbar nav a {
    color:white
}
.admin .container {
    padding:2rem 0
}
.stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem
}
.stats div,.panel {
    background:white;
    border:1px solid #d3c8b8;
    padding:1.2rem;
    margin:1rem 0
}
.stats b {
    display:block;
    font-size:2rem
}
.stats span {
    color:#666
}
.progress {
    height:12px;
    background:#ddd;
    margin:.7rem 0
}
.progress i {
    display:block;
    height:100%;
    background:#9c7a28
}
.title-row {
    display:flex;
    align-items:center;
    justify-content:space-between
}
.table-wrap {
    overflow:auto
}
table {
    width:100%;
    border-collapse:collapse;
    background:white
}
th,td {
    text-align:left;
    padding:.7rem;
    border-bottom:1px solid #ddd
}
.mini {
    width:60px;
    height:45px;
    object-fit:cover
}
.two,.three {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem
}
.three {
    grid-template-columns:repeat(3,1fr)
}
.check {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin-right:1.5rem
}
.check input {
    width:auto
}
.admin-images {
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    margin-top:1rem
}
.admin-images img {
    width:120px;
    height:90px;
    object-fit:cover
}
.sticky-save {
    position:sticky;
    bottom:0;
    background:#eee9df;
    padding:1rem 0;
    display:flex;
    gap:1rem;
    align-items:center
}
.success {
    background:#d9eed5;
    padding:.4rem .7rem
}
.login {
    display:grid;
    place-items:center;
    min-height:100vh;
    background:var(--paper)
}
.loginbox {
    width:min(420px,90%);
    background:var(--cream);
    border:1px solid var(--line);
    padding:2rem
}
.error {
    background:#f3d9d5;
    padding:.6rem
}
.empty {
    padding:2rem;
    background:var(--cream);
    border:1px dashed var(--line)
}
@media(max-width:800px) {
    .site-header,.adminbar {
    position:static;
    align-items:flex-start;
    flex-direction:column
}
.object {
    grid-template-columns:1fr
}
.stats {
    grid-template-columns:repeat(2,1fr)
}
.two,.three {
    grid-template-columns:1fr
}
.gallery {
    grid-template-columns:1fr
}
.gallery a:first-child {
    grid-column:auto
}
}

.site-logo {
    display: block;
    width: min(430px, 72vw);
    height: auto;
}

.brand a {
    display: block;
}

@media (max-width: 800px) {
    .site-logo {
        width: min(390px, 88vw);
    }
}

/* =========================================================
   Afbeeldingsviewer en loep
   ========================================================= */

.gallery-image-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.gallery-image-button:first-child {
    grid-column: 1 / -1;
}

.gallery-image-button img {
    width: 100%;
    display: block;
    background: white;
    border: 1px solid var(--line);
}

.image-viewer[hidden] {
    display: none;
}

.image-viewer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: rgba(20, 15, 10, 0.96);
}

.viewer-open {
    overflow: hidden;
}

.image-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-height: 58px;
    padding: 0.5rem 1rem;
    color: #fff;
}

.image-viewer-toolbar span {
    margin-right: auto;
    color: #e9dfcf;
    font-size: 0.9rem;
}

.image-viewer-toolbar button {
    min-width: 42px;
    min-height: 42px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    font-size: 1.1rem;
}

.image-viewer-toolbar button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.image-viewer-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
    cursor: zoom-out;
}

.image-viewer-stage img {
    display: block;
    max-width: 90vw;
    max-height: calc(100vh - 90px);
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.15s ease;
    cursor: zoom-out;
}

.magnifier {
    position: fixed;
    z-index: 10002;
    display: none;
    width: 280px;
    height: 280px;
    border: 3px solid #fff;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

@media (max-width: 800px) {
    .gallery-image-button:first-child {
        grid-column: auto;
    }

    .image-viewer-toolbar span {
        display: none;
    }

    .image-viewer-toolbar {
        justify-content: center;
    }

    .magnifier {
        display: none !important;
    }
}

.category-order-buttons {
    display: flex;
    gap: 0.35rem;
}

.category-order-buttons form,
.category-table td > form {
    margin: 0;
}

.icon-button {
    min-width: 2.4rem;
    padding: 0.35rem 0.65rem;
    font-size: 1.15rem;
    line-height: 1;
}

.icon-button:disabled {
    cursor: default;
    opacity: 0.3;
}

.danger-button {
    background: #7b342d;
    padding: 0.45rem 0.7rem;
}

.error-message {
    padding: 0.8rem 1rem;
    border: 1px solid #a34a40;
    background: #fff2ef;
    color: #7b342d;
}

.muted {
    color: var(--muted);
}

.category-add-form input[name="name"] {
    min-width: 260px;
}


.sort-link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.sort-link:hover {
    text-decoration: underline;
}

.sortable-images {
    align-items: flex-start;
}

.admin-image-item {
    width: 120px;
}

.admin-image-item img {
    display: block;
    width: 120px;
    height: 90px;
    object-fit: cover;
}

.image-order-buttons {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.image-order-buttons form {
    margin: 0;
}

/* Categoriekaarten - v0.1.7 */
.category-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.category-list .category-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-width: 0;
    padding: .65rem;
    overflow: hidden;
    background: var(--cream);
    border: 1px solid var(--line);
    text-align: center;
    text-decoration: none;
}

.category-image {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    border: 1px solid var(--line);
}

.category-name {
    display: block;
    width: 100%;
    margin-top: .75rem;
    overflow: hidden;
    font-weight: bold;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-count {
    display: block;
    margin-top: .35rem;
    font-size: .9rem;
    line-height: 1.25;
    white-space: nowrap;
}

@media (max-width: 1050px) {
    .category-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .category-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .category-list {
        grid-template-columns: 1fr;
    }
}


/* v0.1.8 - fotobeheer, watermerk, subcategorieën */
.thumb, .gallery-photo-wrap, .admin-photo-preview, .viewer-image-wrap { position: relative; overflow: hidden; }
.gallery-photo-wrap { display: block; width: 100%; }
.watermark-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-28deg); color: rgba(255,255,255,.62); text-shadow: 0 1px 4px rgba(0,0,0,.55); font: bold clamp(20px,4vw,58px) Georgia,serif; letter-spacing: .06em; pointer-events: none; white-space: nowrap; user-select: none; }
.thumb .watermark-overlay { font-size: 1.35rem; }
.viewer-image-wrap { display:flex; align-items:center; justify-content:center; overflow:visible; }
.viewer-image-wrap img { max-width:90vw; max-height:calc(100vh - 90px); }
.viewer-watermark { z-index:2; font-size:clamp(34px,7vw,96px); }
.photo-manage-card { width: 180px; padding:.5rem; border:1px solid var(--line); background:var(--cream); }
.photo-manage-card .admin-photo-preview img { width:100%; height:120px; object-fit:cover; }
.photo-manage-card form { margin:.45rem 0 0; }
.photo-manage-card input[type=file] { padding:.25rem; font-size:.75rem; }
.small-button { width:100%; padding:.4rem .5rem; font-size:.85rem; }
.subcategory-name { padding-left:2rem; }
.category-parent td { border-top:2px solid var(--line); }
.category-add-form select { min-width:220px; }
.magnifier.watermarked::after {
    content: "YellowFields";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-28deg);
    color: rgba(255,255,255,.65);
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    font: bold 30px Georgia, serif;
    pointer-events: none;
}

/* v0.1.9 - watermerk, grotere loep, wachtwoordcontrole en dashboardfilters */
.gallery-photo-wrap .watermark-overlay,
.thumb .watermark-overlay,
.admin-photo-preview .watermark-overlay,
.viewer-image-wrap .watermark-overlay {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 5;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.68);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
    font-family: Georgia, serif;
    font-size: clamp(22px, 4vw, 64px);
    font-weight: 700;
    letter-spacing: 0.08em;
    transform: none;
    pointer-events: none;
    white-space: nowrap;
}

.gallery-photo-wrap .watermark-overlay::before,
.thumb .watermark-overlay::before,
.admin-photo-preview .watermark-overlay::before,
.viewer-image-wrap .watermark-overlay::before {
    content: "YellowFields";
    display: block;
    transform: rotate(-28deg);
}

.gallery-photo-wrap .watermark-overlay,
.thumb .watermark-overlay,
.admin-photo-preview .watermark-overlay,
.viewer-image-wrap .watermark-overlay {
    font-size: 0;
}

.thumb .watermark-overlay::before,
.admin-photo-preview .watermark-overlay::before {
    font-size: 1.25rem;
}

.gallery-photo-wrap .watermark-overlay::before {
    font-size: clamp(24px, 4vw, 58px);
}

.viewer-image-wrap .watermark-overlay::before {
    font-size: clamp(40px, 7vw, 100px);
}

.magnifier {
    width: 340px;
    height: 340px;
}

.password-field {
    position: relative;
    display: block;
}

.password-field input {
    width: 100%;
    padding-right: 6.5rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    width: auto;
    padding: 0.3rem 0.55rem;
    transform: translateY(-50%);
    font-size: 0.82rem;
}

.stats a {
    color: inherit;
    text-decoration: none;
}

.stats a:hover {
    text-decoration: underline;
}

.category-filter-group optgroup {
    font-weight: 700;
}
.viewer-watermark[hidden] {
    display: none !important;
}


/* v0.1.10 - betrouwbaar SVG-watermerk en verbeterd zoekformulier */
.watermark-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 8 !important;
    overflow: visible;
    transform: none !important;
    pointer-events: none;
}

.watermark-overlay text {
    fill: rgba(255, 255, 255, 0.72);
    stroke: rgba(50, 35, 20, 0.42);
    stroke-width: 2px;
    paint-order: stroke fill;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.watermark-overlay::before {
    content: none !important;
}

.viewer-watermark[hidden] {
    display: none !important;
}

.search-form {
    display: grid;
    grid-template-columns: minmax(320px, 2fr) minmax(230px, 1fr) auto;
    gap: 0.8rem;
    align-items: end;
    width: 100%;
    max-width: 1050px;
    margin-bottom: 0.75rem;
}

.search-form label {
    margin: 0;
}

.search-form label > span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.search-form input[type="search"] {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    font-size: 1rem;
}

.search-form select,
.search-form button {
    min-height: 46px;
}

.search-form button {
    width: auto;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .search-form {
        grid-template-columns: 1fr;
    }

    .search-form button {
        width: 100%;
    }
}


/* v0.1.11 - watermerklaag, instellingen en extra responsive afwerking */
.thumb,
.gallery-photo-wrap,
.admin-photo-preview,
.viewer-image-wrap {
    position: relative !important;
}

.watermark-overlay {
    --watermark-opacity: .55;
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    user-select: none;
    opacity: var(--watermark-opacity);
}

.watermark-text > span {
    display: block;
    width: calc(100% - clamp(48px, 18%, 400px));
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 7vw, 110px);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transform: rotate(-28deg);
    transform-origin: center;
    -webkit-text-stroke: clamp(1px, .16vw, 3px) rgba(25, 20, 15, .88);
    paint-order: stroke fill;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

.thumb .watermark-text > span,
.admin-photo-preview .watermark-text > span {
    font-size: clamp(14px, 2vw, 28px);
    -webkit-text-stroke-width: 1px;
}

.watermark-logo > img {
    display: block !important;
    width: calc(100% - clamp(48px, 18%, 400px)) !important;
    max-width: none !important;
    height: auto !important;
    max-height: 70% !important;
    object-fit: contain !important;
    transform: rotate(-28deg);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.75));
}

#viewerWatermark[hidden] { display: none !important; }
#viewerWatermark { position: absolute; inset: 0; z-index: 20; pointer-events:none; }
#viewerWatermark > .watermark-overlay { position:absolute !important; }

.settings-panel { max-width: 760px; }
.settings-form { display:grid; gap:1rem; }
.settings-form label { display:grid; gap:.35rem; }
.settings-form fieldset { display:flex; gap:1.5rem; flex-wrap:wrap; }
.settings-form fieldset label { display:flex; align-items:center; gap:.4rem; }
.settings-form input[type="range"] { width:100%; }
.watermark-logo-preview { max-width:360px; max-height:180px; object-fit:contain; background:#ddd; padding:.5rem; }

@media (max-width: 900px) {
    .site-header { align-items:flex-start; }
    .site-header nav { gap:.4rem .8rem; }
    .watermark-text > span { font-size: clamp(18px, 8vw, 70px); }
}

@media (max-width: 600px) {
    .container { padding-left:.75rem; padding-right:.75rem; }
    .site-logo { width:min(360px, 92vw); }
    .site-header nav { width:100%; }
    .gallery-photo-wrap .watermark-text > span { font-size:clamp(18px, 9vw, 46px); }
    .watermark-text > span,
    .watermark-logo > img { width:calc(100% - 48px) !important; }
    .magnifier { display:none !important; }
}


/* v1.4 webshop */
.cart-list{display:grid;gap:.75rem;margin:1rem 0}.cart-row{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center;padding:1rem;border:1px solid #cbbca5;border-radius:8px;background:#fffaf1}.cart-total{max-width:520px;margin-left:auto;padding:1rem;background:#f2eadc;border-radius:8px}.checkout-form{max-width:850px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-grid label{display:grid;gap:.35rem}.form-grid .wide{grid-column:1/-1}.notice{padding:.8rem 1rem;border-left:4px solid #8a6a45;background:#f5eee2}.error{padding:.8rem 1rem;background:#f7dfd9;border-left:4px solid #8b352c;margin:1rem 0}.buy-form{margin:1rem 0}.admin-table input[type=text],.admin-table input:not([type]){max-width:100%}@media(max-width:650px){.cart-row{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.admin-table{display:block;overflow-x:auto}}

/* v1.5 */
.cart-actions { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-top:1rem; }
.privacy-check { display:flex !important; align-items:flex-start; gap:.55rem; }
.privacy-check input { flex:0 0 auto; width:auto !important; margin:.22rem 0 0 0 !important; }
.privacy-check span { flex:1 1 auto; }