@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("fonts/atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("fonts/atkinson-700.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("fonts/bricolage-800.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 600; font-display: swap; src: url("fonts/caveat-600.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 700; font-display: swap; src: url("fonts/caveat-700.woff2") format("woff2"); }
/* Lora and Caveat (SIL Open Font License): the "Sierlijk" and handwritten fonts of a card, with bold and italic for formatted parts. */
@font-face { font-family: "Lora"; font-weight: 400; font-display: swap; src: url("fonts/lora-400.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 700; font-display: swap; src: url("fonts/lora-700.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/lora-400-italic.woff2") format("woff2"); }

:root {
  --ground: #FBF8F1;
  --surface: #FFFFFF;
  --sand: #F3EEE3;
  --kraft: #D9B98C;
  --kraft-dark: #C29A66;
  --ink: #17221C;
  --muted: #4C5751;
  --line: #E4DED2;
  --green: #12402D;
  --green-deep: #0B2A1D;
  --lime: #D8F25C;
  --red: #C8392F;
  --navy: #1D3557;
  --radius: 16px;
  --shadow-card: 0 1px 1px rgb(23 34 28 / .08), 0 12px 28px rgb(23 34 28 / .18);
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 18px/1.5 var(--body); }
img, svg { display: block; max-width: 100%; }
/* width and height attributes reserve the space; CSS decides the size. */
img { height: auto; }
a { color: var(--green); text-underline-offset: .2em; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2 { font-family: var(--display); font-weight: 800; color: var(--green); letter-spacing: -.02em; line-height: 1.05; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
[hidden] { display: none !important; }
/* An e-mail address stays on one line where it fits, and breaks anywhere where it does not. */
.nowrap { white-space: nowrap; }
@media (max-width: 480px) { .nowrap { white-space: normal; overflow-wrap: anywhere; } }
/* The honeypot of a form (app/spam.php): off-screen, not display:none, which some bots skip. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
.section { margin-top: 72px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-head a { font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.eyebrow { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.icon { width: 22px; height: 22px; flex: none; }
.heart { color: var(--red); }

/* Paper card: a printed card with border and shadow around the painting. */
.paper-card { display: block; padding: 5%; background: #FFFDF9; border-radius: 3px; box-shadow: var(--shadow-card); }
.paper-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Until a lazy picture arrives its place reads as a photo still coming, not
   as an empty tile in the colour of the page. */
.paper-card img, .occ-tile img { background: linear-gradient(135deg, #D9CFBC, #ECE4D4 55%, #D3C8B3); }
.paper-card.portrait img { aspect-ratio: 3 / 4; }
.paper-card.square img { aspect-ratio: 1; }

/* Preview bar: navigation between the prototype screens. */
.preview-label { flex: none; padding-right: 6px; color: var(--lime); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--ground); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.brand img { height: 38px; width: auto; transition: transform .2s ease; }
.brand:hover img { transform: rotate(-3deg) scale(1.04); }
.main-nav { display: none; gap: 24px; }
.main-nav a { color: var(--ink); font-weight: 700; text-decoration: none; padding: 10px 0; }
.main-nav a:hover, .main-nav a.is-current { color: var(--green); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 4px; text-underline-offset: 6px; }
/* Keyboard users can jump past the header. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--green); color: var(--ground); font-weight: 700; }
.skip-link:focus { top: 12px; }
.header-search { display: none; align-items: center; gap: 8px; margin-left: auto; height: 46px; padding: 0 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); }
.header-search input { border: 0; outline: 0; background: transparent; width: 200px; }
.header-search:focus-within { border-color: var(--green); }
/* Same height and corners as the menu button next to it. */
.account-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; padding: 0 14px; border-radius: 14px; background: var(--green); color: var(--ground); font-weight: 700; text-decoration: none; margin-left: auto; }
.account-link span { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .account-link:hover { background: var(--green-deep); } }
.mobile-menu { position: relative; }
.flash { margin: 16px 0 0; padding: 14px 18px; border-radius: 14px; background: #F6FBE1; border: 2px solid #DCEB9C; font-weight: 700; }
.narrow-page { max-width: 640px; }
.mobile-menu summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu nav { position: absolute; right: 0; top: 56px; z-index: 10; display: flex; flex-direction: column; min-width: 220px; padding: 8px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 16px 40px rgb(23 34 28 / .18); }
.mobile-menu nav a { padding: 12px 14px; border-radius: 10px; color: var(--ink); font-weight: 700; text-decoration: none; }
.mobile-menu nav a:hover { background: var(--sand); }
.mobile-menu nav a + a { border-top: 1px solid var(--line); border-radius: 0; }
.mobile-menu nav a.is-current { color: var(--green); box-shadow: inset 4px 0 0 var(--lime); }
.mobile-menu nav { min-width: min(300px, calc(100vw - 32px)); }
.mobile-menu-search { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 0 12px; border: 2px solid var(--line); border-radius: 12px; }
.mobile-menu-search input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: none; font: inherit; outline: none; }
.mobile-menu[open] summary::after { content: ""; position: fixed; inset: 0; z-index: 5; background: rgb(23 34 28 / .25); cursor: default; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 14px; border: 2px solid transparent; font-weight: 700; text-decoration: none; cursor: pointer; background: none; transition: transform .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: var(--ground); }
.btn-primary:hover { background: var(--green-deep); }
.btn-lime { background: var(--lime); color: var(--green); }
.btn-lime:hover { background: #E4F78A; }
.btn-outline { border-color: var(--green); color: var(--green); background: var(--surface); }
@media (hover: hover) { .btn-outline:hover { background: var(--sand); } }
.btn-outline-light { border-color: var(--lime); color: var(--lime); }
.btn-dashed { border: 2px dashed var(--green); color: var(--green); background: var(--surface); }
.btn-whatsapp { background: #25D366; color: var(--green-deep); }
.btn-whatsapp:hover { background: #1FBE5A; }
.btn-block { display: flex; width: 100%; }
.btn-big { min-height: 60px; font-size: 19px; }
@media (max-width: 400px) { .btn-big { padding-inline: 14px; font-size: 17px; } }
.link-button { border: 0; background: none; color: var(--green); text-decoration: underline; cursor: pointer; padding: 8px; }
.icon-button { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border: 2px solid var(--green); border-radius: 12px; color: var(--green); }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; }
.pill[aria-pressed="true"] { border-color: var(--green); }
@media (hover: hover) { .pill:hover { border-color: var(--green); } }
.pill[aria-pressed="true"] { background: var(--lime); color: var(--green); font-weight: 700; }

/* Home: hero */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(circle at 85% 30%, rgb(216 242 92 / .35), transparent 32%),
  radial-gradient(circle at 10% 90%, rgb(217 185 140 / .35), transparent 35%), var(--ground); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 36px; padding-bottom: 56px; }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%); }
.lead { margin: 18px 0 24px; color: var(--muted); font-size: 1.15em; max-width: 34em; }
.search-field { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 6px 6px 18px; border: 2px solid var(--green); border-radius: 20px; background: var(--surface); color: var(--green); box-shadow: 0 10px 30px rgb(18 64 45 / .1); }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }
/* The field itself shows the focus, its input has no outline of its own. */
.search-field:focus-within { outline: 3px solid var(--lime); outline-offset: 2px; }
.search-field .btn { min-height: 50px; padding: 0 18px; }
@media (max-width: 360px) {
  .search-field { gap: 6px; padding-left: 12px; }
  .search-field .btn { padding: 0 12px; }
}
.usp { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 16px; font-weight: 700; }
.usp li { display: flex; align-items: center; gap: 8px; }
.usp .icon { color: var(--green); width: 20px; height: 20px; }

.card-fan { position: relative; display: block; height: 340px; margin: 0 auto; width: min(100%, 520px); }
.card-fan .paper-card { position: absolute; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.fan-1 { width: 44%; left: 4%; top: 12%; transform: rotate(-11deg); }
.fan-2 { width: 34%; right: 4%; top: 4%; transform: rotate(9deg); }
.fan-3 { width: 68%; left: 16%; top: 26%; transform: rotate(-2deg); z-index: 2; animation: float 6s ease-in-out infinite; }
.card-fan:hover .fan-1 { transform: rotate(-16deg) translate(-14px, -6px); }
.card-fan:hover .fan-2 { transform: rotate(14deg) translate(14px, -10px); }
.fan-envelope { position: absolute; left: 10%; right: 10%; bottom: 0; height: 46%; border-radius: 8px; background: linear-gradient(160deg, rgb(255 255 255 / .08), rgb(0 0 0 / .18)), url(/assets/img/envelope/kraft.webp) center / cover; box-shadow: 0 18px 30px rgb(80 56 24 / .22); }
.fan-envelope::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(170deg, rgb(255 255 255 / .1), rgb(0 0 0 / .08)), url(/assets/img/envelope/kraft.webp) center / cover; clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); filter: brightness(1.05); }
.fan-note { position: absolute; z-index: 3; right: 2%; bottom: 8%; padding: 10px 14px; transform: rotate(4deg); background: #FFF8C9; font: 600 22px/1.1 var(--hand); color: var(--navy); box-shadow: 0 6px 14px rgb(0 0 0 / .14); }
@keyframes float { 50% { transform: rotate(-1deg) translateY(-8px); } }

/* Home: Christmas band */
.season { position: relative; overflow: hidden; padding: 56px 0 64px; background: var(--green); color: var(--ground); }
.season .wrap { position: relative; z-index: 1; }
.season h2 { color: var(--ground); }
.season .eyebrow { color: var(--lime); }
.season-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.rail { display: flex; gap: 22px; overflow-x: auto; padding: 8px 4px 18px; margin: 0 -4px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--lime) transparent; }
/* Arrows for mouse users; touch scrolls the rail. A fade marks the side with more cards. */
.rail-wrap { position: relative; }
.rail-wrap.has-more-end .rail { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 70px), transparent); }
.rail-wrap.has-more-start.has-more-end .rail { -webkit-mask-image: linear-gradient(to right, transparent, #000 70px, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(to right, transparent, #000 70px, #000 calc(100% - 70px), transparent); }
.rail-wrap.has-more-start:not(.has-more-end) .rail { -webkit-mask-image: linear-gradient(to right, transparent, #000 70px); mask-image: linear-gradient(to right, transparent, #000 70px); }
.rail-arrow { position: absolute; top: 79px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--lime); color: var(--green); box-shadow: 0 6px 18px rgb(0 0 0 / .3); cursor: pointer; transition: opacity .2s ease; }
.rail-arrow:disabled { opacity: 0; pointer-events: none; }
.rail-prev { left: -18px; }
.rail-next { right: -18px; }
.rail-item { flex: none; width: 250px; scroll-snap-align: start; color: var(--ground); text-decoration: none; }
.rail-item .paper-card { transition: transform .3s ease; }
.rail-item:hover .paper-card { transform: rotate(-2deg) translateY(-6px); }
.rail-title { display: block; margin-top: 14px; font-weight: 700; }
.rail-credit { display: block; font-size: 15px; color: #BFD3C7; }
.snow { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* On a received card the snow falls over the card too: it is the card's own effect. */
.receive > .snow { z-index: 4; }

/* Home: occasions */
.occasions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.occasion { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: 0 8px 20px rgb(23 34 28 / .14); }
.occasion img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.occasion::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgb(8 20 14 / .82)); }
.occasion span { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; font: 800 22px/1.1 var(--display); }
.occasion:hover img { transform: scale(1.06); }
.occasion-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Home: old masters */
.masters { display: grid; gap: 32px; align-items: center; }
.masters-art .paper-card { transform: rotate(-2.5deg); }
.masters-text p { margin: 0 0 16px; color: var(--muted); }
.masters-text h2 { margin-bottom: 16px; }
.masters-text .masters-story { padding: 14px 16px; border-radius: 12px; background: var(--sand); color: var(--ink); }

/* Home: promos */
.promos { display: grid; gap: 18px; }
.promo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 28px; border-radius: 28px; color: var(--ink); text-decoration: none; transition: transform .25s ease; }
.promo:hover { transform: translateY(-4px); }
.promo-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.promo-body > span:not(.btn) { color: var(--muted); }
.promo-group { background: var(--lime); }
.promo-group .promo-body > span:not(.btn) { color: #1F3A2C; }
.promo-calendar { background: var(--surface); border: 2px solid var(--line); }
.mini-board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; border-radius: 14px; background: #E6DAC3; }
.mini-note { padding: 8px; background: #FFFDF8; font: 600 18px/1.1 var(--hand); color: var(--navy); box-shadow: 0 3px 6px rgb(0 0 0 / .12); }
.m1 { transform: rotate(-3deg); } .m2 { transform: rotate(2deg); color: #7A1F18; } .m3 { transform: rotate(-1deg); color: var(--green); }
.mini-cal { display: flex; flex-direction: column; width: 110px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); transform: rotate(-4deg); }
.mini-cal-month { padding: 4px; background: var(--red); color: #fff; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; }
.mini-cal-day { padding: 6px 0 10px; background: var(--surface); font: 800 52px/1 var(--display); color: var(--green); text-align: center; }

/* Home: steps */
.steps ol { display: grid; gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.steps li { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 22px; background: var(--surface); border: 2px solid var(--line); }
.steps li > span:last-child { color: var(--muted); }
.step-number { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 50%; background: var(--green); color: var(--lime); font: 800 22px var(--display); }

.ad { display: flex; align-items: center; justify-content: center; border: 2px dashed #CFC7B8; border-radius: var(--radius); color: #6A736E; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ad-wide { min-height: 110px; }
.ad-row { grid-column: 1 / -1; min-height: 100px; }

/* Shared page parts */
main { padding-bottom: 64px; }
.crumbs { padding-top: 18px; font-size: 16px; color: var(--muted); }
/* Links of at least 24px high, easy to tap. */
.crumbs a { display: inline-block; padding: 3px 0; }
.page-head { display: flex; flex-direction: column; gap: 6px; padding: 14px 0 24px; }
.page-head p { margin: 0; }
.page-head.with-step { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
/* A progress line, not buttons: the steps are plain text joined by a rule. */
.stepper { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.stepper li { display: flex; align-items: center; gap: 8px; }
.stepper li + li::before { content: ""; width: 28px; height: 2px; border-radius: 1px; background: var(--line); }
.stepper span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); font-size: 13px; font-weight: 700; }
.stepper li[aria-current] { color: var(--ink); font-weight: 700; }
.stepper a { display: flex; align-items: center; gap: 8px; color: var(--green); font-weight: 700; }
.stepper a span { border-color: var(--green); text-decoration: none; }
.stepper a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.share-back { margin: 14px 0 0; }
.share-back .btn { min-height: 44px; padding: 0 16px; }
.stepper li[aria-current] span { border-color: var(--green); background: var(--green); color: var(--lime); }
.field { display: flex; flex-direction: column; gap: 6px; }
/* The text of a label wraps as text; the gap only separates an icon from it. */
.field label, .box-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .3em; font-weight: 700; font-size: 16px; margin: 0; }
:is(.field label, .box-title) > .icon { margin-right: 4px; }
.field input, .field textarea { padding: 13px 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); }
/* Day and time pickers (dayOptions(), timeOptions()): a select with a chevron, like the inputs beside it. */
.field select { width: 100%; min-height: 52px; padding: 0 40px 0 14px; border: 2px solid var(--line); border-radius: 14px; appearance: none; background: linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 20px) 50% / 6px 6px no-repeat, linear-gradient(135deg, var(--ink) 50%, transparent 50%) calc(100% - 14px) 50% / 6px 6px no-repeat, var(--surface); font: inherit; color: var(--ink); cursor: pointer; }
.field select:focus { outline: 0; border-color: var(--green); }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--green); }
.field textarea { resize: vertical; }
.box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 2px solid var(--line); }
.box > p { margin: 0; }
.helper { background: #F6FBE1; border-color: #DCEB9C; }
.helper .icon { color: var(--green); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); font-size: 16px; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; accent-color: var(--green); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Category */
.category-hero { position: relative; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; background: var(--green-deep); color: #fff; }
.category-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.category-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgb(8 20 14 / .8)); }
/* Search in the cards and the view switch side by side, wrapping on a phone. */
.category-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 18px 0 16px; }
.category-tools .category-search { flex: 1 1 280px; margin: 0; }
.category-tools .view-switch { margin: 0; }
.category-tools .category-search-result { flex-basis: 100%; margin: 0; }
.category-hero-text { position: relative; z-index: 2; padding-top: 24px; padding-bottom: 28px; }
.category-hero h1 { color: #fff; margin: 10px 0 6px; }
.category-hero p { margin: 0; color: #E3ECE6; }
.category-wishes { margin: 0 0 16px; }
.category-wishes a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.category-content { max-width: 68ch; margin: 0 0 40px; font-size: 17px; line-height: 1.65; }
.category-content h2 { margin: 0 0 10px; font-size: 24px; }
.category-content p { margin: 0 0 12px; }
.category-intro { max-width: 68ch; margin: 8px 0 36px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.category-hero .crumbs { padding-top: 0; }
.category-hero .crumbs, .category-hero .crumbs a { color: #E3ECE6; text-shadow: 0 1px 3px rgb(0 0 0 / .6); }
.filters { display: flex; gap: 8px; overflow-x: auto; margin: 22px -20px 26px; padding: 0 20px 6px; scrollbar-width: none; }
.filter { flex: none; display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-size: 16px; cursor: pointer; }
.filter:hover { border-color: var(--green); }
.filter[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--ground); font-weight: 700; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.card-thumb { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.thumb-stage { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 4; padding: 6%; border-radius: 18px; background: var(--sand); }
.thumb-stage .paper-card { width: 100%; transition: transform .3s ease; }
.thumb-stage .paper-card.portrait { width: 50%; }
.card-thumb:hover .paper-card { transform: rotate(-2deg) translateY(-6px) scale(1.03); }
.thumb-title { margin-top: 12px; font-weight: 700; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.thumb-credit { font-size: 14px; color: var(--muted); }
/* The compact view of a card list (the default; js/cardgrid.js switches):
   only the photos, close together. Titles stay for screen readers. */
.view-switch { display: inline-flex; gap: 4px; margin: 0 0 16px; padding: 4px; border-radius: 999px; background: var(--sand); }
.view-option { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 600 15px/1 var(--body); cursor: pointer; }
.view-option[aria-pressed="true"] { background: var(--surface); color: var(--green); box-shadow: 0 2px 6px rgb(23 34 28 / .12); }
.card-grid.is-compact { gap: 10px; grid-auto-flow: row dense; }
.is-compact .thumb-stage { aspect-ratio: auto; padding: 0; background: none; border-radius: 10px; overflow: hidden; }
.is-compact .paper-card, .is-compact .paper-card.portrait { width: 100%; padding: 0; border-radius: 10px; box-shadow: none; }
.is-compact .paper-card img { display: block; aspect-ratio: 3 / 2; border-radius: 10px; }
.is-compact .card-thumb:hover .paper-card { transform: none; }
.is-compact .card-thumb:hover img { filter: brightness(1.06); }
.is-compact .thumb-title, .is-compact .thumb-credit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-compact .badge { display: none; }
.is-compact .own-photo .own-photo-box { aspect-ratio: 3 / 2; gap: 2px; padding: 8px; border-radius: 10px; font-size: 13px; line-height: 1.2; }
/* The own-photo tile is a row of its own, so a page of cards fills its rows. */
.card-grid .own-photo { grid-column: 1 / -1; }
.card-grid .own-photo .own-photo-box, .is-compact .own-photo .own-photo-box { flex-direction: row; flex-wrap: wrap; aspect-ratio: auto; gap: 4px 12px; padding: 14px 18px; font-size: 16px; }
.card-grid .own-photo .thumb-title { display: none; }
.is-compact .own-photo-box .icon { width: 22px; height: 22px; }
@media (min-width: 1100px) { .card-grid.is-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
/* Suggestions under a search field (js/suggest.js). */
.has-suggest { position: relative; }
.suggest-list { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; min-width: 240px; margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: var(--surface); box-shadow: 0 10px 30px rgb(23 34 28 / .2); text-align: left; }
.suggest-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); font-size: 16px; cursor: pointer; }
.suggest-list li[aria-selected="true"], .suggest-list li:hover { background: var(--sand); }
.suggest-list .is-page .suggest-text { font-weight: 700; color: var(--green); }
.suggest-count { flex: none; color: var(--muted); font-size: 14px; }
/* The search within an occasion's or theme's cards. */
.category-search { display: flex; align-items: center; gap: 8px; max-width: 460px; margin: 22px 0 0; padding: 0 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); }
.category-search:focus-within { border-color: var(--green); }
.category-search .icon { flex: none; width: 20px; height: 20px; color: var(--muted); }
.category-search input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: none; font: inherit; font-size: 16px; outline: none; }
.category-search-result { margin: 14px 0 0; color: var(--muted); }
/* A card shown larger after the pointer rests on it (js/cardgrid.js). */
.card-peek { position: fixed; z-index: 50; pointer-events: none; padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: 0 12px 40px rgb(23 34 28 / .35); opacity: 0; transform: scale(.96); transition: opacity .15s ease, transform .15s ease; }
.card-peek.is-shown { opacity: 1; transform: none; }
.card-peek img { display: block; width: 100%; height: auto; border-radius: 10px; }
.card-peek p { margin: 6px 4px 2px; font-weight: 700; font-size: 15px; }
.badge { position: absolute; top: 12px; left: 12px; padding: 2px 10px; border-radius: 999px; background: var(--lime); color: var(--green); font-size: 13px; font-weight: 700; }
.own-photo-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 5 / 4; padding: 14px; border: 2px dashed var(--green); border-radius: 18px; background: var(--surface); color: var(--green); text-align: center; }
.own-photo-box .icon { width: 40px; height: 40px; }
.own-photo-box span { font-size: 14px; color: var(--muted); }

/* Card view: one markup, five layouts (classic, folded, overlay, postcard, polaroid). */
.card-view { display: flex; flex-direction: column; gap: 14px; }
.cv-card { position: relative; }
.cv-face { background: #FFFDF9; }
/* The frame takes the picture's own shape in every layout (frameShape()), so a layout never crops it differently. */
.shape-landscape { --frame: 3 / 2; --frame-height: .6667; --card-width: 560px; }
.shape-square { --frame: 1; --frame-height: 1; --card-width: 460px; }
.shape-portrait { --frame: 2 / 3; --frame-height: 1.5; --card-width: 400px; }
.cv-picture { position: relative; aspect-ratio: var(--frame, 3 / 2); overflow: hidden; background: var(--sand); }
.cv-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A panorama or a very tall photo (app.js sets is-fitted): shown whole, on a blurred copy of itself. */
.cv-picture.is-fitted::before { content: ""; position: absolute; inset: -24px; background: var(--photo-backdrop) center / cover no-repeat; filter: blur(20px) saturate(1.1); opacity: .85; }
.cv-picture.is-fitted img[data-card-photo] { object-fit: contain; }
.cv-message { margin: 0; color: var(--navy); overflow-wrap: anywhere; }
.cv-message [data-card-message] { margin: 0; white-space: pre-line; }
.cv-message .is-new-text { animation: new-text 1.4s ease-out; border-radius: 6px; }
@keyframes new-text { 0%, 30% { background: rgb(214 242 75 / .55); box-shadow: 0 0 0 6px rgb(214 242 75 / .55); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .cv-message .is-new-text { animation: none; } }
/* The sender's name under the message (cardSigned()). */
.cv-sign { margin: .45em 0 0; text-align: right; }
.cv-read-all { align-self: center; }
.fit-warning { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: #FBE9D9; color: #6B3410; font-size: 15px; }
/* A message that still does not fit fades out at the bottom: "Lees de hele boodschap" shows the rest. */
.has-overflow .layout-polaroid .cv-message-front, .layout-polaroid.has-overflow .cv-message-front, .layout-postcard.has-overflow .cv-message-back { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.receive .cv-read-all { color: var(--lime); }
.cv-read-dialog { width: min(560px, calc(100vw - 32px)); max-width: none; box-sizing: border-box; padding: 26px 24px; border: 0; border-radius: 16px; background: #FFFDF9; box-shadow: 0 24px 60px rgb(0 0 0 / .35); }
.cv-read-dialog::backdrop { background: rgb(23 34 28 / .55); }
.cv-read-dialog .cv-message { font-size: 26px; }
.cv-read-dialog .cv-message p:first-child { margin: 0; white-space: pre-line; }
.cv-read-dialog form { position: sticky; bottom: -26px; margin: 18px -24px -26px; padding: 12px 24px 18px; background: #FFFDF9; text-align: center; }
.font-hand .cv-message { font: 600 clamp(24px, 2.6vw, 30px)/1.25 var(--hand); }
.font-serif .cv-message { font: 400 20px/1.55 "Lora", Georgia, serif; }
/* Each font choice is shown in its own letters. */
[data-font="hand"] { font-family: var(--hand); font-size: 20px; font-weight: 600; }
[data-font="serif"] { font-family: "Lora", Georgia, serif; }
.font-plain .cv-message { font: 400 19px/1.55 var(--body); }
.cv-back, .cv-post { display: none; }
.cv-credit { margin: 0; font-size: 13px; color: var(--muted); }
.receive .cv-credit { color: #BFD3C7; }
.cv-turn { align-self: center; }
.receive .cv-turn { background: transparent; border-color: var(--lime); color: var(--lime); }

.layout-classic .cv-card, .layout-overlay .cv-card { border-radius: 6px; overflow: hidden; box-shadow: 0 2px 2px rgb(23 34 28 / .06), 0 24px 50px rgb(23 34 28 / .22); }
.layout-classic .cv-message-front { padding: 22px 26px 28px; }
/* A long message stops at a readable height; the rest is behind "Lees de hele boodschap". */
.layout-classic .cv-message-front { max-height: 22rem; overflow: hidden; }
.layout-classic.has-overflow .cv-message-front { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }

/* The message lies on the lower part of the picture; what does not fit opens with "Lees de hele boodschap". */
.layout-overlay .cv-front { position: relative; aspect-ratio: var(--frame, 3 / 2); overflow: hidden; }
.layout-overlay .cv-picture { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.layout-overlay .cv-message-front { position: absolute; left: 6%; right: 6%; bottom: 6%; z-index: 1; max-height: 62%; overflow: hidden; padding: 16px 20px; border-radius: 6px; background: rgb(255 253 249 / .9); box-shadow: 0 8px 24px rgb(0 0 0 / .2); }
.layout-overlay.has-overflow .cv-message-front { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }

.layout-polaroid .cv-card { width: min(100%, 460px); margin: 8px auto; padding: 5% 5% 0; background: #fff; box-shadow: 0 2px 2px rgb(23 34 28 / .06), 0 22px 44px rgb(23 34 28 / .22); transform: rotate(-1.5deg); }
.layout-polaroid .cv-face { background: none; }
.layout-polaroid .cv-message-front { max-height: 15rem; margin-bottom: 22px; padding: 14px 4px 0; text-align: center; overflow: hidden; }
.layout-polaroid.font-hand .cv-message { font-size: 26px; }

.layout-folded .cv-card { display: grid; width: min(100%, var(--card-width, 560px)); margin: 0 auto; box-shadow: 0 2px 2px rgb(23 34 28 / .06), 0 24px 50px rgb(23 34 28 / .22); }
/* A real folded card: the cover with the picture lies on the inside page with
   the message, both the same size. Opening turns the cover to the left on its
   left edge (app.js turnFolded()); open, the inside page is what shows. */
.layout-folded .cv-front, .layout-folded .cv-back { grid-area: 1 / 1; }
.layout-folded .cv-front { position: relative; z-index: 1; transform-origin: left center; background: #FFFDF9; }
.layout-folded .cv-message-front { display: none; }
.layout-folded .cv-back { display: flex; flex-direction: column; justify-content: safe center; box-sizing: border-box; aspect-ratio: var(--frame, 3 / 2); min-height: 0; overflow: hidden; padding: 28px 26px; background: linear-gradient(90deg, rgb(0 0 0 / .08), transparent 24px), #FFFDF9; }
.layout-folded.is-open .cv-front { visibility: hidden; }
/* While the cover is past upright it shows the plain back of the paper. */
.layout-folded .cv-front.is-paper-back { background: linear-gradient(135deg, #F4EFE4, #E9E1D1); }
.layout-folded .cv-front.is-paper-back > * { visibility: hidden; }
/* The inside page is as large as the cover: a long message shrinks, then shows "Lees de hele boodschap". */
.layout-folded .cv-message-back { min-height: 0; overflow: hidden; }
.layout-folded.has-overflow .cv-message-back { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }

.layout-postcard .cv-card { aspect-ratio: var(--frame, 3 / 2); perspective: 1600px; }
.layout-postcard .cv-face { position: absolute; inset: 0; border-radius: 4px; backface-visibility: hidden; box-shadow: 0 2px 2px rgb(23 34 28 / .06), 0 20px 44px rgb(23 34 28 / .22); transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.layout-postcard .cv-front { overflow: hidden; }
.layout-postcard .cv-picture { aspect-ratio: auto; height: 100%; }
.layout-postcard .cv-message-front { display: none; }
.layout-postcard .cv-back { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 5%; padding: 6%; transform: rotateY(180deg); background: #FBF6EA; }
.layout-postcard .cv-message-back { overflow: hidden; border-right: 1px solid #D8CDB8; padding-right: 6%; }
.layout-postcard.font-hand .cv-message-back { font-size: clamp(16px, 3.4vw, 24px); }
.layout-postcard.font-serif .cv-message-back, .layout-postcard.font-plain .cv-message-back { font-size: clamp(14px, 2.4vw, 16px); }
/* A standing postcard: the message above, the address below. */
.shape-portrait.layout-postcard .cv-back { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.6fr) minmax(0, 1fr); }
.shape-portrait.layout-postcard .cv-message-back { border-right: 0; border-bottom: 1px solid #D8CDB8; padding: 0 0 6%; }
/* The address row of a standing postcard is short: a smaller stamp, closer lines, nothing past the edge. */
.layout-postcard .cv-back { overflow: hidden; }
.shape-portrait.layout-postcard .cv-post { gap: 8%; }
.shape-portrait .cv-stamp { width: 22%; }
.layout-postcard .cv-post { display: flex; flex-direction: column; align-items: stretch; gap: 14%; }
.cv-stamp { align-self: flex-end; width: 34%; padding: 4px; background: #fff; outline: 2px dashed #D8CDB8; outline-offset: -1px; }
.cv-stamp img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cv-address { margin-top: auto; font: 600 clamp(18px, 3.4vw, 26px)/1 var(--hand); color: var(--navy); border-bottom: 1px solid #D8CDB8; padding-bottom: 4px; }
.cv-line { display: block; border-bottom: 1px solid #D8CDB8; height: 1px; }
.layout-postcard.is-turned .cv-front { transform: rotateY(-180deg); }
.layout-postcard.is-turned .cv-back { transform: rotateY(0); }

/* Layout chooser */
.layouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.layout-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; cursor: pointer; color: var(--ink); }
.layout-choice > span:last-child { font-size: 14px; color: var(--muted); line-height: 1.3; }
.layout-choice[aria-pressed="true"] { border: 3px solid var(--green); background: #F6FBE1; }
.layout-icon { position: relative; display: block; width: 64px; height: 48px; margin-bottom: 6px; border-radius: 4px; background: #FFFDF9; box-shadow: 0 2px 6px rgb(23 34 28 / .18); overflow: hidden; }
.layout-icon span { position: absolute; display: block; }
.li-classic span:first-child { inset: 0 0 40% 0; background: #7FA5C4; }
.li-classic span:last-child { left: 12%; right: 30%; bottom: 14%; height: 4px; border-radius: 2px; background: #9AA49F; box-shadow: 0 -8px 0 #9AA49F; }
.li-folded span:first-child { inset: 0 0 50% 0; background: #7FA5C4; }
.li-folded span:last-child { left: 12%; right: 30%; bottom: 18%; height: 4px; border-radius: 2px; background: #9AA49F; box-shadow: 0 -7px 0 #9AA49F, 0 -26px 0 -2px rgb(0 0 0 / .08); }
.li-overlay span:first-child { inset: 0; background: #7FA5C4; }
.li-overlay span:last-child { left: 10%; right: 10%; bottom: 10%; height: 14px; border-radius: 2px; background: #FFFDF9; }
.li-postcard { background: #FBF6EA; }
.li-postcard span:first-child { right: 8%; top: 12%; width: 22%; height: 34%; background: #E9A23B; outline: 1px dashed #C9B89A; }
.li-postcard span:last-child { left: 10%; width: 44%; top: 30%; height: 4px; border-radius: 2px; background: #9AA49F; box-shadow: 0 8px 0 #9AA49F, 0 16px 0 #9AA49F; }
.li-polaroid span:first-child { inset: 10% 22% 34% 22%; background: #7FA5C4; }
.li-reveal { background: linear-gradient(135deg, #D9DDE1, #B9BEC4); }
.li-reveal span:first-child { left: 0; top: 0; width: 48%; height: 100%; background: #7FA5C4; }
.li-reveal span:last-child { left: 14%; top: 42%; width: 26%; height: 5px; border-radius: 2px; background: #FFFDF9; }
.li-scene span:first-child { inset: 0; background: #7FA5C4; }
.li-scene span:last-child { left: 26%; top: 36%; width: 50%; height: 40%; border-radius: 2px; background: #FFFDF9; box-shadow: 0 2px 4px rgb(0 0 0 / .3); transform: perspective(60px) rotateX(28deg) rotate(-6deg); }
.li-polaroid span:last-child { left: 34%; right: 34%; bottom: 12%; height: 4px; border-radius: 2px; background: #9AA49F; }

/* Recipient preview banner */
.preview-banner { position: sticky; top: 0; z-index: 30; background: var(--lime); color: var(--green); box-shadow: 0 6px 20px rgb(0 0 0 / .2); }
.preview-banner-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-top: 12px; padding-bottom: 12px; }
.preview-banner p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.preview-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-banner .btn { min-height: 46px; padding: 0 16px; font-size: 16px; }
.pb-short { display: none; }
/* The banner is drawn twice: at the top, and fixed at the bottom of the
   screen when it is tall enough to spare the room. On a phone the top one
   keeps only its line and the bottom one its buttons, side by side. */
.preview-banner-bottom { position: fixed; left: 0; right: 0; bottom: 0; top: auto; display: none; box-shadow: 0 -6px 20px rgb(0 0 0 / .2); }
@media (min-height: 760px) {
  .preview-banner-bottom { display: block; }
  body:has(.preview-banner-bottom) { padding-bottom: 76px; }
}
@media (max-width: 959px) {
  .preview-banner-inner { padding-top: 8px; padding-bottom: 8px; }
  .preview-banner p { font-size: 15px; }
  .preview-banner-top .preview-banner-actions { display: none; }
  .preview-banner-bottom { display: block; padding-bottom: env(safe-area-inset-bottom); }
  .preview-banner-bottom p { display: none; }
  .preview-banner-bottom .preview-banner-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; flex: 1; }
  .preview-banner-bottom .preview-banner-inner { padding: 10px 16px; }
  .preview-banner .btn { min-height: 50px; justify-content: center; }
  .pb-long { display: none; }
  .pb-short { display: inline; }
  body:has(.preview-banner) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 959px) and (min-height: 700px) {
  .preview-banner-bottom p { display: flex; justify-content: center; font-size: 14px; }
  .preview-banner-bottom .preview-banner-inner { flex-direction: column; align-items: stretch; gap: 8px; }
  body:has(.preview-banner) { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
}

.design-strip { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.design-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; align-self: stretch; }
/* Beside the editor every design is in view: they wrap instead of scrolling. */

/* Photo effects: CSS stand-ins for the real server-side filters. */
.fx-none { filter: none; }
.fx-sketch { filter: grayscale(1) contrast(1.9) brightness(1.15); }
.fx-watercolor { filter: saturate(1.35) contrast(.85) brightness(1.08) blur(.6px); }
.fx-oil { filter: saturate(1.6) contrast(1.25); }
.fx-vintage { filter: sepia(.75) contrast(.95) brightness(1.05); }
.fx-pop { filter: saturate(3) contrast(1.6) hue-rotate(-12deg); }

/* Split layouts: preview + controls */
.split { display: grid; gap: 28px; }
.split-preview, .split-controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: var(--radius); background: #EFE9DC; }
.tabs button { min-height: 48px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--green); box-shadow: 0 2px 6px rgb(23 34 28 / .12); }
.steps button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.step-no { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgb(23 34 28 / .1); font-size: 13px; line-height: 1; }
.steps button[aria-selected="true"] .step-no { background: var(--green); color: #fff; }
.steps button.is-done .step-no { background: var(--lime); color: var(--green); }
.panel { display: flex; flex-direction: column; gap: 16px; }
.panel[hidden] { display: none; }
.effects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.effect { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 15px; cursor: pointer; }
.effect img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.effect[aria-pressed="true"] { border: 3px solid var(--green); font-weight: 700; }

/* Share */
.chat { padding: 22px 18px; border-radius: 22px; background: #E7DFD3; }
.bubble { margin-left: auto; max-width: 340px; padding: 4px; border-radius: 12px; background: #D9FDD3; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.bubble p { margin: 0; padding: 6px 8px 4px; font-size: 15px; line-height: 1.35; }
.link-card { border-radius: 9px; overflow: hidden; background: #F4F7F2; }
.link-image { position: relative; display: block; aspect-ratio: 1.91 / 1; }
.link-image img { width: 100%; height: 100%; object-fit: cover; }
.link-envelope { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%) rotate(-2deg); display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 6px; background: #FFFDF9; font: 600 22px/1 var(--hand); color: var(--navy); white-space: nowrap; box-shadow: 0 6px 16px rgb(0 0 0 / .25); }
.link-envelope .icon { width: 18px; height: 18px; }
.link-text { display: flex; flex-direction: column; padding: 8px 10px 10px; font-size: 15px; line-height: 1.3; }
.link-text > span { font-size: 13px; color: var(--muted); }

/* Recipient */
body.bare[data-page="recipient"] { background: var(--green); }
.receive { position: relative; overflow: hidden; min-height: calc(100vh - 40px); min-height: calc(100dvh - 40px); padding: 0 20px 48px; color: var(--ground); background: radial-gradient(circle at 50% 30%, #1B5A40, var(--green) 60%); }
.receive > section { position: relative; z-index: 1; }
/* The card's effect falls over the whole page and the card, but under the buttons. */
.receive-actions { position: relative; z-index: 3; }
.receive-closed { display: flex; flex-direction: column; align-items: center; gap: 30px; max-width: 600px; margin: 0 auto; padding-top: 8vh; text-align: center; }
.receive-closed .eyebrow { color: var(--lime); margin-bottom: -20px; }
.receive h1 { color: var(--ground); }
.receive-closed[hidden], .receive-open[hidden] { display: none; }

.envelope { position: relative; width: min(360px, 84vw); aspect-ratio: 3 / 2; margin-top: 30px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; }
.envelope > span { position: absolute; }
.envelope-back { inset: 0; border-radius: 10px; background: linear-gradient(rgb(0 0 0 / .32), rgb(0 0 0 / .12)), url(/assets/img/envelope/liner.webp) center / 240px; box-shadow: 0 24px 44px rgb(0 0 0 / .35); }
.envelope-card { left: 7%; right: 7%; top: 8%; height: 84%; padding: 4%; background: #FFFDF9; border-radius: 3px; box-shadow: 0 6px 18px rgb(0 0 0 / .18); z-index: 1; }
.envelope-card img { width: 100%; height: 100%; object-fit: cover; }
.envelope-front { inset: 0; border-radius: 10px; background: linear-gradient(90deg, rgb(0 0 0 / .07), transparent 20%, transparent 80%, rgb(0 0 0 / .07)), linear-gradient(170deg, rgb(255 255 255 / .12), rgb(0 0 0 / .1) 75%), url(/assets/img/envelope/kraft.webp) center / cover; clip-path: polygon(0 0, 50% 66%, 100% 0, 100% 100%, 0 100%); z-index: 2; }
/* The wrapper casts the flap's shadow on the pocket (the clipped flap cannot). */
.envelope-flap-wrap { inset: 0; z-index: 3; perspective: 900px; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .28)); }
.envelope-flap { position: absolute; left: 0; right: 0; top: 0; height: 67%; background: linear-gradient(rgb(255 255 255 / .1), rgb(0 0 0 / .16)), url(/assets/img/envelope/kraft.webp) top / cover; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .45s ease; }
/* Once the flap has turned past upright its inside, with the liner, faces us. */
.envelope-flap.is-inside { background: linear-gradient(rgb(0 0 0 / .05), rgb(0 0 0 / .3)), url(/assets/img/envelope/liner.webp) center / 240px; }
.envelope-seal { left: 50%; top: 64%; z-index: 4; width: 64px; height: 64px; margin: -32px 0 0 -32px; background: url(/assets/img/envelope/seal.webp) center / contain no-repeat; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .35)); }
.envelope-to { z-index: 3; left: 0; right: 0; bottom: 5%; font: 600 30px var(--hand); color: #3F2A12; opacity: .85; }
.envelope:not(.is-opening):hover .envelope-flap { transform: rotateX(25deg); }

.receive-open { display: grid; gap: 26px; max-width: 1080px; margin: 0 auto; padding-top: 28px; }
.receive-open .card-view { min-width: 0; }
/* The recipient gets the card as large as the screen allows: wide cards wider, tall ones within the height. */
.receive .shape-landscape { --card-width: min(760px, calc((100vh - 220px) * 1.5)); }
.receive .shape-square { --card-width: min(600px, calc(100vh - 220px)); }
.receive .shape-portrait { --card-width: min(480px, calc((100vh - 220px) / 1.5)); }
/* Under the picture comes the message, which needs its own room. */
.receive .shape-landscape.layout-classic, .receive .shape-landscape.layout-polaroid { --card-width: min(680px, calc((100vh - 400px) * 1.5)); }
.receive .shape-square.layout-classic, .receive .shape-square.layout-polaroid { --card-width: min(520px, calc(100vh - 400px)); }
.receive .shape-portrait.layout-classic, .receive .shape-portrait.layout-polaroid { --card-width: min(420px, calc((100vh - 400px) / 1.5)); }
.receive-open .card-view .cv-card { width: min(100%, max(320px, var(--card-width))); margin-inline: auto; }
.receive-open:not(.is-arriving) .card-view { animation: card-in .8s cubic-bezier(.2, .8, .2, 1) both; }
.receive-actions { display: flex; flex-direction: column; gap: 12px; }
.receive-note { margin: 4px 0 0; font-size: 15px; color: #C9D6CF; text-align: center; }
.receive-reported { margin: 0; padding: 12px 16px; border-radius: 14px; background: rgb(255 255 255 / .1); color: #fff; font-size: 16px; }
.receive-link { align-self: center; color: var(--lime); }
.painting-story { padding: 12px 16px; border-radius: 14px; background: rgb(255 255 255 / .08); font-size: 16px; }
.painting-story summary { cursor: pointer; font-weight: 700; color: var(--lime); }
.painting-story p { margin: 8px 0 0; color: #E3ECE6; }
@keyframes card-in { from { opacity: 0; transform: translateY(60px) rotate(-3deg) scale(.94); } }

/* Group card */
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 22px; border-radius: 22px; background: #E6DAC3; box-shadow: var(--shadow-card); }
.board-title { grid-column: 1 / -1; margin: 0 0 4px; font: 800 clamp(26px, 3vw, 34px)/1.05 var(--display); color: var(--green); }
.note { margin: 0; padding: 12px 14px; border-radius: 4px; background: #FFFDF8; font: 600 22px/1.15 var(--hand); color: var(--navy); box-shadow: 0 3px 8px rgb(0 0 0 / .12); }
.note span { display: block; margin-top: 6px; font-size: 19px; }
.n1 { transform: rotate(-1.5deg); } .n2 { transform: rotate(1.2deg); color: #7A1F18; } .n3 { transform: rotate(.8deg); color: var(--green); } .n4 { transform: rotate(-1deg); color: #4A3520; }
.box-form { padding: 24px; border-radius: 22px; background: var(--surface); border: 2px solid var(--line); }

/* Calendar */
.tomorrow { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px; border-radius: 22px; background: var(--green); color: var(--ground); }
.tomorrow .eyebrow { color: var(--lime); }
.tomorrow h2 { color: var(--ground); margin-bottom: 12px; }
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.people li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--surface); }
.date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 56px; height: 60px; border-radius: 12px; background: var(--sand); font-size: 13px; text-transform: uppercase; color: var(--muted); line-height: 1.05; }
.date strong { font-size: 22px; color: var(--green); }
.who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.who .muted { font-size: 15px; }

/* Footer */
.site-footer { margin-top: 24px; padding: 48px 0 28px; background: var(--green); color: #DCE7E0; font-size: 16px; }
.footer-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; max-width: 30rem; }
.footer-brand img { align-self: flex-start; height: 30px; width: auto; padding: 4px 8px; border-radius: 8px; background: var(--ground); box-sizing: content-box; }
.footer-brand p { margin: 0; line-height: 1.5; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; }
.footer-heading { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.footer-inner a { color: #fff; text-decoration: none; }
@media (hover: hover) { .footer-inner a:hover { text-decoration: underline; } }
.footer-column a { padding: 7px 0; }
.footer-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .18); font-size: 15px; }
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer-bottom a { display: inline-block; padding: 10px 0; color: #DCE7E0; }
@media (min-width: 960px) {
  .footer-inner { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
  .footer-brand { grid-column: auto; }
}

@media (min-width: 640px) {
  .occasions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .occasions-all { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promo { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .mini-board { width: 220px; }
  .card-fan { height: 420px; }
}

@media (max-width: 479px) {
  /* A short word next to the icon, so "Inloggen" is not a riddle. */
  .account-link { padding: 0 12px; font-size: 15px; }
  .account-link span { max-width: 8ch; }
  .header-inner { gap: 12px; min-height: 64px; }
  .brand img { height: 32px; }
}
@media (max-width: 359px) {
  /* Only the icon shows; the name stays for screen readers. */
  .account-link { padding: 0; }
  .account-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (min-width: 960px) {
  .main-nav, .header-search { display: flex; }
  .mobile-menu { display: none; }
  .header-search:not([hidden]) + .account-link { margin-left: 0; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding-top: 40px; padding-bottom: 44px; }
  .card-fan { height: 400px; }
  .masters { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; }
  .promos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promo { grid-template-columns: minmax(0, 1fr); }
  .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .split-preview { position: sticky; top: 96px; }
  .group.split, .calendar.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* A calm composition: the card at a fixed width, the actions beside it from the start. */
  .receive-open { grid-template-columns: minmax(0, 760px) minmax(300px, 360px); justify-content: center; align-items: center; gap: 48px; padding-top: 6vh; }
  .layouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .layout-overlay .cv-card { width: min(100%, var(--card-width, 560px)); margin: 0 auto; }
  .category-hero { min-height: 360px; }
}

/* The editor: what is not about changing the card comes after it. */
.editor-extras { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 40px 0 56px; }
.editor-next { display: flex; gap: 10px; align-items: stretch; }
.editor-next .btn-block { flex: 1 1 0; min-width: 0; }
.editor-see-card, .card-kind-small, .label-short { display: none; }
.card-kind-small { margin: 0; font-size: 15px; }
.card-kind-small a { display: inline-flex; align-items: center; gap: 8px; }
@media (min-width: 960px) {
  .editor-extras { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  /* The card fits the screen, so text and picture stay in view while you type. */
  .editor .card-view { max-width: max(320px, calc((100vh - 190px) / var(--frame-height, .6667))); width: 100%; margin: 0 auto; }
}

/* Editor on a phone (one column): the controls come straight after the card,
   and the extras of the preview column (recipient preview, other designs)
   after the controls, so what you change stays close to the card. */
@media (max-width: 959px) {
  .split.editor { grid-template-columns: minmax(0, 1fr); }
  .editor .split-preview { display: contents; }
  .editor .split-preview > * { order: 2; min-width: 0; }
  .editor .split-preview > .card-view { order: 0; scroll-margin-top: 84px; }
  .editor .split-controls { order: 1; }
  /* The card first: the lead and the choice for a group card move out of its way. */
  .page-head .card-lead, main .card-kind { display: none; }
  .card-kind-small { display: block; }
  /* The next step stays at the bottom of the screen, with a way back to the card. */
  .editor-next { position: sticky; bottom: 0; z-index: 6; margin: 0 -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(rgb(251 248 241 / 0), var(--ground) 30%); }
  .editor-see-card { display: inline-flex; flex: none; padding: 0 16px; }
  .editor-next .btn { min-height: 52px; font-size: 17px; }
  .editor-next .label-long { display: none; }
  .editor-next .label-short { display: inline; }
  /* While there are steps left, "Volgende" gets the room: the card button keeps its eye. */
  .editor-next:has([data-step-next]:not([hidden])) .see-card-label { display: none; }
  /* A tall photo: picture and text of the card fit the screen together. */
  @media (orientation: portrait) { .editor .card-view:not(.is-open) .cv-card { max-width: max(220px, calc((100svh - 200px) / var(--frame-height, .6667))); margin-inline: auto; } }
  /* While the keyboard is open the bottom bar would take the little room left. */
  .split.editor:has(input:focus, textarea:focus) .editor-next { position: static; }
}

/* A phone on its side: cards are sized to the height of the screen, the
   header scrolls away, and an opened folded card lies open side by side. */
@media (max-height: 500px) and (orientation: landscape) {
  .site-header { position: static; }
  .card-view .cv-card { width: min(100%, calc((100svh - 40px) / var(--frame-height, .6667))); max-width: calc((100svh - 40px) / var(--frame-height, .6667)); margin-inline: auto; }
  /* Cards with their text below the picture leave room for it. */
  .card-view:is(.layout-classic, .layout-polaroid, .layout-folded) .cv-card { max-width: max(220px, calc((100svh - 150px) / var(--frame-height, .6667))); }
  /* The recipient's card fills the height of the screen, also a portrait one. */
  .receive .card-view:is(.shape-landscape, .shape-square, .shape-portrait) { --card-width: calc((100svh - 40px) / var(--frame-height, .6667)); }
  .receive-open .card-view .cv-card { width: min(100%, var(--card-width)); }
  /* The header scrolls away here, so "Kaart" brings the card right to the top. */
  .editor .split-preview > .card-view { scroll-margin-top: 0; }
}

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

/* Search results */
.section-tight { margin-top: 28px; }
.small-heading { font-size: 1.3rem; margin-bottom: 14px; }

/* Editor: single card or group card */
.card-kind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.card-kind-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; line-height: 1.3; }
.card-kind-option > span { display: flex; flex-direction: column; font-size: 15px; color: var(--muted); }
.card-kind-option strong { font-size: 17px; color: var(--ink); }
.card-kind-option .icon { flex: none; width: 28px; height: 28px; color: var(--green); }
.card-kind-option.is-current { border: 3px solid var(--green); background: #F6FBE1; }
a.card-kind-option:hover { border-color: var(--green); }
@media (max-width: 559px) {
  .card-kind { grid-template-columns: minmax(0, 1fr); }
}
.photo-status { margin: 0; padding: 12px 14px; border-radius: 12px; background: #F6FBE1; font-weight: 700; }
.photo-status.is-error { background: #FBE3E0; color: #7A1F18; }
.photo-effects { display: flex; flex-direction: column; gap: 12px; }
.report { align-self: center; font-size: 14px; color: #C9D6CF; text-align: center; }
.report summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; }
.report form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; text-align: left; }
.report textarea { padding: 10px; border-radius: 10px; border: 0; font: inherit; color: var(--ink); }
.age-filters { margin-bottom: 0; align-items: center; }
.age-select { position: relative; flex: none; }
.age-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border: solid var(--green); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); pointer-events: none; }
.age-select select { appearance: none; min-height: 46px; min-width: 190px; padding: 0 48px 0 18px; border-radius: 999px; border: 2px solid var(--green); background: var(--surface); color: var(--ink); font: 700 16px/1 var(--body); cursor: pointer; }
.age-select select:hover { background: var(--sand); }
.age-select select:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.filters-label { flex: none; font-weight: 700; margin-right: 4px; }

/* Occasion picker: one dense grid of small landscape tiles; a group's name is
   a cell of its own, so a new group never starts a half-empty row. */
.occ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 10px; align-items: start; }
.occ-tile { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1.2; }
.occ-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 12px rgb(23 34 28 / .12); transition: transform .3s ease, box-shadow .3s ease; }
.occ-tile:hover img { transform: translateY(-2px); box-shadow: 0 8px 18px rgb(23 34 28 / .18); }
.occ-tile:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 12px; }
.occ-label { display: flex; align-items: flex-end; aspect-ratio: 4 / 3; margin: 0; padding: 12px; border-radius: 12px; background: var(--green); color: var(--ground); font: 800 16px/1.15 var(--display); }
.section.home-occasions { margin-top: 28px; margin-bottom: 40px; }
.home-occasions .section-head { margin-bottom: 14px; }
@media (min-width: 720px) {
  .occ-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 14px; }
  .occ-tile { font-size: 15px; }
  .occ-label { font-size: 19px; padding: 14px; }
}
.page-head-tight { margin-bottom: 18px; }
.page-head-tight h1 { margin-bottom: 4px; }
main.wrap > .occ-grid { padding-bottom: 48px; }

.hero-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
@media (max-width: 719px) {
  .hero .card-fan { display: none; }
  .hero-inner { padding-bottom: 28px; }
}
.occ-all { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; background: var(--lime); color: var(--green); text-decoration: none; }
.occ-all span { font: 600 13px/1.2 var(--body); }
.occ-all:hover { filter: brightness(.96); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin: 32px 0 56px; }
.pager-status { color: var(--muted); }
.pager-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pager-page { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 46px; padding: 0 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); font-weight: 700; text-decoration: none; }
a.pager-page:hover { border-color: var(--green); }
.pager-page[aria-current] { border-color: var(--green); background: var(--green); color: var(--ground); }
.pager-more { display: flex; justify-content: center; margin: 28px 0 0; }
/* What follows a card list never anchors the scroll position: the browser would
   keep it in view while js/infinite.js adds cards above it, so the visitor
   would stay at the end and the next page would load at once. */
.pager-more, .pager, .pager ~ *, .site-footer { overflow-anchor: none; }
.pager-more .pager-status { margin: 0; }
.pager-gap { display: inline-flex; align-items: center; min-height: 46px; padding: 0 4px; color: var(--muted); }
.card-about { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--sand); }
.card-about p { margin: 0 0 6px; }
.card-about p:last-child { margin-bottom: 0; }
.card-about-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.card-caption { margin: 10px 0 14px; color: var(--muted); font-size: 16px; }
.card-lead { margin: 10px 0 0; font-size: 1.05em; }
.occ-image { position: relative; display: block; }
.occ-image img { display: block; }
.occ-badge { position: absolute; top: 6px; left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--lime); color: var(--green); font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; }
/* The footer stays at the bottom of the window on short pages. */
body:not(.bare) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body:not(.bare) > .site-footer { margin-top: auto; }
.themes-section { padding-bottom: 48px; }
.theme-filters { margin-bottom: 0; align-items: center; }
/* Other occasions under an occasion's cards: a labelled block of wrapping
   links, set apart from the filter rows above the cards. */
.related-occasions { margin: 40px 0 56px; padding-top: 24px; border-top: 2px solid var(--line); }
.pager + .related-occasions { margin-top: 0; }
.related-occasions .pill { min-height: 44px; font-size: 16px; }
/* On wide screens the filter rows wrap instead of scrolling out of sight. */
@media (min-width: 960px) {
  .filters { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
}
/* Birthday art has its balloons at the top: keep them in view on wide screens. */
.category-hero-top .category-hero-art { object-position: 50% 10%; }

/* Theme days (templates/themedays.php, themeday.php). */
.themeday-list { display: grid; gap: 10px; margin: 8px 0 40px; padding: 0; list-style: none; }
.themeday-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgb(23 34 28 / .06); }
.themeday-row:hover { box-shadow: 0 6px 18px rgb(23 34 28 / .12); }
.themeday-row .date { flex: none; }
.themeday-when { font-size: 15px; font-weight: 600; color: var(--green); }
.themeday-go .icon { width: 22px; height: 22px; color: var(--green); }
.themeday-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.themeday-go { flex: none; margin-left: auto; color: var(--green); }
.themeday-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.themeday-head .eyebrow .icon { width: 16px; height: 16px; }
.themeday-more { margin: 28px 0 48px; text-align: center; }

/* Category pages on a phone (after the general rules it narrows). */
@media (max-width: 639px) {
  .category-hero { min-height: 150px; }
  .category-hero-text { padding-top: 14px; padding-bottom: 16px; }
  /* Filters close together, so the first cards show on the first screen. */
  .age-filters, .theme-filters { margin-top: 12px; margin-bottom: 0; }
  .category-tools { margin: 12px 0 12px; gap: 10px; }
  .category-tools .category-search input { min-height: 42px; }
  .view-option { min-height: 36px; padding: 0 12px; font-size: 14px; }
}

/* A mistake in a form field (js/cards.js fieldError()). */
.field .field-error, .field-error { margin: 6px 0 0; color: #A3241B; font-size: 15px; font-weight: 700; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: #C8392F !important; box-shadow: 0 0 0 3px rgb(200 57 47 / .15) !important; }
/* The send page shows the card itself; the WhatsApp example only on a phone, where it is the usual way. */
.share .card-view { max-width: 420px; margin-inline: auto; }
@media (min-width: 960px) { .share .share-chat-title, .share .chat { display: none; } }

/* Buttons in two columns keep their label on one line. */
.two .btn { white-space: nowrap; }
@media (max-width: 379px) { .two { grid-template-columns: minmax(0, 1fr); } }
.text-undo { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--sand); font-size: 15px; }
.text-undo[hidden] { display: none; }
.error-page .search { margin: 8px 0 24px; }
.error-popular { margin: 18px 0 10px; }
.error-home { margin: 28px 0 56px; }

/* Where the recipient's name goes, until the sender types it. */
.name-slot { padding: 0 .15em; border-radius: 4px; background: #FBE7A1; color: inherit; font: inherit; }

/* The ink and alignment of the message (cardState() 'inkt' and 'uitlijning'). A text in the photo keeps the colours of its style (css/scene.css). */
.ink-zwart .cv-message, .ink-zwart.cv-read-dialog .cv-message { color: #1C1C1A; }
.ink-groen .cv-message, .ink-groen.cv-read-dialog .cv-message { color: #12402D; }
.ink-rood .cv-message, .ink-rood.cv-read-dialog .cv-message { color: #8A1C2B; }
.align-midden .cv-message { text-align: center; }
.align-midden .cv-sign { text-align: center; }

/* The message box in the editor: style tools, the text, the writing help. */
.composer-box { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.composer-box:focus-within { border-color: var(--green); }
.composer-tools { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #FBF8F1; }
.composer-group { display: flex; gap: 4px; }
.composer-group[hidden] { display: none; }
.composer-tool { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border: 2px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.composer-tool[aria-pressed="true"] { border-color: var(--green); background: var(--surface); }
@media (hover: hover) { .composer-tool:hover { background: #EFE9DC; } }
.font-sample-hand { font: 600 22px/1 var(--hand); }
.font-sample-serif { font: 400 19px/1 "Lora", Georgia, serif; }
.font-sample-plain { font: 400 18px/1 var(--body); }
.composer-ink span { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .5); }
.ink-swatch-blauw span { background: var(--navy); }
.ink-swatch-zwart span { background: #1C1C1A; }
.ink-swatch-groen span { background: #12402D; }
.ink-swatch-rood span { background: #8A1C2B; }
.field .composer-input { display: block; width: 100%; min-height: 9rem; padding: 14px 16px; border: 0; border-radius: 0; background: transparent; color: var(--navy); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.field .composer-input:focus { outline: none; }
.composer-input[data-text-font="hand"] { font: 600 23px/1.3 var(--hand); }
.composer-input[data-text-font="serif"] { font: 400 18px/1.55 "Lora", Georgia, serif; }
.composer-input[data-text-font="plain"] { font: 400 17px/1.55 var(--body); }
.composer-input[data-text-ink="zwart"] { color: #1C1C1A; }
.composer-input[data-text-ink="groen"] { color: #12402D; }
.composer-input[data-text-ink="rood"] { color: #8A1C2B; }
.composer-input[data-text-align="midden"] { text-align: center; }
.composer-help { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: #F6FBE1; }
.composer-help-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--green); }
.composer-help .pills { gap: 6px; }
.composer-help .pill { min-height: 40px; padding: 0 14px; font-size: 15px; }
.composer .text-undo { margin-top: 8px; }
.composer-group + .composer-group { padding-left: 12px; border-left: 1px solid var(--line); }
@media (max-width: 480px) {
  /* Fonts and alignment on one row, the formatting and the inks each on a row of their own. */
  .composer-tools { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 6px 8px; padding: 6px 8px; }
  .composer-group { gap: 2px; }
  .composer-group + .composer-group { padding-left: 0; border-left: 0; }
  .composer-group[data-mark-tools] { order: 2; grid-column: 1 / -1; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--line); }
  .composer-group[data-ink-tools] { order: 3; grid-column: 1 / -1; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--line); }
  .composer-tool { min-width: 38px; height: 38px; padding: 0 4px; }
}
/* Suggestions of one tone below the message; choosing one replaces the text. */
.suggestions { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.suggestions[hidden] { display: none; }
.suggestions-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.suggestions-title { margin: 0; font-weight: 700; font-size: 15px; }
.suggestion-list { display: grid; gap: 8px; }
.suggestion { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; cursor: pointer; }
.suggestion-text { white-space: pre-line; line-height: 1.45; }
.suggestion-use { font-weight: 700; font-size: 14px; color: var(--green); }
@media (hover: hover) { .suggestion:hover { border-color: var(--green); } }
.suggestions .link-button { align-self: flex-start; }
/* The effect step: a tile per effect, playing it on the card's photo. */
.effect-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 480px) { .effect-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.effect-tile { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.effect-tile[aria-pressed="true"] { border: 3px solid var(--green); }
@media (hover: hover) { .effect-tile:hover { border-color: var(--green); } }
.effect-tile-stage { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #2C332E; }
.effect-tile-stage img { width: 100%; height: 100%; object-fit: cover; }
.effect-tile-label { padding: 8px 12px 10px; font-weight: 600; }
.effect-tile[aria-pressed="true"] .effect-tile-label { font-weight: 700; color: var(--green); }
.photo-intro { margin: 0; }
.preview-ask { margin: 4px 0 -8px; text-align: center; font-weight: 600; color: var(--muted); }
/* The recipient's "Open je kaart": a soft glow and a hand that taps at it. */
.open-call { position: relative; display: inline-flex; }
.open-call .btn { animation: open-glow 2.2s ease-in-out infinite; }
.open-hand { position: absolute; right: -30px; bottom: -40px; width: 52px; height: 52px; pointer-events: none; transform: rotate(-30deg); animation: open-tap 1.5s ease-in-out .8s infinite both; }
.open-hand { color: #fff; }
.open-hand .icon { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45)); }
@keyframes open-glow { 0%, 100% { box-shadow: 0 0 0 0 rgb(216 242 92 / .55); } 50% { box-shadow: 0 0 0 14px rgb(216 242 92 / 0); } }
@keyframes open-tap { 0%, 100% { transform: translate(12px, 14px) rotate(-30deg); } 45%, 55% { transform: translate(0, 0) rotate(-30deg) scale(.92); } }
@media (prefers-reduced-motion: reduce) { .open-call .btn, .open-hand { animation: none; } }
/* The same hand at a card's "Draai de kaart om" until it is used once. */
.cv-turn { position: relative; z-index: 2; overflow: visible; }
.cv-turn .open-hand { right: -34px; bottom: -36px; width: 44px; height: 44px; color: var(--green); }
.cv-turn .open-hand .icon { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 2px 3px rgb(0 0 0 / .25)); }
.receive .cv-turn .open-hand { color: #fff; }
.cv-turn.was-used .open-hand { display: none; }
/* The layout step: three steps, the own photo below the layouts. */
.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.own-photo-tools { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.own-photo-tools .box-title { margin: 0; }
/* The effect step: how the card arrives. */
.envelope-title { margin-top: 24px; }
.envelope-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 480px) { .envelope-choices { grid-template-columns: minmax(0, 1fr); } }
.envelope-choice { text-align: left; cursor: pointer; font: inherit; }
.envelope-choice .icon { flex: none; color: var(--green); }
.envelope-choice[aria-pressed="true"] { border-color: var(--green); background: #F6FBE1; }
/* A reply: what it does, and the ways to another picture. */
.share-context.reply-context { align-items: flex-start; }
.reply-context .heart { margin-top: 3px; }
.reply-context p { margin: 0; }
.reply-context .reply-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.reply-choices .pill { min-height: 42px; font-weight: 700; font-size: 15px; }
/* The card picker (templates/partials/card-picker.php). */
.card-picker { width: min(960px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 22px; background: var(--ground); color: var(--ink); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.card-picker::backdrop { background: rgb(18 30 24 / .55); }
.card-picker[open] { display: flex; flex-direction: column; }
.card-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; }
.card-picker-head h2 { margin: 0; font-size: 24px; }
.card-picker-search { display: flex; align-items: center; gap: 8px; margin: 4px 20px 10px; padding: 0 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); }
.card-picker-search:focus-within { border-color: var(--green); }
.card-picker-search input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; outline: none; }
.card-picker-occasions { flex-wrap: nowrap; overflow-x: auto; padding: 0 20px 8px; scrollbar-width: none; }
.card-picker-occasions .pill { flex: none; min-height: 40px; }
.card-picker-occasions .pill[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: #fff; }
.card-picker-status { margin: 0 20px; }
.card-picker-status:empty { display: none; }
.card-picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; padding: 10px 20px; overflow-y: auto; }
.card-picker > .btn { flex: none; width: auto; margin: 4px 20px 18px; }
.card-pick { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.3; }
.card-pick img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; box-shadow: 0 4px 10px rgb(0 0 0 / .12); }
@media (hover: hover) { .card-pick:hover img { outline: 3px solid var(--green); outline-offset: 2px; } }
.card-picker-head, .card-picker-search, .card-picker-occasions, .card-picker-status { flex: none; }
.card-picker-list { flex: 1 1 auto; min-height: 0; }
/* Formatted parts of the message (MARK_FLAGS in app/cards.php), on the card and in the editor. */
.m-b { font-weight: 700; }
.m-i { font-style: italic; }
.m-u { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .16em; }
.m-blauw { color: var(--navy); }
.m-zwart { color: #1C1C1A; }
.m-groen { color: #12402D; }
.m-rood { color: #8A1C2B; }
.m-groot { font-size: 1.3em; line-height: 1.15; }
.m-klein { font-size: .8em; }
/* A text in the photo keeps the colours of its style. */
.layout-scene .cv-message :is(.m-blauw, .m-zwart, .m-groen, .m-rood) { color: inherit; }
.composer-tool strong, .composer-tool em { font-size: 18px; }
.composer-tool sup { font-size: 11px; }
.scratch-option { margin-top: 20px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); align-items: flex-start; }
.scratch-option[hidden] { display: none; }
.scratch-option span { display: flex; flex-direction: column; font-size: 15px; color: var(--muted); }
.scratch-option strong { font-size: 17px; color: var(--ink); }
.scratch-option:has(input:checked) { border-color: var(--green); background: #F6FBE1; }
.change-card { display: inline-flex; align-self: center; align-items: center; gap: 6px; padding: 6px 4px; font-weight: 700; font-size: 15px; }
/* While a card is being sent back (templates/partials/reply-bar.php). */
.reply-bar { background: #F6FBE1; border-bottom: 1px solid #DCEB9C; }
.reply-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
.reply-bar p { display: flex; align-items: center; gap: 8px; margin: 0; }
.reply-bar .heart { flex: none; width: 20px; height: 20px; color: var(--red); }
.reply-bar .btn { min-height: 40px; padding: 0 14px; font-size: 15px; }
.reply-bar-short { display: none; }
@media (max-width: 640px) {
  .reply-bar-inner { flex-wrap: nowrap; padding-top: 6px; padding-bottom: 6px; font-size: 15px; }
  .reply-bar p { min-width: 0; }
  .reply-bar p > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reply-bar-long { display: none; }
  .reply-bar-short { display: inline; }
  .reply-bar .btn { flex: none; min-height: 36px; padding: 0 10px; font-size: 14px; }
}