/* Reddit Sans: self-hosted (voorheen fonts.googleapis.com; identiek variabele font, subsets en unicode-ranges) */
/* vietnamese */
@font-face {
  font-family: 'Reddit Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/RedditSans-var-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Reddit Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/RedditSans-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Reddit Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/RedditSans-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* KEYFRAMES */

@-webkit-keyframes topslider1 {
    0% {
        transform: translateY(300px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes topslider1{
    0% {
        transform: translateY(300px);
    }
    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes topslider2 {
    0% {
        transform: translateY(200px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes topslider2{
    0% {
        transform: translateY(200px);
    }
    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes topslider3 {
    0% {
        transform: translateY(100px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes topslider3{
    0% {
        transform: translateY(100px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes moveGradient {
    to {
        background-position: -300% center;
    }
}

html {
    scroll-behavior: auto !important;
}

.material-symbols-outlined {
    visibility: hidden;
}
.icons-loaded .material-symbols-outlined {
    visibility: visible;
}

/* BODY */
body {
	font-family: "Reddit Sans", sans-serif;
    background-color: #faf8f0;
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

a{
	color:#333;
	text-decoration:none;
}

a:hover{
	color:#f60;
	text-decoration:none;
}

a.orange{
	color:#f60;
}

a.orange:hover{
	color:#f60;
	text-decoration:underline;
}

p{
	color:#333;
}

.bg-warning {
   background: #4c9bbe !important;
}

.bg-danger {
    background: #dc3545 !important;
}

.bg-success {
    background: #20a165 !important;
}

.error {
	color: #fff;
    background: #dc3545;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.error ul{
	list-style:none;
	margin:0px;
	padding:0px;
}

.success {
	color: #fff;
    background: #20a165;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.notify {
	color: #fff;
    background: #fdd6b9b8;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 10px;
    border: 2px solid #fdd6b9;
    font-weight: 600;
}

.form-control {
    height: 50px;
    border-radius: 20px;
    border: 2px solid #fce9d7;
    padding: .5rem 1rem;
    margin: 5px 0px 15px;
    line-height: 36px;
    padding: 6px 15px;
}

.form-control:focus {
    box-shadow:none;
	border-color: #fdd6b9;
}

.form-control:valid {
  background-color:  #fff!important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
    -webkit-text-fill-color: #333 !important;
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

.form-control::placeholder {
   color:#ccc;
}

.form-select {
    height: 50px;
    border-radius: 20px;
    border: 2px solid #fce9d7;
	padding: .5rem 1rem;
	margin: 5px 0px 15px;
}

.form-select:focus {
    box-shadow:none;
	border-color: #fdd6b9;
}

textarea.form-control {
     min-height: 145px;
	 line-height: inherit;
}

.container {
    max-width: 1340px;
}

/* DE BEZIG-STAND VAN DE BESTELKNOP EN DE WISSELING NAAR DE WALLET (31-08-2026).

   .mp-bezig is de tekst naast het draaiende rondje in de bestelknop van de winkelwagen.
   De knop had het rondje al, maar geen woord erbij: uitvoerend gemeten duurde die stand
   154 ms en stond er in die tijd niets. nowrap houdt hem op EEN regel, zodat de knop
   niet hoger wordt terwijl de klant er net op getikt heeft.

   .mp-knop-puls markeert het moment waarop de knop van betekenis verandert (naar
   "Apple Pay" of "Google Pay"). Alleen versiering: hij stuurt geen enkele toestand.
   box-shadow zit niet in de transition van .button, dus deze animatie botst daar niet
   mee. Wie "verminder beweging" aan heeft staan, krijgt gewoon de nieuwe tekst. */
/* De bezig-tekst mag de knop NOOIT hoger maken. Zonder deze regels breekt de regel
   tussen het rondje en de tekst: bij 320px werd de knop 57px -> 86px en sprong de pagina
   op het moment dat de klant er net op getikt had (uitvoerend gemeten, NL en DE). De
   nowrap staat op de knop zelf en alleen tijdens de bezig-stand, zodat de gewone tekst
   eronder zijn huidige gedrag houdt. Is er dan nog te weinig plek (320px, Duits), dan
   kort de tekst met een beletselteken af in plaats van te wikkelen of buiten de knop te
   lopen; het rondje blijft altijd staan. */
.mp-bezig{ display:inline-block; vertical-align:middle; line-height:1.4; margin-left:8px;
	max-width:calc(100% - 32px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-knop-bezig{ white-space:nowrap; }

@keyframes mpKnopPuls{
	0%{   transform:scale(1);     box-shadow:rgba(0,0,0,0.1) 0 2px 4px; }
	35%{  transform:scale(1.035); box-shadow:rgba(255,102,0,0.45) 0 0 0 6px; }
	100%{ transform:scale(1);     box-shadow:rgba(0,0,0,0.1) 0 2px 4px; }
}
.mp-knop-puls{ animation:mpKnopPuls 420ms ease-out 1; }
@media (prefers-reduced-motion: reduce){ .mp-knop-puls{ animation:none; } }

/* EEN ZICHTBARE FOCUS OP DE BETAALKNOPPEN (01-09-2026, opdracht Ernst).
   .button draagt hieronder `outline: none !important`, dus een outline komt hier nooit aan;
   vandaar een box-shadow, die dezelfde ring geeft en niet wordt weggedrukt. Alleen
   :focus-visible, dus alleen wie met het toetsenbord bedient ziet hem; met de muis klikken
   ziet er precies zo uit als vandaag. De knoppen op new.php en sequel.php hadden hun ring al
   via .homepage-form .button:focus-visible. */
/* .button.mp-pay-knop EN NIET .mp-pay-knop ALLEEN (01-09-2026, uit de eindkeuring).
   Zestien regels hieronder staat `.button, .button:focus` met zijn eigen box-shadow. Een
   losse `.mp-pay-knop:focus-visible` weegt precies even zwaar als `.button:focus` (allebei
   twee klassen), en bij gelijk gewicht wint de regel die LATER staat. De ring werd daar dus
   overschreven en de betaalpagina bleef zonder zichtbare toetsenbordfocus. Met de klasse
   .button erbij weegt hij zwaarder en wint hij wel. De twee id-selectors hadden dit niet
   nodig, want een id wint altijd. */
#submitOrderBtn:focus-visible,
#stickyCtaBtn:focus-visible,
.button.mp-pay-knop:focus-visible {
    box-shadow: 0 0 0 4px rgba(255, 102, 0, .35), rgba(0, 0, 0, 0.1) 0 2px 4px;
}

/* DE KNOPTEKST WAS EEN TEL ONLEESBAAR (01-09-2026, uit de eindkeuring).
   Gemeten op cart.php: het thema geeft .button de overgang
     transition: background-color .5s ease, color .3s ease, border .3s ease
   en de hover-regel keert allebei om, terwijl de verloopvulling (background-image) NIET in
   die overgang zit en meteen omslaat. Drie tienden van een seconde staat er dus oranje tekst
   op een nog oranje vlak: contrast 1,00, precies op het moment dat de klant net getikt heeft.
   Op een telefoon blijft die hoverstand na de tik bovendien plakken.
   partials/payment_page.php had deze regel al voor .mp-pay-knop; dit is dezelfde oplossing
   voor de bestelknop van de winkelwagen en voor de zwevende mobiele knop. */
#submitOrderBtn, #submitOrderBtn:hover, #submitOrderBtn:focus,
#stickyCtaBtn, #stickyCtaBtn:hover, #stickyCtaBtn:focus { transition: none; }

.button, .button:focus{
	display: inline-block;
    background-color: #f60;
    color: #fff;
    border-radius: 100px;
    padding: 12px 50px;
    font-weight: 700;
    font-size: 18px;
	border:2px solid #f60;
	transition: background-color 0.5s ease, color 0.3s ease, border 0.3s ease;
	cursor:pointer;
	outline: none !important;
	margin-bottom:8px;
	background-image: linear-gradient(-180deg, #fd8130, #ff6600);
	box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
}

.button:hover{
    background-color: transparent !important;
	color: #f60 !important;
	border:2px solid #f60 !important;
	background-image: linear-gradient(-180deg, #ff893b00, #ff660017);
	box-shadow: rgb(255 102 0 / 25%) 0 3px 8px;
}

.button2, .button2:focus{
	background-color: transparent;
	color: #f60;
	border:2px solid #f60;
	transition: background-color 0.3s ease;
	background-image: linear-gradient(-180deg, #ff893b00, #ff660000);
}

.button3, .button3:focus{
	background-color: transparent;
	color: #dc3545;
	border:2px dashed #dc3545;
	background-image: linear-gradient(-180deg, #ff893b00, #ff660000);
	opacity: 0.8;
}

.button3:hover{
	color: #dc3545!important;
	border:2px solid #dc3545 !important;
	opacity: 1;
}

.button4, .button4:focus{
	background-color: transparent;
	color: #555;
    border: 2px solid #cfcfcf;
    background-image: linear-gradient(-180deg, #ffffff, #d5d5d526);
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
}

.button4:hover{
	color: #f60 !important;
	border:2px solid #f60 !important;
}

.button-whatsapp, .button-whatsapp:focus{
	background-color: transparent;
    color: #fff;
    border: 2px solid #128c7e61;
    background-image: linear-gradient(-180deg, #25d366f2, #25d366);
}

.button-facebook, .button-facebook:focus{
	background-color: transparent;
    color: #fff;
    border: 2px solid #1877F2;
    background-image: linear-gradient(-180deg, #1877f2d6, #1877F2);
}

.button-linkedin, .button-linkedin:focus{
	background-color: transparent;
    color: #fff;
    border: 2px solid #0077B5;
    background-image: linear-gradient(-180deg, #0077b5cc, #0077B5);
}

.button-x, .button-x:focus {
    background-color: transparent;
    color: #fff;
    border: 2px solid #000000;
    background-image: linear-gradient(-180deg, #000000b3, #000000);
}

.button-threads, .button-threads:focus{
	background-color: transparent;
    color: #fff;
    border: 2px solid #000000;
    background-image: linear-gradient(-180deg, #000000b3, #000000);
}

.breadcrumb {
    font-weight: 600;
    font-size: 18px;
}

.breadcrumb a {
    color: #ff6600;
}

/* Body scroll lock (voor mobiele modals/panels) */
body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* MODAL */
.modal-content{
	border-radius:30px;
	border:0px;
}

.modal-header .modal-title{
	font-weight: 700;
}

.modal-header .material-symbols-outlined{
	color: #333;
    font-size: 28px;
}

.modal-header .material-symbols-outlined:hover{
	color: #ff6600;
}

.modal-footer{
	justify-content: center;
}

.modal-footer .button {
    font-size: 16px;
    padding: 7px 35px;
	margin-bottom:0px !important;
	margin-top:0px !important;
}

.modal-body .form-label {
    margin-bottom: 0px;
    font-weight: 600;
}

.modal-body .loader img {
    max-height:90px;
	margin-bottom: 10px;
}

.modal-body .character-checkbox-list{
	border-radius: 20px;
    border: 2px solid #fce9d7;
	padding: 10px 15px;
	background: #faf8f0;
	margin-top:5px;
}

.modal-body .character-checkbox-list .form-check {
    margin-bottom: 3px;
    padding-bottom: 3px;
    border-bottom: 1px dashed #fce9d7;
}

.modal-body .character-checkbox-list .form-check:last-child {
  border-bottom: none;
  margin-bottom:0px;
  padding-bottom:0px;
}

.modal-body .character-checkbox-list .form-check label {
    cursor:pointer;
}

/* Lazy Loading */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lazy-load.loaded {
     opacity: 1;
}

.loading .edit-image{
	display:none !important;
}

.loading img{
	max-width: 100px !important;
}

/* PAGINANATION */
.pagination{
	margin: 35px auto;
}

.pagination .page-link{
	color: #f56400;
    border: 2px solid #f56400;
    border-radius: 10px !important;
    font-size: 18px;
    font-weight: 700;
	margin:0px 4px;
}

.pagination .page-item.active .page-link{
	color: #fff;
    background-color: #f56400;
	border: 2px solid #f56400;
}

/* New page APP overlay*/
#inAppOverlay {
    display: none; /* standaard verborgen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #faf8f0 0%, #faf8f0 50%, transparent 100%);
    z-index: 10000;
	color: #333;
    text-align: center;
    padding-top: 30%;
}

#inAppOverlay h2 {
    font-size: 28px;
    margin-bottom: 5px;
    color: #333;
    font-weight: 800;
}

#inAppOverlay p {
    font-size: 18px;
    padding: 0px 15px;
}

#inAppOverlay a {
    display: block;
    color: #ff6600;
}

/* FAQ */
.homepage-faq .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px;
	min-height:400px;
	margin-bottom:50px;
}

.homepage-faq h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 30px;
}

.homepage-faq h3.accordion-header{
	font-size: 1rem;
	margin-bottom: 0;
}

.custom-accordion-button, .custom-accordion-button:focus{
    background-color: transparent;
    border: none;
    color: #ff6600;
    padding: 10px 0px 20px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ddd;
	outline:none;
	font-size: 18px;
    font-weight: 500;
    transition: background-color 0.3s ease;
	width:100%;
	text-align:left;
}

.accordion .collapsed{
	color: #333;
}

.all-link{
	color: #ff6600;
	display: flex;
    align-items: center;
	margin-top:15px;
}

.all-link span{
	margin-left:2px;
}

.all-link:hover{
	color: #333;
}

.accordion-button:not(.collapsed) {
    color: #ff6600;;
    background-color: transparent;
    box-shadow: none;
}

.accordion{
    --bs-accordion-border-width: 0px;
}

.accordion-button:focus {
    box-shadow: none;
}

.custom-accordion-button:hover {
    color: #f56400;
}

.accordion-body {
    padding: 0px 0px 25px;
    color: #333;
	font-size:17px;
}

#faqImage {
    height: 572px;
    object-fit: cover;
    width: 100%;
    border-radius: 48px;
    opacity: 0.85;
}

.mobile-footer-new-book{
	position: fixed;
    bottom: -100px;
    width: 100%;
    background: #ffffffcf;
    z-index: 10;
    padding: 15px 0px;
    border-top: 1px solid #ffdcc4;
	transition: bottom 0.4s ease-in-out;
}

.mobile-footer-new-book.is-visible {
    /* Breng de footer in beeld */
    bottom: 0;
}

.mobile-footer-new-book .button{
	margin:0px;
	width:100%;
	text-align:center;
	padding: 10px 5px;
}

/* Het wisselen van de twee voordelen in de mobiele topbalk. Elk voordeel staat ongeveer
   4,5 seconde stil en schuift er dan in een halve seconde uit, terwijl de ander binnenkomt.
   Tussen 50 en 95 procent verplaatst het weggeschoven item zich van boven naar onder; dat
   gebeurt volledig onzichtbaar, want de doorzichtigheid staat daar op nul. */
@keyframes mp-usp-a {
	0%   { transform: translateY(0);     opacity: 1; }
	45%  { transform: translateY(0);     opacity: 1; }
	50%  { transform: translateY(-100%); opacity: 0; }
	95%  { transform: translateY(100%);  opacity: 0; }
	100% { transform: translateY(0);     opacity: 1; }
}

@keyframes mp-usp-b {
	0%   { transform: translateY(100%);  opacity: 0; }
	45%  { transform: translateY(100%);  opacity: 0; }
	50%  { transform: translateY(0);     opacity: 1; }
	95%  { transform: translateY(0);     opacity: 1; }
	100% { transform: translateY(-100%); opacity: 0; }
}

/* Heeft de bezoeker beweging uitgezet, dan blijven de twee elkaar afwisselen maar zonder
   verschuiving: dan is het een rustige overvloeiing. De regel die dat aanzet staat NIET hier
   maar achter het mobiele blok verderop: de ticker-opmaak zit in @media (max-width: 767px),
   en die staat later in het bestand. Zou de terugval hier staan, dan zou het mobiele blok hem
   overschrijven en kreeg iedereen alsnog de schuivende versie. */
@keyframes mp-usp-a-vervaag {
	0%, 45%  { opacity: 1; }
	50%, 95% { opacity: 0; }
	100%     { opacity: 1; }
}

@keyframes mp-usp-b-vervaag {
	0%, 45%  { opacity: 0; }
	50%, 95% { opacity: 1; }
	100%     { opacity: 0; }
}

/* HEADER */

.topbar-action{
	background:#ff6600;
	height:40px;
	background-image: linear-gradient(-180deg, #fd8130, #ff6600);
	display: flex;
    align-items: center;
}

.topbar-action p{
	margin:0px;
	color:#fff;
	font-weight:600;
	font-size:15px;
	display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-action .material-symbols-outlined{
    margin-right: 8px;
    font-size: 20px;
}

.topbar-action b{
	margin: 0px 15px;
}

.navbar {
    margin-bottom: 40px;
    background-color: #faf8f0f5;
    color: white;
	padding: 15px 0px;
	transition: top 0.4s ease, box-shadow 0.3s ease;
	top:40px;
}

/* De 'sticky' staat, als de banner uit beeld is */
.navbar.navbar-fixed {
  position: fixed;
  /* De 'top' wordt hieronder bepaald door de 'hidden' state */
}

/* De 'verborgen' staat voor desktop, als je naar beneden scrolt */
.navbar.navbar-fixed.navbar-hidden {
  top: -100px; /* Een waarde groter dan de hoogte van je navbar */
}

/* De 'zichtbare sticky' staat. Hier definiëren we de schaduw. */
.navbar.navbar-fixed:not(.navbar-hidden) {
    top: 0;
    box-shadow: 0 2.65546px 95px #0000001a;
}

.nav-item{
	margin-top: 0px;
}

.navbar-light .navbar-nav .nav-link  {
  color:#333;
  font-weight: 600;
  padding:0px 0px 0px 25px;
  font-size:16px;
}

.navbar-light .navbar-nav .nav-link:hover{
	color:#ff6600;
}

/* Een hoogte voor ALLE talen. De logobestanden hebben sinds 2026-07-27 allemaal
   dezelfde verhouding tussen het icoon en het vlak (icoon = 81,9% van de hoogte),
   dus taal-specifieke hoogtes zijn niet meer nodig en maakten het juist ongelijk.
   display:block haalt het baseline-gat onder een inline afbeelding weg, zodat het
   logo exact op dezelfde middenlijn staat als menu, iconen en knop. */
.navbar img{
    height: 39px;
    width: auto;
    display: block;
}

.navbar .fi{
    border-radius:100%;
    background-size:cover;
    width:20px;
    height:20px;
    min-width:20px;
}

.navbar .dropdown-divider{
	border-top: 1px dashed #dedede;
}

.navbar .dropdown-item{
	font-weight:600;
  font-size:17px;
}

.navbar .dropdown-item:focus, .navbar .dropdown-item:hover {
    color:#fe6500;
    background-color: transparent;
}

.navbar .dropdown-toggle::after{
	display:none;
}

.navbar .menu2 > ul{
	list-style:none;
	margin:0px;
	padding:0px;
	display: flex;
	align-items: center;
}

.navbar .menu2 > ul > li{
	color: #333;
    font-weight: 700;
}

.navbar .menu2 > ul > li.item{
    padding: 0px 0px 0px 18px;
	max-width: 50px;
}

.navbar .menu2 > ul > li .nav-link{
	display: flex;
	align-items: center;
}

.navbar .menu2 > ul > li.flag {
    padding: 0px 3px;
}

.navbar .menu2 > ul > li:hover{
	color:#ff6600;
}

.navbar .menu2 .button{
	font-size: 1rem;
    color: #fff;
    padding: 4px 15px;
    font-weight: 600;
    margin-left: 20px;
	border-width:1px;
	margin-bottom: 0px;
}

.navbar .menu2 .button:hover{
	border-width:1px !important;
}

.navbar .menu2 .fi{
	height:20px;
	width:20px;
	min-width:20px;
	background-size:cover;
}

.navbar .menu2 .material-symbols-outlined{
	font-size:32px;
}

.navbar .menu2 .cart_items {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #fe6500;
    height: 18px;
    min-width: 18px;
    padding: 0 4px;
    border-radius: 100px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    font-size: 13px;
    font-weight: 700;
    box-sizing: border-box;
}

.navbar .menu2 .dropdown-menu{
    border: 0px;
    padding: 10px 5px;
    border-radius: 20px;
    background: #fff;
    top: 38px;
	z-index: 2000;
	box-shadow: 0px 5px 20px -7px rgb(0 0 0 / 17%);
}

.navbar-space{
	height:79px;
}

/* HOMEPAGE TOP */
.homepage-top{
	padding: 0px;
	/* GEEN vaste hoogte meer (2026-08-14). Dit stond op height: 500px, en de witte sectie
	   eronder begint precies op die grens, staat later in de DOM en heeft position: relative,
	   dus die schildert eroverheen. Paste de tekstkolom niet in 500px, dan verdween de
	   onderste regel achter dat witte vlak, inclusief de klik erop. Gemeten met de
	   sterrenregel erbij: Bulgaars loopt vanaf 1200px 15px over, Tsjechisch en Slowaaks 17px
	   tussen 768 en 820px. Bij Duits, Frans, Hongaars en Bulgaars op 768px was er ook ZONDER
	   die regel al 28px overloop, dus dit repareert meteen bestaande schade.
	   min-height laat de sectie meegroeien waar het nodig is en verandert niets waar het past. */
    min-height: 500px;
	padding-top: 75px;
      background: linear-gradient(0deg, rgb(255 102 0 / 7%) 0%, rgba(250, 248, 240, 0) 24%);
}

/* Vanaf 768px staan de tekst en de collage naast elkaar in een flex-rij. De collage is met
   opzet veel hoger dan de sectie (gemeten 955px tegen 500px) en loopt door achter het witte
   vlak eronder. Zonder deze grens zou hij door de min-height hierboven de hoogte van de hele
   hero gaan bepalen en zakt het ontwerp honderden pixels. Met een maximum telt hij nog maar
   mee tot de sectiehoogte, terwijl de beelden gewoon doorlopen: er staat nergens boven hem
   overflow: hidden. Alleen de TEKSTkolom bepaalt zo de hoogte.
   425 = de 500px sectiehoogte min de 75px bovenruimte. */
@media (min-width: 768px) {
	.homepage-top .row > .col-md-5 {
		max-height: 425px;
	}
}

.homepage-top h1{
	font-size: 54px;
    font-weight: 800;
    max-width: 655px;
	opacity: 0;
    animation: fadeIn 1s ease-out forwards;
    animation-delay: 0.15s; /* Iets later laten starten voor een subtiele vertraging */
}

.homepage-top h1.long-title{
	font-size: 49px;
}

.homepage-top p{
	font-size: 22px;
	font-weight:300;
    max-width: 570px;
	opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease-out forwards;
    animation-delay: 0.3s; /* Kortere vertraging zodat het sneller na de h1 komt */
	margin-bottom:20px;
}

.homepage-top .button {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
    animation-delay: 0.4s; /* Sneller na de p laten komen */
	display:block;
	width:100%;
	max-width:330px;
	text-align:center;
    padding: 12px 15px;
}

.homepage-top span.cta-text,
.theme-top span.cta-text {
    opacity: 0;
    transform: translateY(20px);
    display: block;
    /* 13px in plaats van 14 (keuze Ernst, 2026-08-15). De compacte regel moet in ALLE talen
       op een regel passen, ook als de boekenteller over het miljoen gaat. Op 14px hield het
       Nederlands nog maar 8,5px over van de 330; op 13px is er ruimte om door te groeien.
       13px blijft goed leesbaar voor een bijschrift onder een knop. */
    font-size: 13px;
    width: 100%;
    max-width: 330px;
    font-weight: 300;
    text-align: center;
    color: #333;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% auto;
    background-image: linear-gradient(
        110deg,
        #E65100, /* Een diep, donker oranje */
        #ff6600, /* Jouw primaire, levendige oranje */
        #F5953A, /* De lichte piek. Was #FFAB40; op verzoek zachter gezet (2026-08-13) zodat de
                    veeg minder opvalt. De twee merk-oranjes hierboven zijn ONGEWIJZIGD. */
        #E65100  /* Eindigt met donker oranje voor een naadloze loop */
    );
    animation:
        fadeInUp 0.6s ease-out 0.5s forwards,
        /* Terug op de oorspronkelijke 6s (keuze Ernst, 2026-08-14). Tussendoor op 16 en 12
           gestaan; de veeg mag toch weer wat levendiger. */
        moveGradient 6s ease-in-out infinite;
}

.homepage-top span.cta-text b,
.theme-top span.cta-text b {
	font-weight:500;
}

/* Sterrenregel onder de teller (2026-08-13). Erft grootte, gewicht, breedte, centrering en
   het bewegende kleurverloop van .cta-text hierboven; hier staat alleen wat afwijkt.
   De vertraging is iets langer zodat de twee regels na elkaar in beeld komen in plaats van
   tegelijk. */
.homepage-top span.cta-rating,
.theme-top span.cta-rating {
	margin-top: 2px;
	animation-delay: 0.65s, 0s;
}

/* ============================================================================
   DE COMPACTE REGEL: aantal boeken, sterren, cijfer en aantal beoordelingen op EEN regel.
   Vervangt de tellerregel en de beoordelingsregel samen (2026-08-14).
   ============================================================================ */

/* Het deelwoord ("gemaakt", "erstellt", "made") zit in een eigen element. Op de allersmalste
   telefoons verdwijnt het, zodat de regel daar nooit over twee regels valt. Gemeten: met
   deelwoord is de Nederlandse regel 321px en de beschikbare breedte 330 op een telefoon van
   360, maar 296 op een telefoon van 320. Boven 360px staat er dus "211.726 boeken gemaakt",
   daaronder "211.726 boeken". De spatie staat BUITEN dit element, anders plakt het getal bij
   verbergen tegen het naamwoord in de talen waar het deelwoord vooraan staat. */
@media (max-width: 359px) {
	.homepage-top span.cta-compact .cta-gemaakt,
	.theme-top span.cta-compact .cta-gemaakt {
		display: none;
	}

	/* De aggregaatregel op /reviews is op deze maat in het Duits en Sloveens net te breed
	   (309px en 307px waar 296 beschikbaar is) en brak dan over twee regels. Een maat kleiner
	   houdt hem overal op een regel; de sterren schalen mee, want die staan in em. */
	p.reviews-aggregate {
		font-size: 14px;
	}
}

/* De hele beoordelingsuitdrukking, dus "4,8/5 (1.115)", krijgt een stippellijn eronder. Het
   HELE blok is een link, maar dat is aan niets te zien zolang je er niet met de muis overheen
   gaat; deze streep maakt zichtbaar waar je naartoe gaat.
   Een streep volgt het kleurverloop van de ouder niet, dus de kleur moet hier apart. #FFAB40
   is de amber die oorspronkelijk als lichte piek in datzelfde verloop zat: hij leest als geel
   en blijft binnen het palet. Puur geel zou op deze crèmekleurige achtergrond vrijwel
   onzichtbaar zijn. */
.homepage-top span.cta-compact .cta-reviews-count,
.theme-top span.cta-compact .cta-reviews-count {
	border-bottom: 1px dashed #FFAB40;
	padding-bottom: 1px;
}

/* Bij het aanwijzen van het blok wordt die streep voller, net als het pijltje. */
.homepage-top a.cta-block-link:hover .cta-reviews-count,
.theme-top a.cta-block-link:hover .cta-reviews-count {
	border-bottom-color: #F5953A;
}

/* De scheidingspunt in de talen die geen bruikbaar verbindingswoord hebben. Groter en met
   meer lucht eromheen dan de tekst, anders valt hij op 14px in een licht lettertype weg. */
.homepage-top span.cta-rating .cta-dot,
.theme-top span.cta-rating .cta-dot {
	font-size: 1.5em;
	line-height: 0;
	vertical-align: -0.08em;
	margin: 0 2px;
}

/* Twee lagen sterren over elkaar, zodat een 4,8 er ook uitziet als een 4,8 en niet als een
   volle vijf. De onderste rij is de lege staat, de bovenste wordt op breedte afgesneden.
   position: relative hoort hier omdat de bovenste laag zich daaraan ophangt; line-height: 1
   houdt beide lagen even hoog, anders zou de halve regelhoogte van de ene laag de andere een
   pixel verschuiven. */
.homepage-top span.cta-rating .cta-stars,
.theme-top span.cta-rating .cta-stars {
	position: relative;
	display: inline-block;
	line-height: 1;
	letter-spacing: 1px;
	white-space: nowrap;
}

/* Beide lagen MOETEN hun eigen vulkleur krijgen. De ouder zet -webkit-text-fill-color op
   transparent en klemt een kleurverloop op de letters; zonder eigen kleur zouden allebei de
   lagen datzelfde verloop pakken en was er geen verschil te zien tussen vol en leeg. */
.homepage-top span.cta-rating .cta-stars-leeg,
.theme-top span.cta-rating .cta-stars-leeg {
	-webkit-text-fill-color: #dcd4c2;
	color: #dcd4c2;
}

.homepage-top span.cta-rating .cta-stars-vol,
.theme-top span.cta-rating .cta-stars-vol {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	/* #ff6600 is hetzelfde oranje als de gevulde sterren op /reviews en de middelste stop uit
	   het kleurverloop hiernaast, dus geen nieuwe merkkleur. */
	-webkit-text-fill-color: #ff6600;
	color: #ff6600;
}

/* De onderstreping MOET een eigen kleur krijgen. .cta-text zet
   -webkit-text-fill-color: transparent en klemt een kleurverloop op de tekst; een streep
   volgt dat verloop niet en zou de onderliggende color (#333) pakken, dus donkergrijs. */
.homepage-top span.cta-rating .cta-reviews-link,
.theme-top span.cta-rating .cta-reviews-link {
	/* Geen onderstreping meer (2026-08-13). Het hele blok is nu de link en het pijltje
	   hierachter is het teken dat je erop kunt klikken; een streep erbij werd te druk. */
	/* Bij elkaar houden: wordt de regel te lang, dan springt dit deel als geheel naar de
	   volgende regel in plaats van middenin af te breken. Dat speelt bij langere talen op
	   een smal scherm. */
	white-space: nowrap;
}

/* Het hele blok onder de knop is een link: tellerregel en sterrenregel samen. Dat geeft
   meteen een royaal aanraakvlak, veel groter dan een paar woorden; twee regels van 22,4px
   zijn samen ruim 44px hoog en dat is precies de maat die een duim nodig heeft.
   GEEN binnenruimte. Die zat er eerst wel, voor een achtergrondvlak bij het aanwijzen dat
   inmiddels is vervallen, en de 7px bovenaan duwde de tekst zichtbaar omlaag: het gat onder
   de knop werd 15px waar het op prod 8px is. Zonder binnenruimte klopt de balans weer en
   krijgen de regels ook de volle 330px, wat de lange talen goed uitkomt. */
.homepage-top a.cta-block-link,
.theme-top a.cta-block-link {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 330px;
	text-decoration: none;
	color: inherit;
}

/* Lucht onder het blok, ALLEEN op de homepage en de referral-pagina (keuze Ernst, 2026-08-14).
   Op de thema-, cadeau- en leeftijdpaginas is die niet nodig: daar zorgt het blok eronder al
   voor de tussenruimte. Deze marge telt mee in de hoogte van de tekstkolom, en die bepaalt
   sinds vandaag de hoogte van de hero, dus in de krappe talen groeit de sectie mee. Dat is
   precies de bedoeling: de sterrenregel valt nooit meer achter het witte vlak. */
.homepage-top a.cta-block-link {
	margin-bottom: 35px;
}

/* De spans binnenin dragen hun eigen breedte en marges; binnen de link zijn die niet meer
   nodig en zouden ze het vlak onnodig oprekken. */
.homepage-top a.cta-block-link span.cta-text,
.theme-top a.cta-block-link span.cta-text {
	max-width: none;
	margin-bottom: 0;
}

/* Hover: er verschijnt een pijltje.
   Een KLEURWISSEL werkt hier niet, en dat is geen slordigheid maar de aard van dit blok: de
   letters zijn doorzichtig gezet en wat je ziet is een bewegend kleurverloop dat erop is
   geklemd. Een color-regel heeft daar geen vat op, en het verloop uitzetten gaf een schok in
   plaats van een overgang. Een pijltje is duidelijker en gedraagt zich netjes.
   Het pijltje staat er altijd, alleen onzichtbaar. Zo verspringt de regel niet op het moment
   dat je hem aanwijst, en blijft de breedte gelijk in elke taal. */
.homepage-top span.cta-rating .cta-pijl,
.theme-top span.cta-rating .cta-pijl {
	display: inline-block;
	margin-left: 5px;
	/* De pijl mag NIET meetellen bij het centreren. Hij staat er altijd, ook onzichtbaar, en
	   duwde de zichtbare tekst daardoor 8,5 pixel naar links (gemeten: middelpunt 353,5 waar
	   de knop op 362 staat). Deze negatieve marge is exact zo groot als de pijl plus zijn
	   linkermarge, 5 + 12, zodat zijn netto bijdrage aan de regelbreedte nul is. Hij hangt nu
	   rechts buiten de regel, wat mag: er zit ruimte genoeg naast. */
	margin-right: -17px;
	/* Precies op de optische middenlijn van de tekst. Zonder deze regel gaat een inline
	   element op de basislijn staan, en dan hangt de pijl te laag; vertical-align: middle
	   legt het midden van de pijl op het midden van de kleine letters. */
	vertical-align: middle;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	/* EIGEN kleur, en dat is hier geen overbodige regel. De ouder zet
	   -webkit-text-fill-color: transparent en laat een kleurverloop op de letters vallen.
	   Die doorzichtigheid erft dit pijltje, dus zonder deze twee regels verscheen hij wel
	   maar in onzichtbare inkt. #E65100 is de donkerste stop uit datzelfde verloop, dus
	   geen nieuwe merkkleur. */
	-webkit-text-fill-color: #E65100;
	color: #E65100;
}

.homepage-top span.cta-rating .cta-pijl svg,
.theme-top span.cta-rating .cta-pijl svg {
	display: block;
	stroke: #E65100;
}

.homepage-top a.cta-block-link:hover .cta-pijl,
.theme-top a.cta-block-link:hover .cta-pijl {
	opacity: 1;
	transform: translateX(0);
}

/* BEWUST GEEN uitzondering voor aanraakschermen (keuze Ernst, 2026-08-14). Die stond er even:
   op een telefoon bestaat aanwijzen niet, dus verschijnt de pijl daar nooit en verraadt niets
   dat het blok aanklikbaar is. Maar permanent tonen maakte het op een klein scherm te druk,
   en dat weegt zwaarder. De pijl is dus puur een hover-teken op muisschermen, en telt daardoor
   nergens mee in het centreren (zie de negatieve rechtermarge hierboven). */

@media (prefers-reduced-motion: reduce) {
	.homepage-top span.cta-rating .cta-pijl,
	.theme-top span.cta-rating .cta-pijl {
		transition: none;
		transform: none;
	}
}

.homepage-top p.ref{
	background: #ffd7ba70;
    border-radius: 100px;
    padding: 10px 20px;
    margin-top: -45px;
    font-size: 15px;
    font-weight: 600;
    color: #ff6600;
}

.homepage-top img{
	width:100%;
	border-radius: 3px;
}

.homepage-top .examples {
    display:block;
	margin-bottom:20px;
	position:relative;
	border-radius: 3px;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
  opacity: 0.85;
	transform: perspective(1000px) rotateY(-5deg);
}

.homepage-top .examples .border-right {
    position: absolute;
    right: -4px;
    top: 50%;
    height: 98%;
    width: 4px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 3px 3px 0px;
}

.homepage-top .examples::before {
    content: '';
    position: absolute;
    top: 0;
    left: 3px;
    width: 4px;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
    border-radius: 3px 0px 0px 3px;
}

.homepage-top .examples::after {
    content: '';
    position: absolute;
    top: 0;
    left: 6px;
    width: 6px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
    pointer-events: none;
}

.homepage-top .examples:hover {
	transform: none;
	box-shadow: -7px 7px 15px rgb(0 0 0 / 40%); !important;
	opacity: 1;
}

.homepage-top .slider1{
	margin-top:120px;
	-webkit-animation: topslider1 2s normal ease-out;
    animation: topslider1 2s normal ease-out;
	position:relative;
}

.homepage-top .slider2{
	margin-top:40px;
	-webkit-animation: topslider2 1.5s normal ease-out;
    animation: topslider2 1.5s normal ease-out;
	position:relative;
}

.homepage-top .slider3{
	margin-top:-35px;
	-webkit-animation: topslider3 1s normal ease-out;
    animation: topslider3 1s normal ease-out;
	position:relative;
}

/* HOMEPAGE How it works */
.homepage-howitworks{
  background: linear-gradient(180deg, rgb(255 102 0 / 7%) 0%, rgba(250, 248, 240, 0) 100%);
}

.homepage-howitworks .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px;
	min-height:400px;
	margin-bottom:50px;
	position:relative;
}

.homepage-howitworks h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 0px;
}

.homepage-howitworks h3 {
    font-weight: 700;
    font-size: 26px;
	display: flex;
    align-items: center;
}

.homepage-howitworks h2.step-title {
    font-weight: 700;
    font-size: 26px;
    display: flex;
    align-items: center;
    color: inherit;
    margin-bottom: .5rem;
}

.homepage-howitworks .info-title{
	margin-bottom:20px;
	display:flex;
}

.homepage-howitworks span {
    background: #ff6600;
	background-image: linear-gradient(-180deg, #fd8130, #ff6600);
    border: 2px solid #f60;
    display: flex;
    width: 43px;
    height: 43px;
    text-align: center;
    color: #fff;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
	font-weight: 700;
    font-size: 26px;
	flex-shrink: 0;
}

.homepage-howitworks p {
    font-size: 18px;
    font-weight: 300;
}

.homepage-howitworks p b{
    font-weight: 700;
}

.homepage-howitworks img.step {
   /* 15-09-2026: begrenzing op BREEDTE, niet op hoogte. De drie platen zijn vierkant
      (640x640), dus de weergave blijft identiek, maar met width/height op de img kan de
      browser de ruimte nu vooraf reserveren. Met max-height bleef de breedte op de
      kolombreedte hangen en werd de plaat uitgerekt. */
   max-width: 310px;
   height: auto;
}

.homepage-howitworks img.step2{
	 transform: scaleX(-1);
}

/* HOMEPAGE Links */
.homepage-links{
}

.homepage-links h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 30px;
}

.homepage-links .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px 50px 20px;
	margin-bottom:50px;
}

.homepage-links .link-wrapper{
	background:#faf8f0;
	padding:25px 35px;
	margin-bottom:30px;
	border-radius:20px;
}

.homepage-links h3{
	font-weight: 700;
    font-size: 20px;
}

.homepage-links ul{
	margin:0px;
	padding:0px;
	list-style:none;
}

.homepage-links ul li{
	padding:2px 0px;
}

.homepage-links ul li a{
	color:#333333c4;
}

.homepage-links ul li a:hover{
	color:#f60;
}

/* HOMEPAGE examples */
.homepage-examples{
}

.homepage-examples .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px 50px 20px;
	margin-bottom:50px;
}

.homepage-examples h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 5px;
}

.homepage-examples p{
	font-weight: 300;
    font-size: 19px;
	margin-bottom: 35px;
}

.homepage-examples h3{
	font-weight: 700;
    font-size: 26px;
	margin-bottom: 15px;
	margin-top:70px;
}

.homepage-examples h4{
	font-size: 20px;
    font-weight: 700;
	border-bottom: 1px dashed #00000026;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.homepage-examples h5, .homepage-examples h3.used-photo-title{
	font-size: 16px;
    font-weight: 600;
    border-bottom: 1px dashed #00000026;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-top: 0;
}

.homepage-examples hr{
	margin: 0px 0px 35px;
    border-top: 2px dashed #c5c5c56e;
    opacity: 1;
}

.homepage-examples ul{
	margin: 0px;
   padding: 0px;
   list-style: none;
}

.homepage-examples ul li{
	margin-bottom: 12px;
    line-height: 20px;
}

.homepage-examples ul li:last-of-type{
	margin-bottom: 0px;
}

.homepage-examples ul li a{
	color:#ff6600;
	font-weight:700;
	display: flex;
    align-items: center;
}

.homepage-examples ul li a:hover{
	color:#ff883a;
}

.homepage-examples ul li a span{
	margin-left:3px;
}

.homepage-examples .box-wrapper{
    border-radius: 30px;
    padding: 38px 0px;
    margin-bottom: 38px;
}

.homepage-examples .box-wrapper1{
	background: #ffd7ba42;
}

.homepage-examples .box-wrapper2{
    background: #d8e2dc38;
}

.homepage-examples .box-wrapper3{
    background: #fcd5ce36;
}

.homepage-examples .example .box{
    margin: 0 auto;
    padding: 12px;
    border-radius: 20px;
}

.homepage-examples .example .box-info{
    padding:25px;
}

.homepage-examples .example .box-link{
    padding: 15px 25px;
    margin-top: 10px;
}

.homepage-examples .example .box-link a:hover {
    color:#333;
}

.homepage-examples .example .box-link a {
    color: #ff6600;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.homepage-examples .example .box-link a span{
    margin-left:2px;
}

.homepage-examples .example .box1{
    background: #ffd7ba75;
}

.homepage-examples .example .box2{
    background: #d8e2dc99;
}

.homepage-examples .example .box3{
    background: #fcd5ce73;
}

.homepage-examples .example .box1 .userphoto{
	border: 3px solid #D6B18F;
	margin-bottom:8px;
  height: -webkit-fill-available !important;
  max-height:125px;
}

.homepage-examples .example .box2 .userphoto{
	border: 3px solid #B4BEB8;
	margin-bottom:8px;
  height: -webkit-fill-available !important;
  max-height:125px;
}

.homepage-examples .example .box3 .userphoto{
	border: 3px solid #DBB0AD;
	margin-bottom:8px;
  height: -webkit-fill-available !important;
  max-height:125px;
}

.homepage-examples .example span.arrow{
    font-size: 55px;
    margin-top: 112px;
    margin-right: -40px;
    text-align: right;
    display: block;
    transform: rotateZ(130deg) scaleX(-1);
    color: #ff6600cc;
}

.homepage-examples .example img{
	width:100%;
	border-radius:15px;
	opacity:0.9;
  object-fit: cover;
}

.homepage-examples .example a.cover {
	display: block;
    position: relative;
	border-radius: 5px;
	box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
	transform: perspective(1000px) rotateY(-5deg);
	transition: transform 0.3s ease;
	opacity:0.88;
	left: -3px;
}

.homepage-examples .example a.cover img{
	width:100%;
	border-radius: 5px;
	opacity:1;
}

.homepage-examples .example a.cover .border-right {
    position: absolute;
    right: -7px;
    top: 50%;
    height: 98%;
    width: 7px;
    background: #fff;
    border-right: 2px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 5px 5px 0px;
}

.homepage-examples .example a.cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 7px;
    width: 7px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.homepage-examples .example a.cover::after {
  content: '';
   position: absolute;
   top: 0;
   left: 14px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 25%), transparent);
}

.homepage-examples .example a.cover:hover{
	opacity:1;
	transform: none;
}

.homepage-examples .item {
    border-radius: 15px;
	padding:8px;
	border: 0px solid #e0e0e0;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	flex: 0 0 200px; /* Elk item neemt 200px in */
    margin-right: 25px;
    text-align: center;
    background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000000 120%);
}

/* Eerste element */
.homepage-examples .item:nth-child(8n+1) {
    background-color: #FFD7BA;
    border-color: #D6B18F; /* Iets donkerder */
}

/* Tweede element */
.homepage-examples .item:nth-child(8n+2) {
    background-color: #D8E2DC;
    border-color: #B4BEB8; /* Iets donkerder */
}

/* Derde element */
.homepage-examples .item:nth-child(8n+3) {
    background-color: #FCD5CE;
    border-color: #DBB0AD; /* Iets donkerder */
}

/* Vierde element */
.homepage-examples .item:nth-child(8n+4) {
    background-color: #FAE1DD;
    border-color: #D6BFB9; /* Iets donkerder */
}

/* Vijfde element */
.homepage-examples .item:nth-child(8n+5) {
    background-color: #F8EDEB;
    border-color: #D5C9C7; /* Iets donkerder */
}

/* Zesde element */
.homepage-examples .item:nth-child(8n+6) {
    background-color: #FFE5D9;
    border-color: #DCC2B5; /* Iets donkerder */
}

/* Zevende element */
.homepage-examples .item:nth-child(8n+7) {
    background-color: #ECE4DB;
    border-color: #C5B8AA; /* Iets donkerder */
}

/* Achtste element */
.homepage-examples .item:nth-child(8n+8) {
    background-color: #FEC5BB;
    border-color: #E0A499; /* Iets donkerder */
}

/* Negende element (als er meer dan 8 zijn) */
.homepage-examples .item:nth-child(8n+9) {
    background-color: #FEC89A;
    border-color: #D6A17C; /* Iets donkerder */
}

/* Tiende element (als er meer dan 9 zijn) */
.homepage-examples .item:nth-child(8n+10) {
    background-color: #E8E8E4;
    border-color: #C2C2BF; /* Iets donkerder */
}

.homepage-examples .item:hover {
	box-shadow: 0 2px 8px rgb(0 0 0 / 25%)
}

.homepage-examples .item img{
	border-radius:8px;
	width:100%;
	height:100%;
	max-height:250px;
	object-fit:cover;
	margin-bottom:10px;
	opacity:0.85;
	width: 100%;
    height: auto;
}

.homepage-examples .item a:hover{
	color:#333;
}

.homepage-examples .item:hover img{
	opacity:1;
}

.homepage-examples .item h5{
	font-size:14px;
	text-align:center;
	margin-bottom:0px;
	padding:2px 20px 5px
}

.homepage-examples .slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 20px;
    padding-top: 20px;
    border-radius: 20px;
    background: #faf8f0;
}

.homepage-examples .slider-track {
    display: flex;
    transition: transform 0.5s ease;
    width: max-content;
}

/* SEIZOENS-BANNER boven het wizard-formulier
   Toont één prominente CTA voor de eerstvolgende in-window feestdag. */
.seasonal-promo {
    margin-bottom: 50px;
}
.seasonal-promo .seasonal-promo-card {
    background: linear-gradient(135deg, #ffefdb 0%, #ffe5cc 100%);
    border-radius: 32px;
    padding: 30px 40px;
    box-shadow: 0 4px 24px rgba(255, 102, 0, 0.08);
}
.seasonal-promo .seasonal-promo-icon {
    width: 100%;
    max-width: 200px;
    height: auto;
    /* 16-09-2026: schaduw op de BASISregel, niet op .mp-ex-seen. Die klasse wordt
       door index.php niet gezet bij prefers-reduced-motion of zonder
       IntersectionObserver; die bezoekers zouden anders geen schaduw krijgen. En
       bij de rest zou hij abrupt verschijnen op het moment van inscrollen. */
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
}
.seasonal-promo .seasonal-promo-body {
    padding-left: 10px;
}
.seasonal-promo .seasonal-promo-badge {
    display: inline-block;
    background-color: #fe70120a;
    color: #ff6602;
    border: 1px solid #ff6602;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 15px;
    letter-spacing: 0.3px;
}
.seasonal-promo h2 {
    font-weight: 800;
    color: #2c1810;
    font-size: 28px;
    margin-bottom: 5px;
    line-height: 1.2;
}
.seasonal-promo p {
    font-size: 19px;
    color: #5a4030;
    margin-bottom: 18px;
    font-weight: 300;
}
.seasonal-promo .seasonal-promo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
}
.seasonal-promo .seasonal-promo-actions .button {
    margin-bottom: 0; /* gap regelt de ruimte; basis-.button heeft margin-bottom 8px */
    max-width: 100%;
    white-space: nowrap; /* 1 regel; JS-fitter verkleint het font per taal tot het past */
}
.seasonal-promo .seasonal-promo-actions .button {
    font-size: 16px;
    padding: 10px 34px;
}
@media (max-width: 767.98px) {
    .seasonal-promo .seasonal-promo-actions { flex-direction: column; align-items: center; gap: 8px; }
}
.seasonal-promo .button {
    display: inline-block;
}

@media (max-width: 767px) {
    .seasonal-promo .seasonal-promo-card {
        padding: 24px 25px;
        border-radius: 24px;
    }
    .seasonal-promo .seasonal-promo-icon {
        max-width: 130px;
    }
    /* Mobile: badge boven icoon (via col-12 d-md-none), rest gecentreerd */
    .seasonal-promo .seasonal-promo-mobile-badge-wrap {
        margin-bottom: 12px;
    }
    .seasonal-promo .seasonal-promo-body {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 12px;
        text-align: center;
    }
    .seasonal-promo h2 {
        font-size: 23px;
    }
    .seasonal-promo p {
        font-size: 18px;
        margin-left: auto;
        margin-right: auto;
    }
    .seasonal-promo .seasonal-promo-badge {
        font-size: 12px;
    }
}

/* HOMEPAGE FORM */
.homepage-form .wrapper {
	border-radius: 48px;
	padding:50px;
	overflow: hidden;
	min-height: 380px;
    background: #f8f0e2;
}

.homepage-form h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 5px;
}

/* Summary iconen bij gekozen opties */
.summary-icon {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 8px;
}


/* Sticky CTA bar op mobile — zelfde stijl als homepage mobile-footer-new-book */
.sticky-cta-bar {
    position: fixed;
    bottom: -100px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10;
    background: #ffffffcf;
    border-top: 1px solid #ffdcc4;
    transition: bottom 0.4s ease-in-out;
    padding: 15px 12px;
}

.sticky-cta-bar.is-visible {
    bottom: 0;
}

.sticky-cta-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sticky-cta-price {
    font-size: 1.2rem;
    font-weight: 800;
    color: #20a165;
    flex-shrink: 0;
}

.sticky-cta-bar .button {
    flex: 1;
    margin: 0 !important;
    width: 100%;
    text-align: center;
    padding: 10px 5px;
}

@media (min-width: 768px) {
    .sticky-cta-bar {
        display: none !important;
    }
}

/* Resume banner (localStorage herstel) */
.wizard-resume-banner {
    background: #f9e8da;
    border: 2px solid #ff6600;
    border-radius: 20px;
    padding: 14px 18px;
    margin-bottom: 15px;
    margin-top: 15px;
}

.wizard-resume-banner p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0px 0px 10px;
    font-weight: 600;
    font-size: 18px;
    color: #333;
}

.wizard-resume-banner p .material-symbols-outlined {
    color: #ff6600;
    font-size: 26px;
}

.wizard-resume-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Twee secties in één banner (db-drafts + wizard-state tegelijk) */
.wizard-resume-banner__section + .wizard-resume-banner__section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 102, 0, 0.25);
}

.wizard-resume-actions .button,
.homepage-form .wizard-resume-actions .button {
    padding: 7px 18px;
    font-size: 15px;
    white-space: nowrap;
    margin-top: 0;
    margin-bottom: 0;
}

.homepage-form p.top{
	font-weight: 300;
    font-size: 19px;
	margin-bottom: -35px;
}

.homepage-form h4, .homepage-form h3.form-section-title-spaced{
	font-weight: 700;
    font-size: 26px;
	padding-top: 2rem;
	clear:both;
}

.homepage-form h5{
	display: flex;
    align-items: center;
	margin-bottom: 15px;
    font-weight: 600;
}

.homepage-form hr{
	margin: 30px 0px;
    border-top: 1px dashed #ff6600;
}

.homepage-form .custom-radio-block {
    cursor: pointer;
    margin-top: 15px;
    position: relative;
    font-size: 16px;
    color: #555;
	width:100%;
}

.homepage-form .custom-radio-block input[type="radio"] {
    display: none;
}

.homepage-form .radio-content {
    border: 2px solid #e0e0e0;
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    background-color: #fdfdfd;
    cursor: pointer;
	float:left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%);
}

.homepage-form .illustrationstyle {
    padding: 20px 25px 10px;
}

/* Eerste element */
.form-group.row .col-12.col-md-4:nth-child(8n+1) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+1) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+1) .radio-content {
    background-color: #FFD7BA;
    border-color: #D6B18F; /* Iets donkerder */
}

/* Tweede element */
.form-group.row .col-12.col-md-4:nth-child(8n+2) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+2) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+2) .radio-content {
    background-color: #D8E2DC;
    border-color: #B4BEB8; /* Iets donkerder */
}

/* Derde element */
.form-group.row .col-12.col-md-4:nth-child(8n+3) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+3) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+3) .radio-content {
    background-color: #FCD5CE;
    border-color: #DBB0AD; /* Iets donkerder */
}

/* Vierde element */
.form-group.row .col-12.col-md-4:nth-child(8n+4) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+4) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+4) .radio-content{
    background-color: #FAE1DD;
    border-color: #D6BFB9; /* Iets donkerder */
}

/* Vijfde element */
.form-group.row .col-12.col-md-4:nth-child(8n+5) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+5) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+5) .radio-content {
    background-color: #F8EDEB;
    border-color: #D5C9C7; /* Iets donkerder */
}

/* Zesde element */
.form-group.row .col-12.col-md-4:nth-child(8n+6) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+6) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+6) .radio-content  {
    background-color: #FFE5D9;
    border-color: #DCC2B5; /* Iets donkerder */
}

/* Zevende element */
.form-group.row .col-12.col-md-4:nth-child(8n+7) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+7) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+7) .radio-content {
    background-color: #ECE4DB;
    border-color: #C5B8AA; /* Iets donkerder */
}

/* Achtste element */
.form-group.row .col-12.col-md-4:nth-child(8n+8) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+8) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+8) .radio-content {
    background-color: #FEC5BB;
    border-color: #E0A499; /* Iets donkerder */
}

/* Negende element (als er meer dan 8 zijn) */
.form-group.row .col-12.col-md-4:nth-child(8n+9) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+9) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+9) .radio-content {
    background-color: #FEC89A;
    border-color: #D6A17C; /* Iets donkerder */
}

/* Tiende element (als er meer dan 9 zijn) */
.form-group.row .col-12.col-md-4:nth-child(8n+10) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+10) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+10) .radio-content {
    background-color: #E8E8E4;
    border-color: #C2C2BF; /* Iets donkerder */
}

.homepage-form .radio-content img {
    max-width: 90px;
    height: auto;
    margin: 0 auto 10px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
	transition: transform 300ms cubic-bezier(0.2, 0.6, 0.6, 1);
}

.homepage-form .radio-content:hover img {
    transform: scale(1.08);
	opacity:1;
}

.homepage-form .illustrationstyle img{
    filter: none;
    max-width: 100%;
    border-radius: 19px;
   	margin-bottom: 10px;
}

.homepage-form .illustrationstyle:hover img {
    transform: scale(1.06) !important;
    opacity: 1;
    filter: none !important;
}

/* Preview-afbeelding inzoomen binnen dezelfde kaartgrootte: de kaart blijft even groot, het beeld wordt groter en strakker uitgesneden zodat de personen duidelijker zijn. */
.homepage-form .illustrationstyle .style-img-zoom {
    overflow: hidden;
    border-radius: 19px;
    margin-bottom: 10px;
    line-height: 0;
}
.homepage-form .illustrationstyle .style-img-zoom img {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    transform: scale(1.1);
    transform-origin: center 42%;
}
.homepage-form .illustrationstyle:hover .style-img-zoom img,
.homepage-form .custom-radio-block input[type="radio"]:checked + .illustrationstyle .style-img-zoom img {
    transform: scale(1.16) !important;
}

.homepage-form .big img {
    max-width: 110px;
    margin-bottom: 15px;
	opacity:0.9;
}

.homepage-form .big:hover img {
	opacity:0.9;
}

.homepage-form .radio-content span {
    display: block;
    font-size: 19px;
    font-weight: 600;
    color: #000;
}

.homepage-form .radio-content span.font{
	font-size: 24px;
}

.homepage-form .radio-content span.font2{
	font-size: 22px;
    font-weight: 500;
}

.homepage-form .custom-radio-block input[type="radio"]:checked + .radio-content {
    border-color: #f60 !important;
    box-shadow: rgb(56 56 56 / 36%) 0 3px 8px;
	background:#ff66000a;
	background: linear-gradient(180deg, rgb(255 255 255 / 14%) 55%, #0000001f 120%);
}

.homepage-form .custom-radio-block input[type="radio"]:checked + .radio-content img,
.homepage-form .radio-content:hover img,
.homepage-form .illustrationstyl img
 {
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3)) sepia(10%);
    transform: scale(1.09);
}

.homepage-form .custom-radio-block input[type="radio"]:checked + .illustrationstyle img{
    transform: scale(1.09);
	opacity:1;
	filter: none;
}

.homepage-form .radio-content:hover {
    border-color: #f60 !important;
    box-shadow: rgb(56 56 56 / 36%) 0 3px 8px;
	background:#ff66000a;
	background: linear-gradient(180deg, rgb(255 255 255 / 14%) 55%, #0000001f 120%);
}

.homepage-form .radio-content:hover span{
	color: #ff6600;
}

.homepage-form .custom-radio-block input[type="radio"]:checked + .radio-content span{
    color: #ff6600;
}

.homepage-form .style-preview{
    background: #fcf7f1;
    padding: 8px;
    border: 2px solid #fdd6b9;
    text-align: center;
    border-radius: 20px;
    margin-top: -40px;
    padding-top: 35px;
}

.homepage-form .style-preview a{
   font-size: 14px;
   font-weight:500;
}

.homepage-form .style-preview:hover{
	background: #fff;
}

.homepage-form .style-preview:hover a{
	color: #ff6600;
}

.homepage-form .modal-body img{
    width: 100%;
    border-radius: 20px;
    margin-bottom: 20px;
}

.homepage-form .modal-body img.last{
    margin-bottom: 0px;
}

.homepage-form .modal-body .font-title{
    position: absolute;
    top: 40px;
    font-size: 54px;
	display: flex;
	width: 100%;
	padding: 0px 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
	font-weight:700;
	line-height: 120%;
    text-shadow: -1px 0 #00000096, 0 1px #000000e3, 1px 0 #00000096, 0 -1px #00000096, 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.homepage-form .inputwrapper{
	background: #fcf7f1;
    padding: 30px 30px;
    border-radius: 20px;
    border: 2px solid #fdd6b9;
}

.homepage-form .inputwrapper label{
	font-weight:600;
}

.homepage-form .inputwrapper label.form-check-label {
    font-weight: 400;
    margin-bottom: 5px;
	cursor:pointer;
}

.homepage-form .inputwrapper label.form-check-label b {
    font-weight: 600;
}

.homepage-form .button{
	margin-top:20px;
}

.homepage-form .button .spinner-border{
	color: #fff;
    margin: 0px;
    height: 21px;
    width: 21px;
}

.homepage-form .button.remove-character{
	font-size: 12px;
    padding: 3px 10px;
    margin: 0px 0px 0px 10px;
}

.homepage-form .final-step .inputwrapper2 .button{
	margin-top:0px;
}

.homepage-form #add-character .material-symbols-outlined {
    margin-right: 3px;
	vertical-align: sub;
}

.homepage-form .character-type-selector div {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.homepage-form .character-type-selector .btn{
	color: #f60;
	border: 2px solid #f60;
	border-radius: 100px;
  margin: 0;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
}

.homepage-form .character-type-selector .btn.char-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  white-space: nowrap;
  font-size: 14px;
}

.homepage-form .character-type-selector .btn.char-type-btn .material-symbols-outlined {
  font-size: 24px;
}

@media (max-width: 767px) {
  .homepage-form .character-type-selector .btn.char-type-btn {
    flex: 1 1 0;
    justify-content: center;
    padding: 8px 6px;
    font-size: 13px;
    gap: 3px;
  }
  .homepage-form .character-type-selector .btn.char-type-btn .material-symbols-outlined {
    font-size: 18px;
  }
}

.homepage-form .character-type-selector .btn-check:checked+.btn{
	background-color: #f60;
  background-image: linear-gradient(-180deg, #fd8130, #ff6600);
	color: #fff;
}

.homepage-form .notification{
	background: #fce9d7;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 14px;
	margin:-5px 0px 15px;
    color: #ff6600;
	font-weight: 600;
	display: flex;
}

.homepage-form .notification2{
	display: block;
}

.homepage-form .notification.step9-price-preview{
	margin: 15px 0px 0px;
}

.homepage-form .notification-error{
	color: #fff;
    background: #dc3545;
}

.homepage-form .notification .material-symbols-outlined {
    margin-right: 6px;
    margin-top: -2px;
    font-size: 24px;
}

.homepage-form .notification a{
    text-decoration: underline;
    color: #333333d1;
	 white-space: nowrap;
}

.homepage-form .notification a .material-symbols-outlined{
    font-size: 16px;
	margin-right: 0px;
    margin-top: 0px;
	margin-left: 2px;
	vertical-align: sub;
}

.homepage-form .upload-box {
	border: 2px dashed #aaa;
	border-radius: 20px;
	height: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.3s, color 0.3s;
	color:#aaa;
}

.homepage-form .upload-box:hover {
	color:#ff6600;
}

.homepage-form .upload-box:hover {
	border-color: #ff6600;
}

.homepage-form .upload-box .material-symbols-outlined {
	font-size: 48px;
	margin-bottom: 8px;
}

.homepage-form .upload-box p {
	margin: 0;
	font-size: 16px;
	transition: color 0.3s;
	text-align: center;
	color:#aaa;
}

.homepage-form .upload-box:hover  p {
	color:#ff6600;
}

.homepage-form .croppedImagePreview{
	display: block;
    margin: 10px 0px 0px;
    border-radius: 20px;
	max-width: 250px;
	width: 100%;
	border: 2px solid #fdd6b9;
}

.cropper-container, #imageToCrop{
	max-height:60vh !important;
}

.homepage-form  .spinner-border{
	color:#ff6600;
	height:50px;
	width:50px;
	margin-bottom: 10px;
}

.homepage-form .generated-image-option{
    width: 100%;
	cursor:pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	border-radius: 20px;
	border: 2px solid #fdd8bb;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
}

.homepage-form .generated-image-option img{
	width:100%;
	opacity: 0.9;
    transition: transform 400ms cubic-bezier(0.2, 0.6, 0.6, 1);
}

.homepage-form .generated-image-option:hover img, .homepage-form .generated-image-option:has(input[type="radio"]:checked) img{
    transform: scale(1.06);
}

.homepage-form .generated-image-option:has(input[type="radio"]:checked), .homepage-form .generated-image-option:hover{
	border: 2px solid #f60;
	box-shadow: rgb(56 56 56 / 36%) 0 3px 8px;
}

.homepage-form  .previewContainer .position-relative .delete-crop-btn {
    position: absolute;
    top: 0px; /* Iets boven de rand */
    right: 0px; /* Iets buiten de rand */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparante achtergrond */
    border-radius: 50%; /* Rond maken */
    padding: 2px;
    line-height: 1; /* Zorgt dat icoon goed past */
    cursor: pointer;
    text-decoration: none; /* Geen onderlijning */
    color: #dc3545; /* Rode kleur voor verwijderen */
    border: 1px solid #dc3545;
}

.homepage-form  .previewContainer .position-relative .delete-crop-btn:hover {
    background-color: #dc3545;
    color: white;
}

.homepage-form  .previewContainer .position-relative .delete-crop-btn .material-symbols-outlined {
    font-size: 18px; /* Grootte van het icoon */
    vertical-align: middle; /* Goed uitlijnen */
}

.homepage-form .final-step .inputwrapper{
	border-radius: 30px;
}

.homepage-form .final-step .inputwrapper2{
	background-color: #fff;
	border: 2px solid #fdd6b9;
}

.homepage-form .final-step .inputwrapper2 h4{
	font-size:22px;
}

.homepage-form .final-step h5 {
    margin-bottom: 10px;
    padding-bottom: 5px;
    font-weight: 700;
	color: #ff6600;
}

.homepage-form .final-step .magic-icon .material-symbols-outlined{
	margin-right: 19px;
    font-size: 24px;
    padding: 8px;
    border-radius: 100%;
    background-color: #fff;
    border: 2px solid #fdd6b9;
    color: #ff6600;
	max-height: 44px;
}

.homepage-form .final-step #narrative-summary-text {
    line-height: 1.7;
	margin:0px;
}

.homepage-form .final-step #narrative-summary-text b{
    font-weight:700;
}

.homepage-form .final-step #toggle-details-link {
    color: #ff6600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
    font-weight: 600;
}

.homepage-form .final-step #toggle-details-link:hover {
    color: #e65c00;
    text-decoration: underline;
}

.homepage-form .final-step .summary-list {
    padding-left: 0;
    margin-bottom: 20px;
}

.homepage-form .final-step .summary-list hr{
   border:0px;
   margin: 20px 0px;
}

.homepage-form .final-step .summary-item {
    margin-bottom: 0px;
    padding: 12px 0;
    border-bottom: 1px dashed #fdd3b5;
    display: flex;
    align-items: center;
}

.homepage-form .final-step .summary-item-no-border{
	border-bottom:0px;
	margin: 0px;
    padding: 12px 0 0;
}

.homepage-form .final-step .summary-item strong {
    display: inline-block;
	min-width: 200px;
    flex-shrink: 0;
}

.homepage-form .final-step .summary-item .summary-icon {
    margin-left: 0;
    margin-right: 6px;
}

.homepage-form .final-step #summary-image{
	width: 120px;
    border-radius: 10px;
    border: 2px #fdd6b9 solid;
}

.homepage-form .final-step #summary-image-container {
    line-height: 1;
}

@media (max-width: 767px) {
    .homepage-form .final-step .summary-item {
        flex-wrap: wrap;
    }
    .homepage-form .final-step .summary-item strong {
        min-width: 0;
        width: 100%;
        margin-bottom: 4px;
    }
    .homepage-form .final-step .summary-item-no-border {
        flex-direction: column;
        align-items: flex-start;
    }
    .homepage-form .final-step #summary-image {
        width: 100px;
        margin-top: 8px;
    }
}

.homepage-form .final-step #editChoicesBtn {
    font-size: 0.95rem;
    padding: 8px 15px;
	width: 100%;
}

.homepage-form .final-step .usp li{
    display: flex;
    margin-bottom: 9px;
    font-weight: 600;
    padding-bottom: 9px;
    border-bottom: 1px dashed #dcdcdc;
}

.homepage-form .final-step .process-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.homepage-form .final-step .process-item .process-item-text {
    flex: 1;
}

.homepage-form .final-step .process-item .process-item-text b {
    font-weight: bold;
	display: block;
}

.homepage-form .final-step .product-feature-list li {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
}

.homepage-form .final-step .product-feature-list .feature-icon {
    margin-right: 19px;
    font-size: 24px;
    padding: 8px;
    border-radius: 100%;
    background-color: #fff;
    border: 2px solid #fdd6b9;
    color: #ff6600;
}

/* CTA blok */
.homepage-form .final-step .cta-block {
    background: #fff;
    border: 2px solid #ff6600;
    box-shadow: 0 4px 24px rgba(255, 102, 0, 0.08);
}

.homepage-form .final-step .cta-block h4 {
    color: #ff6600;
}

.homepage-form .final-step .price-cta-wrapper .price-display {
	font-size: 1.8rem;
    font-weight: 800;
    color: #20a165;
    line-height: 1.1;
}

.homepage-form .final-step .price-cta-wrapper .price-display-discount{
	font-size: 14px;
    margin-bottom: 15px;
    font-style: italic;
}

.homepage-form .final-step .disclaimer{
	font-size:13px;
	font-weight:300;
	color:#999;
}

.homepage-form .final-step .disclaimer a{
	color:#ff6600;
}

.homepage-form .final-step .disclaimer a:hover{
	text-decoration:underline;
}

.homepage-form .payment-wrapper span{
	display: block;
    font-size: 12px;
    font-weight: 300;
	margin: 3px 0px 2px;
}

/* Betaalicoon-tegels (2026-07-29). De PNG's hebben elk een andere interne marge en
   iDEAL/Bancontact dragen een eigen kader; een uniforme tegel trekt dat recht.
   LET OP box-sizing: border-box -> padding gaat VAN de breedte af, dus het merkteken
   is 36 - 10 = 26px. Mobiele variant staat in de max-width:767px-query onderaan:
   daar is bij 7 iconen (BE/PL/PT) maar ~252px beschikbaar en past 36px niet. */
.homepage-form .payment-wrapper img{
	width: 36px;
    margin-right: 6px;
    border-radius: 8px;
    padding: 3px 5px;
    background: #faf8f0;
}

/* REVIEWS */
.homepage-reviews .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px;
	min-height:400px;
	margin-bottom:50px;
}

.homepage-reviews h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 5px;
}
.homepage-reviews h2.seo-text-title {
	margin-bottom: 10px;
}

.homepage-reviews p.info{
	font-weight: 300;
	font-size: 19px;
	margin-bottom: 35px;
}

.homepage-reviews h3{
	font-weight: 800;
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 20px;
}

.homepage-reviews .grid {
    column-count: 4;
    column-gap: 1rem;
}

.homepage-reviews .grid-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 1rem;
}

.homepage-reviews .card{
	border-radius:20px;
	background: #f5f8f6;
    border: 0px;
	padding:10px;
}

.homepage-reviews .card2{
	background: #faf8f0;
}

.homepage-reviews .card3{

}

.homepage-reviews p{
  font-size: 17px;
    font-weight: 400;
    line-height: 28px;
}

.homepage-reviews p.italic{
	font-style: italic;
	white-space:normal;
}

.homepage-reviews .card-title {
    font-size: 16px;
	font-weight: 600;
	margin-bottom:0px;
	color: #ff6600;
}

.homepage-reviews ul{
	list-style-type: none;
	margin:5px 0px;
	padding:0px;
}

.homepage-reviews ul li{
	margin-bottom:22px;
	position: relative;
	padding-left: 35px;
	font-size:17px;
  line-height:28px;
}

.homepage-reviews ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px; /* Breedte van je afbeelding */
  height: 20px; /* Hoogte van je afbeelding */
  background-image: url('/assets/images/list-icon.png');
  background-size: contain; /* Zorgt dat de afbeelding netjes past */
  background-repeat: no-repeat;
}

.homepage-reviews ul li a{
  color:#ff6600;
}

.homepage-reviews .item .card {
	background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%);
	background-color: #e2e9e5;
}

/* Eerste element */
.homepage-reviews .item:nth-child(10n+1) .card {
    background-color: #FFD7BA;
}

/* Tweede element */
.homepage-reviews .item:nth-child(10n+2) .card {
    background-color: #D8E2DC;
}

/* Derde element */
.homepage-reviews .item:nth-child(10n+3) .card {
    background-color: #FCD5CE;
}

/* Vierde element */
.homepage-reviews .item:nth-child(10n+4) .card {
    background-color: #FAE1DD;
}

/* Vijfde element */
.homepage-reviews .item:nth-child(10n+5) .card {
    background-color: #F8EDEB;
}

/* Zesde element */
.homepage-reviews .item:nth-child(10n+6) .card {
    background-color: #e2e9e5;
}

/* Zevende element */
.homepage-reviews .item:nth-child(10n+7) .card {
    background-color: #ECE4DB;
}

/* Achtste element */
.homepage-reviews .item:nth-child(10n+8) .card {
    background-color: #FEC5BB;
}

/* Negende element */
.homepage-reviews .item:nth-child(10n+9) .card {
    background-color: #FEC89A;
}

/* Tiende element */
.homepage-reviews .item:nth-child(10n+10) .card {
    background-color: #E8E8E4;
}

.homepage-reviews .item .hardcover {
	display: block;
    position: relative;
	border-radius: 10px;
	box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
	opacity: 0.95;
	min-height: 80px;
}

.homepage-reviews .item .hardcover::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid #f0e8e0;
	border-top-color: #ff6600;
	border-radius: 50%;
	animation: imageLoader 0.7s linear infinite;
	z-index: 1;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.homepage-reviews .item .hardcover.video-review::before {
	display: none;
}

.homepage-reviews .item .hardcover img {
	width: 100%;
	border-radius: 10px;
	opacity: 0;
	transition: opacity 0.4s ease-in;
}

.homepage-reviews .item .hardcover.loaded::before {
	opacity: 0;
}

.homepage-reviews .item .hardcover.loaded img {
	opacity: 1;
}

.homepage-reviews .item .hardcover video {
	width: 100%;
    border-radius: 10px;
	margin-bottom: -8px;
}

.homepage-reviews .item .cover {
	display: block;
    position: relative;
	border-radius: 5px;
	box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
	transform: perspective(1000px) rotateY(-5deg);
	transition: transform 0.3s ease;
	opacity:0.88;
	left: -3px;
	margin:22px 22px 25px;
}

.homepage-reviews .item .cover img{
	width:100%;
	border-radius: 5px;
	opacity:1;
}

.homepage-reviews .item .cover .border-right {
    position: absolute;
    right: -5px;
    top: 50%;
    height: 98%;
    width: 5px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 5px 5px 0px;
}

.homepage-reviews .item .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.homepage-reviews .item .cover::after {
  content: '';
   position: absolute;
   top: 0;
   left: 10px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 25%), transparent);
}

.homepage-reviews .item:hover .cover{
	opacity:1;
	transform: none;
}

.homepage-reviews .item .material-symbols-outlined{
	font-size:25px;
	color:#ff6600;
}

.homepage-reviews .item .fill{
	font-variation-settings:
	'FILL' 100,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

.homepage-reviews .item hr{
	max-width:25px;
	border-top:1px solid #0000001f;
	opacity:1;
	margin:14px 0px
}

/* REVIEWS PAGE */
.reviews-page {
	padding: 60px 0 20px;
}

.reviews-page h1 {
	font-weight: 800;
	font-size: 38px;
	margin-bottom: 10px;
}

.reviews-page .info {
	font-size: 17px;
	color: #555;
	margin-bottom: 25px;
}

.review-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 25px;
}

.review-stats .stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
  color: #ff6600;
}

.review-stats .stat .material-symbols-outlined {
  font-size: 20px;
	color: #ff6600;
}

.review-stats .stat strong {
	font-weight: 700;
}

.review-filters {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.review-filters .filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 18px;
	border-radius: 25px;
  color: #555;
  background-image: linear-gradient(-180deg, #ffffff, #ffffff36);
  border: 1px solid #c7c7c7;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
  transition: background-color 0.5s ease, color 0.3s ease, border 0.3s ease;
  cursor: pointer;
  outline: none !important;
  margin-bottom: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
}

.review-filters .filter-btn:hover {
	background: #ffe0cc;
	color: #ff6600;
  border: 1px solid #f60;
}

.review-filters .filter-btn.active {
	background: #ff6600;
  background-image: linear-gradient(-180deg, #fd8130, #ff6600);
	color: #fff;
  border: 1px solid #f60;
}

.review-filters .filter-btn .material-symbols-outlined {
	font-size: 18px;
}

.fallback-notice {
	font-size: 14px;
	color: #888;
	margin-bottom: 10px;
}

/* Featured video reviews */
.featured-reviews {
	padding-top: 0;
}

.featured-reviews h2 {
	font-size: 24px;
	margin-bottom: 20px;
}

.featured-videos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 30px;
}

.featured-video-item .card {
	height: 100%;
}

.featured-video-item .hardcover {
	display: block;
	position: relative;
	border-radius: 10px;
	box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.featured-video-item .hardcover video {
	width: 100%;
	border-radius: 10px;
	display: block;
}

.featured-video-item .hardcover img {
	width: 100%;
	border-radius: 10px;
}

/* CTA card in reviews grid */
.homepage-reviews .cta-card {
	background: linear-gradient(135deg, #fff5ee, #ffe8d6) !important;
	text-align: center;
	padding: 25px 15px !important;
}

.homepage-reviews .cta-card .cta-icon {
	font-size: 42px;
	color: #ff6600;
	margin-bottom: 10px;
}

.homepage-reviews .cta-card .card-title {
	font-size: 23px;
	font-weight: 700;
	color: #333;
	margin-bottom: 8px;
}

.homepage-reviews .cta-card .card-text {
	font-size: 17px;
	color: #333;
	font-style: normal;
	margin-bottom: 15px;
	line-height: normal;
}

.homepage-reviews .cta-card .button {
	display: inline-block;
	font-size: 14px;
	padding: 10px 24px;
}

/* View all reviews link */
.view-all-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #ff6600;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
}

.view-all-link:hover {
	text-decoration: underline;
}

.view-all-link .material-symbols-outlined {
	font-size: 20px;
}

/* Social proof counter on homepage */
.review-counter {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	color: #333;
	margin-bottom: 20px;
}

.review-counter .material-symbols-outlined {
	font-size: 22px;
	color: #ff6600;
}

/* Lightbox */
.review-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.review-lightbox .lightbox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
}

.review-lightbox .lightbox-content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	z-index: 1;
}

.review-lightbox .lightbox-close {
	position: absolute;
	top: -40px;
	right: 0;
	background: none;
	border: none;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	padding: 5px 10px;
	line-height: 1;
}

.review-lightbox .lightbox-close:hover {
	opacity: 0.7;
}

.review-lightbox .lightbox-media img,
.review-lightbox .lightbox-media video {
	max-width: 90vw;
	max-height: 85vh;
	border-radius: 12px;
	display: block;
}

/* Responsive: reviews page */
@media only screen and (max-width: 991px) {
	.featured-videos-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 767px) {
	.reviews-page h1 {
		font-size: 28px;
	}

	.review-stats {
		gap: 12px;
	}

	.review-stats .stat {
		font-size: 14px;
	}

	.review-filters .filter-btn {
		padding: 6px 14px;
		font-size: 14px;
	}

	.featured-videos-grid {
		grid-template-columns: 1fr;
	}

}

/* booklook */
.booklook .wrapper{
	background:#d8e2dc38;
	border-radius: 48px;
	padding:50px 30px;
	margin-bottom:50px;
}

.booklook h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 5px;
}

.booklook h3{
	font-size: 18px;
    font-weight: 700;
	margin-bottom: 15px;
	color: #ff6600;
}

.booklook p{
	font-weight: 300;
    font-size: 19px;
	margin-bottom: 25px;
}

.booklook .wrapper .box{
	background: #ffffff9c;
    padding: 30px 30px;
    border-radius: 20px;
}

.booklook ul.usp{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.booklook ul.usp li{
    display: inline-block;
    font-style: italic;
	margin: 0px 0px 12px;
    padding-bottom: 12px;
	font-weight:300;
	border-bottom: 1px dashed #fe660040;
}

.booklook ul.usp li strong{
    font-style: normal;
	font-weight:500;
}

.booklook ul.usp li span.material-symbols-outlined{
	color:#ff6600;
	vertical-align: sub;
}

.booklook .coverwrapper {
    padding-right: 35px;
    padding-bottom: 5px;
    max-width: 260px;
	margin: 0 auto;
}

.booklook .cover {
	display:block;
	position:relative;
	border-radius: 4px;
	opacity:0.85;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
	transform: perspective(1000px) rotateY(-5deg);
	max-width: 240px;
    margin: 5px 0px 20px;
}

.booklook .cover .booktitle{
	text-align: center;
    position: absolute;
    right: 0;
    top: 30px;
    max-width: 215px;
    padding: 0px 15px;
    font-size: 18px;
    color: #512000;
    font-weight: 700;
    text-shadow: 1px 1px #fff;
}

.booklook .cover .border-right {
    position: absolute;
    right: -5px;
    top: 50%;
    height: 98%;
    width: 5px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 3px 3px 0px;
}

.booklook .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 15%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.booklook .cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
    pointer-events: none;
}

.booklook .cover img{
	border-radius: 4px;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top;
}

.booklook .wrapper:hover .cover{
	opacity:1;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 40%);
	transform:none;
}

.booklook .cover-border-right {
    position: absolute;
    top: 0;
	right: -12px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Breedte van de kolom waar de lijn in komt */
}

.booklook .cover-border-right::before {
    content: "";
    position: absolute;
    height: 100%;
    border-left: 2px dashed #000; /* Verticale gestreepte lijn */
    left: 50%; /* Center de lijn binnen het element */
    transform: translateX(-50%);
}

.booklook .cover-border-right span {
    position: relative;
    padding: 2px 5px;
    font-size: 18px;
    z-index: 1;
    transform: rotate(90deg);
    transform-origin: center;
    white-space: nowrap;
    font-weight: 700;
    right: -15px;
}

.booklook .cover-border-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px; /* Hoogte van de balk waar de lijn in komt */
}

.booklook .cover-border-bottom::before {
    content: "";
    position: absolute;
    width: 100%;
    border-top: 2px dashed #000; /* Horizontale gestreepte lijn */
    top: 50%; /* Center de lijn binnen het element */
    transform: translateY(-50%);
}

.booklook .cover-border-bottom span {
    position: relative;
    padding: 2px 5px;
    font-size: 18px;
    z-index: 1;
    font-weight: 700;
    top: 15px;
}

/* USP */
.usp .wrapper {
	background:#f8f0e2;
	border-radius: 48px;
	padding:50px 30px;
	margin-bottom:50px;
}

.usp h2{
	font-size:36px;
	font-weight:800;
	margin-bottom:35px;
}

.usp .usp-box{
	padding:35px 30px 10px;
	border-radius:30px;
	background-color: #faf8f0;
}

.usp .button{
	margin-top:0px;
	margin-bottom:0px;
}

.usp p{
	font-size:18px;
	display: flex;
	line-height: 24px;
    margin-bottom: 25px;
}

.usp b {
    display: contents;
}

.usp span{
	margin-right:10px;
	color:#20a165;
}

/* PAYMENT */
.payment-page {
	margin-top:50px;
}

.payment-page h1{
	font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

.payment-page .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px 30px;
	margin-bottom:50px;
}

.payment-page #loadingMessage{
	clear:both;
}

.payment-page #loadingMessage h4{
	font-weight:700;
}

.payment-page p{
	margin: 0 auto;
	font-size:18px;
}

.payment-page .button{
	 margin: 20px auto 0px;
}

.payment-page .spinner-border{
    border-color: #ff6600;
    border-right-color: transparent;
    width: 50px;
    height: 50px;
    border-width: 6px;
	margin: 45px auto 10px;
}

.payment-page .progress{
	border-radius: 50px;
	background-color: #ffd9bf;
	height: 25px;
	margin-bottom: 20px;
}

.payment-page .progress-bar {
    background-color: #ff6600;
}

.payment-page #progressText{
	font-size: 20px;
    font-weight: 600;
}

.payment-page h1{
	font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

.payment-page .referral-header h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	text-align: center;
}

.payment-page .referral-header p{
	font-size: 20px;
    font-weight: 300;
    max-width: 100%;
    margin-bottom: 1rem;
	text-align: center;
}

.payment-page .box{
    background:#ffd7ba54;
	border-radius: 30px;
    padding: 38px 20px;
}

.payment-page .box span.material-symbols-outlined{
    background: #ffd7ba;
    padding: 20px;
    border-radius: 100%;
    margin-bottom: 20px;
	color: #000000a3;
}

.payment-page .box h3{
    font-weight:700;
	font-size: 23px;
}

.payment-page .box2{
    background:#d8e2dc70;
}

.payment-page .box2 span.material-symbols-outlined{
   background:#d8e2dc;
}

.payment-page .box3{
    background:#fcd5ce5c;
}

.payment-page .box3 span.material-symbols-outlined{
   background:#fcd5ce;
}
/* BOOKS */
.books {
	margin-top:50px;
}

.books h1{
	font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

.books .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:30px;
	margin-bottom:50px;
}

.books .wrapper2 {
    background: #f8f0e2;
	padding: 25px 50px;
    margin-bottom: 20px;
}

.books .notification{
	display: flex;
    color: #ff6600;
    font-weight: 600;
}

.books .notification span{
	margin-right: 8px;
    margin-top: -4px;
    font-size: 30px;
}

.books .new-item {
	margin-bottom: 25px;
    border-radius: 20px;
    padding: 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: calc(100% - 25px);
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px dashed #fbcfad;
	min-height:400px;
}

.books .new-item:hover {
    border: 3px dashed #ff6600;
}

.books .new-item p{
	color: #ff6600;
    font-weight: 700;
    font-size: 20px;
	margin:5px 0px 0px;
}

.books .new-item .material-symbols-outlined{
	color: #ff6600;
    font-size: 44px;
	transition: font-size 0.3s ease;
}

.books .new-item:hover .material-symbols-outlined{
    font-size: 54px;
}

.books .item {
	margin-bottom: 25px;
    border-radius: 20px;
	padding:15px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	background-color: #faf8f0;
}

.books .item .cover {
	display:block;
	position:relative;
	border-radius: 4px;
	opacity:0.95;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
	transform: perspective(1000px) rotateY(-5deg);
	max-width: 240px;
    margin: 5px auto 20px;
}

.books .item .cover .border-right {
    position: absolute;
    right: -5px;
    top: 50%;
    height: 98%;
    width: 5px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 3px 3px 0px;
}

.books .item .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.books .item .cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
    pointer-events: none;
}

.books .item .cover img{
	border-radius: 4px;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top;
}

.books .item:hover .cover{
	opacity:1;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 40%);
	transform:none;
}

.books .item .button{
	font-size: 16px;
    padding: 8px 20px;
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
    box-shadow: none;
    display: flex;
    justify-content: center;
	align-items: center;
    border: 1px solid #f60;
}

/* De rand blijft 1px bij hover. Dat vraagt !important, want .button:hover hierboven zet
   'border: 2px solid #f60 !important'; zonder deze regel springt de knop bij hover een pixel groter. */
.books .item .button:hover{
    border: 1px solid #f60 !important;
    background-image: linear-gradient(-180deg, #ff893b00, #ff66001c);
}

.books .item .button2{
	font-weight:600;
	padding: 7px 20px;
	font-size:15px;
	position: relative;
	background-image: linear-gradient(-180deg, #ff893b00, #ff66000a);
}

.books .item .button span{
	font-size:18px;
	margin-right:8px;
	line-height: 1;
}

.books .item .button2 span.material-symbols-outlined{
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	margin-right: 0;
}

/* Dupliceer/vertaal: "Meer opties"-dropdown in de boekenlijst */
.books .item { overflow: visible; } /* voorkomt dat het uitklapmenu wordt afgekapt */
.books .item .book-more {
	width: 100%;
	margin-bottom: 5px;
}
.books .item .book-more .book-more-toggle {
	width: 100%;
	margin-bottom: 0;
}
.books .item .book-more .book-more-toggle::after {
	display: none; /* eigen more_horiz-icoon i.p.v. Bootstrap-caret */
}
.books .item .book-more .dropdown-menu {
	width: 100%;
	border-radius: 16px;
	border: 1px solid #f0e7df;
	box-shadow: 0 8px 28px rgba(0,0,0,.10);
	padding: 6px;
}
.books .item .book-more .dropdown-item {
	position: relative;
	display: block;
	text-align: center;
	border-radius: 10px;
	padding: 8px 0px 8px 20px;
	font-weight: 600;
	font-size: 15px;
	color: #333;
	white-space: normal;
}
.books .item .book-more .dropdown-item:hover,
.books .item .book-more .dropdown-item:focus {
	background: #fff4ec;
	color: #ff6600;
}
.books .item .book-more .dropdown-item .material-symbols-outlined {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	line-height: 1;
}

/* Dupliceer/vertaal modal */
.dup-modal-intro { font-size: 16px; color: #333; line-height: 1.5; margin-bottom: 16px; }
.dup-modal-note { font-size: 14px; color: #888; margin-top: 10px; margin-bottom: 0; }
.dup-modal-error { margin-top: 12px; color: #fff; background: #dc3545; padding: 20px; border-radius: 20px; font-weight: 600; }
.dup-toggle { position: relative; display: flex; gap: 4px; background: #f0f0f0; border-radius: 100px; padding: 4px; margin-bottom: 16px; }
/* De oranje pil is een apart element dat SCHUIFT, net als de schakelaar in de boekeditor. De opties
   zelf hebben geen achtergrond meer: bij een vervagende vulling loopt de tekstkleur niet gelijk op,
   en zie je even witte tekst op een bijna doorzichtige pil. De stand staat als data-mode op de baan,
   gezet door setMode(); via :has() op de opties herberekent Chrome het ::before niet betrouwbaar. */
.dup-toggle::before { content: ''; position: absolute; z-index: 0; top: 4px; left: 4px; width: calc(50% - 6px); height: calc(100% - 8px); border-radius: 100px; background: #f60; box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px; transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.dup-toggle[data-mode="other"]::before { transform: translateX(calc(100% + 4px)); }
.dup-toggle-opt { position: relative; z-index: 1; flex: 1 1 0; border: none; background: transparent; border-radius: 100px; padding: 9px 12px; font-weight: 600; font-size: 15px; color: #555; cursor: pointer; transition: color .15s ease; white-space: nowrap; }
.dup-toggle-opt.active { color: #fff; }
.dup-toggle-opt:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .dup-toggle::before { transition: none; } }
.dup-trigger { cursor: pointer; }

.books .item h5 {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    min-height: 38px;
}

.books .item .info {
    margin-bottom: 8px;
    border-radius: 100px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 12px 20px;
    background: #4c9bbe;
    display: inline-block;
    color: #fff;
	font-weight:600;
}

.books .item .availability-notice {
	font-size: 12px;
  color: #333;
  opacity:0.35;
	text-align: center;
  margin-top: 9px;
  margin-bottom: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.books .item .availability-notice .material-symbols-outlined {
	font-size: 14px;
}

.books .item .series-badge {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 4px;
  background: #fff;
  color: #ff6600;
	padding: 3px 12px;
	border-radius: 20px;
  font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgb(165 165 165 / 23%);
	z-index: 2;
}

.books .item .series-badge .material-symbols-outlined {
	font-size: 13px;
}

/* ==========================================
   SEQUEL PAGE
   ========================================== */

/* Page H1 Header */
.sequel-page {
	margin-top: 30px;
}

/* Book cover 3D effect (replicates books.php styling) */
.sequel-book-cover {
	display: block;
	position: relative;
	border-radius: 4px;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
	transform: perspective(1000px) rotateY(-5deg);
}

.sequel-book-cover .border-right {
	position: absolute;
	right: -5px;
	top: 50%;
	height: 98%;
	width: 5px;
	background: #fff;
	border-right: 1px solid #00000042;
	transform: translateY(-50%);
	border-radius: 0px 3px 3px 0px;
}

.sequel-book-cover::before {
	content: '';
	position: absolute;
	top: 0;
	left: 5px;
	width: 5px;
	height: 100%;
	background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
	border-radius: 4px 0px 4px;
	z-index: 1;
}

.sequel-book-cover::after {
	content: '';
	position: absolute;
	top: 0;
	left: 10px;
	width: 5px;
	height: 100%;
	background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
	pointer-events: none;
	z-index: 1;
}

.sequel-book-cover img {
	border-radius: 4px;
	width: 100%;
	height: auto;
	display: block;
}

/* ---- Character cards (step 3 read-only) ---- */
.sequel-characters-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.sequel-char-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fcf7f1;
	border: 2px solid #fdd6b9;
	border-radius: 18px;
	padding: 16px 20px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sequel-char-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(255,102,0,0.08);
}

.sequel-char-photo {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sequel-char-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sequel-char-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #fff0e2, #fdd6b9);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sequel-char-placeholder .material-symbols-outlined {
	font-size: 32px;
	color: #ff6600;
}

.sequel-char-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sequel-char-name {
	font-size: 17px;
	font-weight: 700;
	color: #333;
}

.sequel-char-meta {
	font-size: 13px;
	color: #888;
	line-height: 1.4;
}

.sequel-char-role {
	font-size: 11px;
	font-weight: 600;
	color: #ff6600;
	background: #fff;
	padding: 2px 10px;
	border-radius: 12px;
	border: 1px solid #fdd6b9;
	display: inline-block;
	width: fit-content;
}

/* ---- Settings grid (step 4) ---- */
.sequel-settings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.sequel-setting-card {
	background: #fcf7f1;
	border: 2px solid #fdd6b9;
	border-radius: 16px;
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.sequel-setting-card.sequel-setting-small {
	padding: 12px 16px;
}

.sequel-setting-visual {
	width: 80px;
	height: 80px;
	border-radius: 12px;
	overflow: hidden;
	flex-shrink: 0;
	border: 2px solid #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sequel-setting-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sequel-font-preview {
	background: linear-gradient(135deg, #fff0e2, #ffebd6);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	font-weight: 700;
	color: #ff6600;
}

.sequel-setting-icon {
	font-size: 28px;
	color: #ff6600;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #fdd6b9;
}

.sequel-setting-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sequel-setting-label {
	font-size: 12px;
	color: #999;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sequel-setting-info strong {
	font-size: 15px;
	color: #333;
}

/* ---- Setting change buttons ---- */
.sequel-settings-intro {
	font-size: 14px;
	color: #888;
	margin-bottom: 16px;
	line-height: 1.5;
}

.sequel-setting-card {
	position: relative;
	flex-wrap: wrap;
}

.sequel-setting-change-btn {
	background: none;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	color: #ff6600;
	cursor: pointer;
	margin-left: auto;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.sequel-setting-change-btn:hover {
	background: #fff0e2;
	border-color: #ff6600;
}

.sequel-setting-options {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #fdd6b9;
}

.sequel-setting-option {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 2px solid #eee;
	border-radius: 10px;
  padding: 6px 8px 6px 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 13px;
	font-weight: 500;
	color: #555;
}

.sequel-setting-option:hover {
	border-color: #fdd6b9;
	background: #fff8f0;
}

.sequel-setting-option.active {
	border-color: #ff6600;
	background: #fff0e2;
	color: #333;
	font-weight: 600;
}

.sequel-setting-option input[type="radio"] {
	display: none;
}

.sequel-setting-option img {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
}

.sequel-option-font {
	font-size: 24px;
	font-weight: 700;
	color: #ff6600;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff8f0;
	border-radius: 8px;
}

/* ---- Taalkiezer met varianten (sequel) ---- */
.sequel-lang-base-grid {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sequel-lang-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 2px solid #eee;
	border-radius: 10px;
	padding: 6px 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 13px;
	font-weight: 500;
	color: #555;
	font-family: inherit;
	line-height: 1.2;
}

.sequel-lang-pill:hover {
	border-color: #fdd6b9;
	background: #fff8f0;
}

.sequel-lang-pill.active {
	border-color: #ff6600;
	background: #fff0e2;
	color: #333;
	font-weight: 600;
}

.sequel-lang-chevron {
	font-size: 16px;
	line-height: 1;
	opacity: 0.45;
}

.sequel-lang-pill.active .sequel-lang-chevron {
	opacity: 0.85;
}

.sequel-lang-variant-row {
	width: 100%;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px dashed #fdd6b9;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.sequel-lang-variant-title {
	font-size: 11px;
	font-weight: 700;
	color: #ff6600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-right: 2px;
}

.sequel-lang-variant-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sequel-lang-variant-pill {
	background: #fff;
	border: 2px solid #eee;
	border-radius: 10px;
	padding: 5px 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 12.5px;
	font-weight: 500;
	color: #555;
	font-family: inherit;
	line-height: 1.2;
}

.sequel-lang-variant-pill:hover {
	border-color: #fdd6b9;
	background: #fff8f0;
}

.sequel-lang-variant-pill.active {
	border-color: #ff6600;
	background: #fff0e2;
	color: #333;
	font-weight: 600;
}

/* ---- Illustration style grid (expanded options) ---- */
.sequel-style-grid {
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
}

.sequel-style-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 2px solid #eee;
	border-radius: 16px;
	padding: 12px 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
}

.sequel-style-option:hover {
	border-color: #fdd6b9;
	background: #fff8f0;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255,102,0,0.08);
}

.sequel-style-option.active {
	border-color: #ff6600;
	background: #fff0e2;
	box-shadow: 0 2px 8px rgba(255,102,0,0.15);
}

.sequel-style-option input[type="radio"] {
	display: none;
}

.sequel-style-option img {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 10px;
	object-fit: cover;
}

/* Inzoomen op de stijl-thumbnail (zelfde aanpak/zoom als new.php: vaste vierkante box, beeld groter uitgesneden) */
.sequel-style-imgwrap {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}
.sequel-style-imgwrap img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0;
	transform: scale(1.1);
	transform-origin: center 42%;
}

.sequel-style-option span {
	font-size: 12px;
	font-weight: 600;
	color: #555;
	line-height: 1.3;
}

.sequel-style-option.active span {
	color: #333;
}

/* ---- Font choice grid (expanded options) ---- */
.sequel-font-grid {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
}

.sequel-font-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 2px solid #eee;
	border-radius: 16px;
	padding: 16px 10px 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
}

.sequel-font-option:hover {
	border-color: #fdd6b9;
	background: #fff8f0;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255,102,0,0.08);
}

.sequel-font-option.active {
	border-color: #ff6600;
	background: #fff0e2;
	box-shadow: 0 2px 8px rgba(255,102,0,0.15);
}

.sequel-font-option input[type="radio"] {
	display: none;
}

.sequel-font-sample {
  font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	display: block;
}

.sequel-font-name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ---- Product feature list in checkout ---- */
.sequel-checkout .product-feature-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sequel-checkout .process-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 0px 0px 20px;
  border-bottom: 1px dashed #fdd6b9;
}

.sequel-checkout .process-item:last-child {
	border-bottom: none;
  padding: 0px;
}

.sequel-checkout .process-item .feature-icon {
	font-size: 24px;
	color: #ff6600;
	flex-shrink: 0;
	margin-top: 2px;
}

.sequel-checkout .process-item .process-item-text {
	color: #555;
}

.sequel-checkout .process-item .process-item-text b {
	color: #333;
	display: block;
	margin-bottom: 2px;
}

.sequel-checkout .usp {
	margin: 0;
	padding: 0;
}

.sequel-checkout .usp li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #555;
	font-weight: 500;
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
}

.sequel-checkout .usp li:last-child {
	border-bottom: none;
}

.sequel-checkout .usp li .check {
	font-size: 18px;
	color: #4caf50;
}

/* ---- Checkout (step 5) - Hero style ---- */
.sequel-checkout {
	padding-top: 10px;
}

/* Checkout Hero */
.sequel-checkout-hero {
	background: linear-gradient(135deg, #fff8f0 0%, #fff0e2 50%, #ffebd6 100%);
	border: 2px solid #fdd6b9;
	border-radius: 20px;
	padding: 28px;
}

.sequel-checkout-hero-content {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}

.sequel-checkout-cover {
	width: 140px;
	flex-shrink: 0;
	position: relative;
}

.sequel-checkout-cover-badge {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	background: #ff6600;
	color: #fff;
	padding: 3px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(255,102,0,0.3);
}

.sequel-checkout-cover-badge .material-symbols-outlined {
	font-size: 13px;
}

.sequel-checkout-info {
	flex: 1;
}

.sequel-checkout-label {
  font-size: 16px;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.sequel-checkout-title {
  font-size: 28px !important;
	font-weight: 800!important;
  margin-bottom: 10px!important;
}

.sequel-checkout-narrative {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: #ffffff9e;
	border: 1px solid #fdd6b9;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 14px;
}

.sequel-checkout-narrative .material-symbols-outlined {
	font-size: 20px;
  color: #000000a6;
	flex-shrink: 0;
	margin-top: 1px;
}

.sequel-checkout-narrative p {
  font-size: 15px;
  color: #000000a6;
	line-height: 1.5;
	margin: 0;
}

.sequel-checkout-characters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.sequel-checkout-char {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #ffffffd6;
	border: 1px solid #fdd6b9;
	border-radius: 24px;
	padding: 4px 12px 4px 4px;
  font-size: 14px;
	font-weight: 600;
	color: #333;
	line-height: 1.2;
}

.sequel-checkout-char img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.sequel-checkout-char-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(135deg, #fff0e2, #fdd6b9);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sequel-checkout-char-icon .material-symbols-outlined {
	font-size: 16px;
	color: #ff6600;
}

.sequel-checkout-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 0;
}

.sequel-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 1px solid #fdd6b9;
	border-radius: 20px;
	padding: 5px 14px;
  font-size: 13px;
	font-weight: 600;
	color: #ff6600;
}

.sequel-tag-moral {
	background: #f0f7ef;
	border-color: #c3e0bf;
	color: #2e7d32;
}

.sequel-tag-style {
	background: #fff;
	border-color: #fdd6b9;
	color: #555;
}

.sequel-tag-icon {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	object-fit: cover;
}

.sequel-tag-font,
.sequel-tag-age,
.sequel-tag-lang {
	background: #f8f8f8;
	border-color: #e0e0e0;
	color: #555;
}

.sequel-tag-font-icon {
	font-size: 14px;
	color: #888;
}

.sequel-char-age-tag {
  font-size: 12px;
	color: #888;
	font-weight: 400;
	display: block;
	margin-top: 1px;
}

/* Header hero (reuses checkout-hero styling) */
.sequel-header-hero {
	margin-bottom: 24px;
}

/* Hero bottom bar with edit link */
.sequel-checkout-hero-bottom {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed #fdd6b9;
}

/* Edit link in checkout */
.sequel-edit-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
	color: #ff6600;
	cursor: pointer;
}

.sequel-edit-link:hover {
	text-decoration: underline;
}

.sequel-edit-link .material-symbols-outlined {
	font-size: 16px;
}

/* Betaalblok */
.sequel-checkout-pay {
	background: linear-gradient(135deg, #fff8f0 0%, #fff0e2 100%);
	border: 2px solid #fdd6b9;
	border-radius: 20px;
	padding: 32px;
}

.sequel-checkout-pay-inner {
	max-width: 420px;
	margin: 0 auto;
	text-align: center;
}

.sequel-checkout-price {
	font-size: 40px;
	font-weight: 800;
	color: #ff6600;
	margin-bottom: 4px;
}

.sequel-checkout-pay-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 18px;
	padding: 16px 32px;
}

.sequel-checkout-pay-btn .material-symbols-outlined {
	font-size: 20px;
}

.sequel-checkout-discount {
	font-size: 13px;
	color: #888;
	margin-top: 8px;
	margin-bottom: 12px;
}

.sequel-checkout .payment-icons img {
	width: 36px;
	margin-right: 6px;
	border-radius: 8px;
	padding: 3px 5px;
	background: #faf8f0;
}

.sequel-checkout-usps {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 16px;
}

.sequel-checkout-usps span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: #666;
	font-weight: 500;
}

.sequel-checkout-usps .material-symbols-outlined {
	font-size: 16px;
	color: #4caf50;
}

/* Toggle edit characters button */
#toggle-edit-characters {
	margin-top: 12px;
	margin-bottom: 20px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
	.sequel-header-hero {
		border-radius: 16px;
	}

	.sequel-settings-grid {
		grid-template-columns: 1fr;
	}

	.sequel-checkout-hero-content {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.sequel-checkout-cover {
		width: 120px;
	}

	.sequel-checkout-tags,
	.sequel-checkout-characters {
		justify-content: center;
	}

	.sequel-edit-link {
		justify-content: center;
		width: 100%;
	}

	.sequel-checkout-narrative {
		text-align: left;
	}
}

@media (max-width: 576px) {
	.sequel-characters-cards {
		grid-template-columns: 1fr;
	}

	.sequel-checkout-cover {
		width: 100px;
	}

	.sequel-checkout-pay {
		padding: 20px;
	}

	.sequel-checkout-price {
		font-size: 32px;
	}
}

/* BOOK EDIT */
.book-edit {
	margin-top:50px;
}

.book-edit .top-title{
	color: #ff6600;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
    display: block;
}

.book-edit h1{
	font-size: 38px;
    font-weight: 700;
    margin-bottom: 25px;
}

.book-edit h3{
	 font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.book-edit h5{
	font-size: 17px;
    font-weight: 600;
}

.book-edit hr{
	margin: 40px 0px;
    border-top: 2px dashed #eee;
	opacity: 1;
}

.book-edit .custom-radio-block{
	background:#faf8f0;
    padding: 10px;
    padding: 8px 18px;
    border-radius: 20px;
	border: 2px solid #fce9d7;
}

.book-edit .custom-radio-block input{
	display:none;
}

.book-edit span.font{
	font-size: 24px;
    font-weight: 700;
	cursor:pointer;
}

.book-edit .custom-radio-block:has(input[type="radio"]:checked) {
	border-color:#ff6600;
	background: #fcf7f1;
}

.book-edit .custom-radio-block input[type="radio"]:checked + span.font{
	color:#ff6600;
}

.book-edit a.edit-button{
	width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 10px;
	display: flex;
    justify-content: center;
    align-items: center;
}

.book-edit a.edit-button .material-symbols-outlined{
	margin-right:4px;
	font-size:18px;
}

.book-edit .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px;
	margin-bottom:50px;
}

.book-edit .wrapper .edit-button-box{
	background: #ffffffc9;
}

.book-edit img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
	border: 2px solid #fdd6b9;
	    margin-bottom: 5px;
}

.book-edit .page-controls{
    margin-top:-10px;
}

.book-edit .page-controls span {
    font-size: 14px;
    font-weight: 600;
}

.book-edit .page-controls a {
    text-decoration: none;
    color: #f60;
    display: inline-block;
    padding: 2px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.book-edit .page-controls a:hover {

}

.book-edit .page-controls a .material-symbols-outlined {
    vertical-align: middle;
	font-size: 20px;
}

.book-edit .page-controls a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.editImageModal .notify{
	background:#f8f0e2;
	display: flex;
}

.editImageModal .notify p{
	margin:0px;
	color:#333;
}

.editImageModal .notify i{
	color: #ff6600;
    font-style: normal;
}

.editImageModal .notify span {
    margin-right: 10px;
    font-size: 24px;
	   color: #ff6600;
}

.editImageModal .btn-outline-primary{
    border: #ff6600 2px solid;
    color: #ff6600;
    border-radius:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
}

.editImageModal .btn-outline-primary:hover{
  background: #ffffff;
  background-image: linear-gradient(-180deg, #fd813000, #ff66002e);
  border-color: #ff6600;
  color: #ff6600;
}

.editImageModal .btn-outline-primary .material-symbols-outlined{
    font-size:21px;
    margin-right: 5px;
}

.editImageModal .btn-check:checked+.btn{
  background: #fe6c0b;
  background-image: linear-gradient(-180deg, #fd8130, #ff6600);
  border-color: #ff6600;
}

.editImageModal .btn-check:checked+.btn:hover{
  color: #fff;
}

.editImageModal #modalImagePreview{
  border-radius: 20px;
}

.editImageModal p.modalImagePreview-text{
  font-size:12px;
  font-style:italic;
  text-align: center;
}

/* BOOK */
.book {
	margin-top:50px;
}

.book .top-title{
	color: #ff6600;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
    display: block;
}

.book h1{
	font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

.book h2 {
    font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom:10px;
}

.book h4 {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 10px;
}

.book p.top {
    font-weight: 300;
    font-size: 19px;
    margin-bottom: 25px;
}

.book p.top strong{
    font-weight:600;
}

.book ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.book ul li{
	margin: 0px 0px 6px;
    padding-bottom: 6px;
    display: flex;
    border-bottom: 1px dashed #fe660040;
}

.book ul.info li:last-of-type{
    margin-bottom: 0px;
	border:0px;
	padding:0px;
}

.book ul li span.material-symbols-outlined{
   color: #20a165;
    font-weight: 800;
    vertical-align: bottom;
}

.book ul li .first {
    width: 100%;
    max-width: 30%;
	min-width: 120px;
    flex-shrink: 0;
    font-weight: bold;
}

.book .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px;
	margin-bottom:50px;
}

.book .wrapper2{
	padding:25px 50px;
	margin-top:-30px;
}

.book .wrapper3 {
    background: #f8f0e2;
}

.book .wrapper4{
	background: #f8f0e2;
	padding:25px 15px;
}

.book .wrapper5{
	padding:25px 50px;
	margin-bottom:20px;
	background: #f8f0e2;
}

.book .wrapper .box{
	padding: 20px;
    border-radius: 20px;
	margin-bottom:20px;
	background:#faf8f0;
}

.book .options .notification{
	display: flex;
    color: #ff6600;
    font-weight: 600;
}

.book .options .notification span{
	margin-right: 8px;
    margin-top: -4px;
    font-size: 30px;
}

/* de tekst naast het icoon (book.php): niet de icoonmaat van de regel hierboven */
.book .options .notification .mp-melding-tekst{
	margin: 0;
	font-size: inherit;
}

/* "aanpassen" in de melding linkt naar de editor: dunne oranje lijn net onder de tekst. Bij hover
   trekt de lijn zich naar rechts terug en tekent hij zich van links opnieuw (met een achtergrond,
   want een text-decoration kan dat niet). */
.book .options .notification a{
	color: inherit;
	padding-bottom: 2px;
	background: linear-gradient(currentColor, currentColor) right bottom / 100% 1px no-repeat;
}

.book .options .notification a:hover,
.book .options .notification a:focus-visible{
	animation: mp-linklijn 0.6s ease;
}

@keyframes mp-linklijn{
	0%   { background-size: 100% 1px; background-position: right bottom; }
	45%  { background-size: 0 1px;    background-position: right bottom; }
	55%  { background-size: 0 1px;    background-position: left bottom; }
	100% { background-size: 100% 1px; background-position: left bottom; }
}

@media (prefers-reduced-motion: reduce){
	.book .options .notification a:hover,
	.book .options .notification a:focus-visible{ animation: none; }
}

/* koppen Tevreden / Niet tevreden met het boek: 22px; onder 768px blijft .book h4 op 20px */
@media only screen and (min-width: 768px){
	.book .options h4{
		font-size: 22px;
	}
}

.book .options .button{
	font-size: 15px;
	padding: 14px;
	text-align: center;
	box-shadow: none;
	font-weight: 600;
	border-width: 1px;
	display: block;
	position: relative;
	white-space: normal;
	line-height: 1.2;
}

.book .options .button span.material-symbols-outlined{
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 19px;
	line-height: 1;
}

@media only screen and (min-width: 992px) {
	.book .options .col-lg-7 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.book .options .col-lg-7 h4 {
		grid-column: 1 / -1;
		margin-bottom: 4px;
	}

	.book .options .col-lg-7 .button {
		min-width: 0;
		margin-bottom: 0;
	}

	.book .options .col-lg-5 {
		padding-left: 44px;
	}

	.book .options .col-lg-5 .button {
		width: 100%;
		min-width: 0;
		max-width: 380px;
	}
}

.book .options .used-photo{
	width: 100%;
  height: -webkit-fill-available;
  max-height:175px;
    border-radius: 15px;
    object-fit: cover;
	opacity: 0.9;
    margin-bottom: 8px;
	border: 3px solid #fdd6b9;
}

.book .options span.arrow {
    font-size: 70px;
    color: #ff6600cc;
    position: absolute;
    left: 40px;
    height: 110px;
    transform: rotateZ(155deg) scaleX(-1);
}

.book .options .button:hover, .book .options .button:focus{
	border-width: 1px  !important;
}

.book .options2 .used-photo{
	width: 100%;
  height: -webkit-fill-available;
  max-height:175px;
    border-radius: 15px;
    object-fit: cover;
	opacity: 0.9;
    margin-bottom: 8px;
	border: 3px solid #fdd6b9;
}

.book .options2 span.arrow {
    font-size: 70px;
    color: #ff6600cc;
    position: absolute;
    left: 40px;
    height: 110px;
    transform: rotateZ(155deg) scaleX(-1);
}

.book .options2 .button {
    font-size: 15px;
    padding: 10px 22px;
    text-align: center;
}

.book .delete{
    display: inline-block;
}

.book .pdf {
    height: 870px;
    width: 100%;
}

.book .toolbar{
	background-image: none !important;
    background: #33333326;
    border-radius: 20px;
    padding: 10px;
}

.book .toolbar a, .book .toolbar .cmd {
    color: #333;
}

.book .inputwrapper{
	background: #fcf7f1;
    padding: 30px 30px;
    border-radius: 20px;
    border: 2px solid #fdd6b9;
	margin-bottom:20px;
}

.book .inputwrapper h3{
	font-size: 20px;
    font-weight: 700;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #fbcfad;
}

.book .inputwrapper h5 {
    font-size: 18px;
    font-weight: 700;
    color: #ff6600;
}

.book .inputwrapper hr{
    opacity: 1;
    border-top: 1px dashed #fbcfad;
	margin: 15px 0 20px;
}

.book .inputwrapper label{
	font-weight:600;
}

.book .inputwrapper .warning{
    color: #333;
    background: #fdd6b9;
    padding:15px;
    border-radius: 20px;
    margin-bottom: 15px;
	margin-top:-5px;
    font-size: 14px;
    font-weight: 600;
}

.book .inputwrapper ul.usp{
	margin-bottom: 6px;
}

.book .inputwrapper ul.usp li{
	font-size: 15px;
    display: inline-block;
    font-style: italic;
	margin: 0px 0px 8px;
    padding-bottom: 8px;
	font-weight:300;
}

.book .inputwrapper ul.usp li strong{
    font-style: normal;
	font-weight:500;
}

.book .inputwrapper ul.usp li span.material-symbols-outlined{
	font-weight: 300;
    margin-right: 5px;
    font-size: 19px;
    line-height: 24px;
    color: #2e9e3e;
}

.book .inputwrapper .coverwrapper {
    padding-right: 35px;
    padding-bottom: 5px;
    max-width: 260px;
	margin: 0 auto;
}

.book .inputwrapper .cover {
	display:block;
	position:relative;
	border-radius: 4px;
	opacity:0.95;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
	transform: perspective(1000px) rotateY(-5deg);
	max-width: 240px;
    margin: 5px 0px 20px;
}

.book .inputwrapper .cover .border-right {
    position: absolute;
    right: -5px;
    top: 50%;
    height: 98%;
    width: 5px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 3px 3px 0px;
}

.book .inputwrapper .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.book .inputwrapper .cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
    pointer-events: none;
}

.book .inputwrapper .cover img{
	border-radius: 4px;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top;
}

.book .inputwrapper:hover .cover{
	opacity:1;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 40%);
	transform:none;
}

.book .inputwrapper .cover-border-right {
    position: absolute;
    top: 0;
	right: -12px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Breedte van de kolom waar de lijn in komt */
}

.book .inputwrapper .cover-border-right::before {
    content: "";
    position: absolute;
    height: 100%;
    border-left: 2px dashed #000; /* Verticale gestreepte lijn */
    left: 50%; /* Center de lijn binnen het element */
    transform: translateX(-50%);
}

.book .inputwrapper .cover-border-right span {
    position: relative;
    padding: 2px 5px;
    font-size: 18px;
    z-index: 1;
    transform: rotate(90deg);
    transform-origin: center;
    white-space: nowrap;
    font-weight: 700;
    right: -15px;
}

.book .inputwrapper .cover-border-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px; /* Hoogte van de balk waar de lijn in komt */
}

.book .inputwrapper .cover-border-bottom::before {
    content: "";
    position: absolute;
    width: 100%;
    border-top: 2px dashed #000; /* Horizontale gestreepte lijn */
    top: 50%; /* Center de lijn binnen het element */
    transform: translateY(-50%);
}

.book .inputwrapper .cover-border-bottom span {
    position: relative;
    padding: 2px 5px;
    font-size: 18px;
    z-index: 1;
    font-weight: 700;
    top: 15px;
}

.book .inputwrapper .shipping-option{
	background: #fff;
    border-radius: 20px;
    border: 2px solid #fce9d7;
    padding: 15px 45px;
    margin: 5px 0px 10px;
}

.book .inputwrapper .shipping-option label{
	display: block;
    text-transform: lowercase;
    font-weight: 500;
	margin-left: 10px;
	cursor:pointer;
}

.book .inputwrapper .shipping-option label span.time{
	display: block;
    font-weight: 300;
}

.book .inputwrapper .shipping-option label::first-letter, .book .inputwrapper .shipping-option label span.time::first-letter{
    text-transform: uppercase;
}

.book .inputwrapper #showMoreOptions{
	color: #ff6600;
    display: flex;
}

.book .inputwrapper .controlebook label{
	cursor: pointer;
	font-weight: 600;
	color: #222;
}

.book .inputwrapper .controlebook a{
	color: #ff6600;
}

.book .inputwrapper .controlebook {
    padding-left: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.book .inputwrapper .controlebook .form-check-input[type=checkbox]{
    margin-left: 0;
	margin-top: 0;
	border: 2px solid #f60;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.book .inputwrapper .controlebook .form-check-input[type=checkbox]:checked{
	background-color: #f60;
	border-color: #f60;
}

/* Validatie-UX wanneer de gebruiker submit zonder de checkbox aan te vinken.
   Inline foutmelding + pulse op de checkbox zelf (geen lelijke outline om de hele wrapper). */
.book .inputwrapper .controlebook .form-check-input.is-required-error {
	animation: controlebook-pulse 0.7s ease-in-out 2;
}

.book .inputwrapper .controlebook-error-msg {
	display: none;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 12px 16px;
	background: #fff3e0;
	border-radius: 10px;
	border-left: 4px solid #ff6600;
	color: #c44900;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
}

.book .inputwrapper .controlebook-error-msg.is-visible {
	display: flex;
	animation: controlebook-msg-in 0.35s ease-out;
}

.book .inputwrapper .controlebook-error-msg .material-symbols-outlined {
	font-size: 22px;
	color: #ff6600;
	flex-shrink: 0;
}

@keyframes controlebook-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0); }
	50%      { box-shadow: 0 0 0 8px rgba(255, 102, 0, 0.4); }
}

@keyframes controlebook-msg-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.book .inputwrapper .controlebook .form-check-input.is-required-error,
	.book .inputwrapper .controlebook-error-msg.is-visible {
		animation: none;
	}
}

/* Kleurboek upsell v2 — compact upsell, volgt .inputwrapper stijl */
.book .shipping-tip {
	font-size: 13px;
	margin-top: -10px;
	margin-bottom: 10px;
	font-weight: 500;
	white-space: nowrap;
	color: #2e9e3e;
}
.book .shipping-tip .material-symbols-outlined {
	font-size: 18px;
	vertical-align: text-bottom;
	margin-right: 2px;
}

.book .kleurboek-upsell-v2{
	position: relative;
	border: 2px solid #f60;
	background: linear-gradient(135deg, #fff8f0 0%, #fff0e2 50%, #ffebd6 100%);
	transition: background 0.3s ease;
}

.book .kleurboek-upsell-v2.checked{
	background: linear-gradient(135deg, #fff0e2 0%, #ffe4c8 50%, #ffdbb5 100%);
}

.book .kleurboek-upsell-v2 h5{
  font-size: 20px
}

.book .kleurboek-upsell-v2 .upsell-title{
	color: #f60;
}

.book .kleurboek-upsell-v2 .upsell-badge{
	position: absolute;
	top: -1px;
	right: 24px;
	background: #f60;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 4px 16px 5px;
	border-radius: 0 0 8px 8px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Paper stack preview */
.book .kleurboek-upsell-v2 .upsell-images{
  max-width: 130px;
	margin: 0 auto;
	padding-bottom: 6px;
	padding-right: 6px;
}

.book .kleurboek-upsell-v2 .upsell-paper-stack{
	display: block;
	position: relative;
	cursor: pointer;
	margin-bottom: 0;
}

.book .kleurboek-upsell-v2 .upsell-paper-stack::before,
.book .kleurboek-upsell-v2 .upsell-paper-stack::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	border: 1px solid #d5ccc2;
	border-radius: 3px;
}

.book .kleurboek-upsell-v2 .upsell-paper-stack::before{
	transform: rotate(2.5deg) translate(3px, 2px);
	z-index: 0;
}

.book .kleurboek-upsell-v2 .upsell-paper-stack::after{
	transform: rotate(5deg) translate(5px, 4px);
	z-index: -1;
}

.book .kleurboek-upsell-v2 .upsell-paper-stack img{
	width: 100%;
	display: block;
	border-radius: 3px;
	border: 1px solid #d5ccc2;
	position: relative;
	z-index: 1;
	background: #fff;
	transition: transform 0.2s;
}

.book .kleurboek-upsell-v2 .upsell-paper-stack:hover img{
	transform: rotate(-1deg);
}

.book .kleurboek-upsell-v2 .upsell-paper-stack .coloring-preview-spinner{
	aspect-ratio: 0.7;
	background: #f5f0eb;
	border-radius: 3px;
	border: 1px solid #d5ccc2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	padding: 12px;
	position: relative;
	z-index: 1;
}

.book .kleurboek-upsell-v2 .upsell-paper-stack .coloring-preview-spinner small{
	font-size: 11px;
	color: #999;
	line-height: 1.3;
}

/* USPs 2-kolom grid */
.book .kleurboek-upsell-v2 .usp-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin-bottom: 14px;
}

.book .kleurboek-upsell-v2 .usp-grid li{
	padding: 3px 0;
	font-size: 14px;
}

/* Pricing */
.book .kleurboek-upsell-v2 .upsell-pricing{
	display: flex;
	align-items: center;
	gap: 6px;
}

.book .kleurboek-upsell-v2 .upsell-price-original{
	text-decoration: line-through;
	color: #20a165;
	font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}

.book .kleurboek-upsell-v2 .upsell-price-discount{
	font-size: 18px;
	font-weight: 800;
	color: #d32f2f;
	line-height: 1;
}

.book .kleurboek-upsell-v2 .upsell-discount-tag{
	background: #ff6602;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 3px;
	line-height: 1;
	display: inline-block;
	vertical-align: middle;
}

/* Checkbox */
.book .kleurboek-upsell-v2 .upsell-checkbox{
	padding-left: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.book .kleurboek-upsell-v2 .upsell-checkbox .form-check-input{
	margin-left: 0;
	margin-top: 0;
	border: 2px solid #f60;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.book .kleurboek-upsell-v2 .upsell-checkbox .form-check-input:checked{
	background-color: #f60;
	border-color: #f60;
}

.book .kleurboek-upsell-v2 .upsell-checkbox .form-check-label{
	font-weight: 600;
	cursor: pointer;
	color: #222;
}

.book .kleurboek-upsell-v2 .upsell-checkbox .form-check-label s{
	color: #999;
	font-weight: 400;
}

.book .kleurboek-upsell-v2 .upsell-checkbox .form-check-label .upsell-new-price{
	font-weight: 700;
	color: #2e9e3e;
}

.book .kleurboek-upsell-v2 .upsell-specs{
	font-style: italic;
	color: #999;
}

.book .kleurboek-upsell-v2 .upsell-bottom-row{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.book .kleurboek-upsell-v2 .upsell-price-group{
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.book .kleurboek-upsell-v2 .upsell-price-group s{
	color: #999;
	font-weight: 400;
	font-size: 14px;
}

.book .kleurboek-upsell-v2 .upsell-price-group .upsell-new-price{
	font-weight: 700;
	color: #2e9e3e;
	font-size: 16px;
}

/* Audio add-on inline within appearance block */
.book .inputwrapper .audio-addon-inline{
	margin-top: 25px;
	padding-bottom: 10px;
}

.book .inputwrapper .audio-addon-inline .audio-addon-description{
	margin: 2px 0 10px 0;
	font-size: 15px;
	font-weight: 300;
}

.book .inputwrapper .audio-addon-inline .audio-addon-price{
	font-weight: 700;
	color: #2e9e3e;
	font-size: 15px;
	white-space: nowrap;
}

.book .inputwrapper .audio-addon-inline .form-check{
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 0;
}

.book .inputwrapper .audio-addon-inline .form-check-input{
	margin-left: 0;
	margin-top: 0;
	flex-shrink: 0;
	border: 2px solid #f60;
	width: 20px;
	height: 20px;
}

.book .inputwrapper .audio-addon-inline .form-check-input:checked{
	background-color: #f60;
	border-color: #f60;
}

.book .inputwrapper .audio-addon-inline .form-check-label{
	font-weight: 600;
	color: #222;
	cursor: pointer;
}

.ai-review-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	padding: 13px 16px;
	background: #fcede0;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: #5d4037;
}

.ai-review-notice .material-symbols-outlined {
	font-size: 20px;
	color: #e65100;
	flex-shrink: 0;
	margin-top: 1px;
}

.ai-review-notice p {
	margin: 0;
}

.ai-review-notice a {
	color: #e65100;
	font-weight: 600;
	white-space: nowrap;
}

.modal-controle ul{
	margin:0px;
	padding:0px;
	list-style:none;
}

.modal-controle ul li{
	display:flex;
	background: #fce9d7;
    padding: 15px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.modal-controle ul li span{
    margin-right: 12px;
    color: #ff6600;
    font-size: 21px;
    margin-top: 2px;
}

.book .form-footer{
	margin-top: 20px;
}

.book .form-footer .disclaimer{
	font-size:14px;
	font-weight:300;
}

.book .form-footer .disclaimer a{
	color:#ff6600;
}

.book .form-footer .disclaimer a:hover{
	text-decoration:underline;
}

.book .form-footer hr {
    margin: 25px 0px 20px;
    border-top: 1px dashed #ff6600;
}

.book .form-footer ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
	display: flex;
    align-items: center;
    justify-content: space-around;
}

.book .form-footer ul li {
    float: left;
    display: inline-block;
    margin-right: 25px;
    font-size: 15px;
    font-weight: 600;
	margin-bottom: 10px;
	border:0px;
}

.book .price-wrapper{
    max-width: max-content;
    background-image: linear-gradient(-180deg, #ffffff, #d5d5d526);
    border: 1px solid #cfcfcf;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
    border-radius: 100px;
	display: flex;
    align-items: center;
}

.book .price-wrapper .button{
    margin:0px;
}

.book .price-wrapper span.original{
	text-decoration: line-through;
    color: #999;
	font-weight: 600;
    margin-right: 7px;
    font-size: 16px;
    margin-left: 20px;
}

.book .price-wrapper span.final-price{
	font-weight: 800;
    font-size: 21px;
    margin-right: 15px;
    color: #20a165;
}

.book .ebook-discount-explanation{
	font-size: 14px;
    margin-top: 10px;
    font-weight: 500;
}

.book .payment-wrapper{
	display: inline-block;
	vertical-align: middle;
	 float: right;
    text-align: right;
}

.book .payment-wrapper span{
	display: block;
    font-size: 12px;
    font-weight: 300;
	margin: 3px 0px 2px;
}

.book .payment-wrapper img{
	width: 28px;
    margin-right: 9px;
}

.book #priceOriginal{
	text-decoration: line-through;
}

.book #priceDiscounted{
	color: #20a165;
    font-weight: 800;
    font-size: 32px;
    margin: 0px 8px 0px 5px;
}

.book #priceSale{
	background: #f56400;
    padding: 2px 11px;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50px;
    position: absolute;
    margin-top: 14px;
	background-image: linear-gradient(-180deg, #ff893b, #ff6600);
}

.book .shipping{
	margin-bottom:0px;
	font-weight: 300;
    font-size: 15px;
}

.book .referral-code .form-control {
	margin-bottom:0px;
}

.book .referral-code .button{
	font-size: 14px;
    padding: 10px 20px;
    height: 49px;
    margin-top: 5px;
}

.book .referral-code a{
	font-weight: 300;
    font-size: 15px;
	color: #ff6600;
}

.book .referral-code a:hover{
	color: #333;
}

/* CART */
.cart {
	margin:50px 0px;
}

.cart h1 {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

.cart h2 {
    font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom:10px;
}

.cart h3 {
    font-weight: 800;
    font-size: 28px;
	margin-bottom:10px;
}

.cart .wrapper {
	background:#fff;
	border-radius: 30px;
	padding:30px;
	margin-bottom:50px;
}

.cart .wrapper3 {
    background: #f8f0e2;
}

.cart .empty{
	padding:50px 0px 30px;
}

.cart .empty .material-symbols-outlined{
	font-size: 70px;
    border: 4px solid #fdd6b9;
    color: #ff6600;
    border-radius: 100px;
    padding: 25px;
    font-weight: 600;
    margin: 0px auto 35px;
    background: #fcf7f1;
    max-width: 128px;
}

.cart .empty h2{
	color: #333;
    font-size: 24px;
    margin-bottom: 20px;
}

.cart .empty .button{
	padding: 10px 25px;
    font-size: 16px;
}

.cart .summary h3 {
    font-weight: 700;
    font-size: 24px;
	margin-bottom:8px;
}

.cart .summary p {
   margin:0px;
   font-size:14px;
   font-weight:300;
}

/* Iets meer lucht tussen de regels van het besteloverzicht */
.cart .summary .justify-content-between {
    padding: 1px 0;
}

.cart .summary hr {
   margin:15px 0px;
   border-top: 1px dashed #fbcfad;
   opacity:1;
}

.cart .summary .button {
    width:100%;
	text-align:center;
	margin:0px 0px 10px;
}

.cart .summary .payment-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart .summary .payment-wrapper img {
    width: 32px;
    margin-right: 6px;
    border: 1px solid #e3e0d8;
    border-radius: 5px;
    padding: 2px 3px;
}

/* Laatste betaal-icoon: geen rechtermarge zodat de rij netjes centreert */
.homepage-form .payment-wrapper img:last-child,
.sequel-checkout .payment-icons img:last-child,
.cart .summary .payment-wrapper img:last-child,
.book .payment-wrapper img:last-child {
    margin-right: 0;
}

.cart .summary .free-shipping{
	color:#20a165;
}

.cart .inputwrapper{
	background: #fcf7f1;
    padding: 30px 30px;
    border-radius: 20px;
    border: 2px solid #fdd6b9;
	margin-bottom:20px;
}

.cart .inputwrapper h3{
	font-size: 20px;
    font-weight: 700;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #fbcfad;
}

.cart .inputwrapper h5 {
    font-size: 18px;
    font-weight: 700;
    color: #ff6600;
}

.cart .inputwrapper hr{
    opacity: 1;
    border-top: 1px dashed #fbcfad;
	margin: 10px 0 20px;
}

.cart .inputwrapper label{
	font-weight:600;
}

.cart .inputwrapper .warning,
.cart #islandCardNotice {
    color: #333;
    background: #fdd6b9;
    padding: 15px;
    border-radius: 20px;
    margin-bottom: 15px;
    margin-top: -5px;
    font-size: 14px;
    font-weight: 600;
}

/* Meldingen in de winkelwagen volgen één stijl (2026-08-02). De foutmelding stond op
   16px met 20px padding en de waarschuwing op 14px met 15px, waardoor twee meldingen
   onder elkaar niet bij elkaar hoorden. Alleen de kleur onderscheidt ze nu nog.
   Bewust binnen .cart gehouden: de globale .error wordt ook op andere pagina's gebruikt. */
.cart .inputwrapper .error {
    padding: 15px;
    font-size: 14px;
    margin-bottom: 15px;
}

/* De bevestigknop volgt de vorm van .button, dus ook het hover-gedrag. Zonder dit voelt
   een knop die er als knop uitziet toch dood aan. */
.cart .inputwrapper .error #addressConfirmSendBtn {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cart .inputwrapper .error #addressConfirmSendBtn:hover {
    background: #f7e9ea;
    color: #b02a37;
}

/* Op hele smalle schermen past de langste knoptekst (25 tekens in en, en-GB, hu en sl)
   niet op een regel, waardoor de pilvorm in tweeen zou breken. Iets minder ruimte links
   en rechts houdt hem heel. */
@media (max-width: 400px) {
    .cart .inputwrapper .error #addressConfirmSendBtn {
        padding: 10px 16px;
    }
}

/* Alles binnen de melding op dezelfde grootte. Nadruk komt van het gewicht, niet van
   de lettergrootte, anders staan er drie maten in één rood vlak. */
.cart .inputwrapper .error a {
    font-size: inherit;
}

.cart .form-footer .disclaimer {
    font-size: 13px;
    font-weight: 300;
	margin-bottom:0px;
    color: #999;
}

.cart .form-footer .disclaimer a {
    color: #ff6600;
}

.cart .cart-item h5{
	font-size: 18px;
    font-weight: 600;
}

.cart .cart-item p{
	font-size: 16px;
	display: inline;
}

.cart .cart-item-link{
	font-size: 14px;
	color: #ff6600;
	display: inline;
}

/* Hetzelfde pijltje en dezelfde beweging als bij de beoordelingslink op de
   homepage (.cta-pijl in .homepage-top). De pijl staat er ALTIJD, alleen
   onzichtbaar, zodat de regel niet verspringt op het moment dat je hem aanwijst
   en de breedte in elke taal gelijk blijft. Anders dan op de homepage staat hier
   GEEN negatieve rechtermarge: die regel is daar gecentreerd, deze staat links
   uitgelijnd en heeft niets achter zich. De kleur komt van de link zelf via
   currentColor, zodat pijl en tekst nooit uit elkaar kunnen lopen. */
.cart .cart-item-link .cta-pijl {
	display: inline-block;
	margin-left: 5px;
	vertical-align: middle;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.cart .cart-item-link .cta-pijl svg {
	display: block;
	stroke: currentColor;
}
.cart a.cart-item-link:hover .cta-pijl,
.cart a.cart-item-link:focus-visible .cta-pijl {
	opacity: 1;
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.cart .cart-item-link .cta-pijl {
		transition: none;
		transform: none;
	}
}

@media (max-width: 991px) {
	.cart .cart-item-separator{
		display: none;
	}
	.cart .cart-item-link{
		display: block;
		margin-top: 4px;
	}
}

.cart .cart-item hr{
	border-top: 1px dashed #ddd;
	opacity:1;
	margin: 10px 0px;
}

/* Cart options row: Afwerking, Aantal, Voorleesfunctie, Delete */
.cart .cart-options-row{
	display: flex;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}

.cart .cart-option{
	display: flex;
	flex-direction: column;
}

.cart .cart-option .form-label{
	margin-bottom: 4px;
	font-weight: 600;
}

.cart .cart-option select{
	min-width: 110px;
}

.cart .cart-option-audio{
	flex-shrink: 0;
}

.cart .cart-item label.cart-audio-check{
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	height: 50px;
	padding: 0 12px;
	margin: 5px 0 15px;
	border: 2px dashed #fce9d7;
	border-radius: 20px;
	background: #fff;
	font-weight: 400;
}

.cart .cart-audio-check .form-check-input{
	margin: 0;
	flex-shrink: 0;
	border: 2px solid #f60;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.cart .cart-item label.cart-audio-check.checked{
	border: 2px solid #f60;
	border-style: solid;
}

.cart .cart-audio-check .form-check-input:checked{
	background-color: #f60;
	border-color: #f60;
}

.cart .cart-audio-check span{
	font-size: 14px;
	white-space: nowrap;
}

.cart .cart-audio-tooltip{
	display: inline-flex;
	align-items: center;
	vertical-align: text-bottom;
	cursor: help;
	margin-left: 0px;
}

.cart .cart-audio-tooltip .material-symbols-outlined{
	font-size: 18px;
	color: #f60;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.cart .cart-audio-tooltip:hover .material-symbols-outlined{
	opacity: 1;
}

.cart .cart-option-delete{
	margin-left: auto;
	display: flex;
	align-items: center;
	height: 50px;
	margin-bottom: 15px;
}

@media (max-width: 767px) {
	.cart .cart-options-row{
		gap: 12px;
	}
	.cart .cart-option{
		flex: 0 0 calc(50% - 6px);
	}
	.cart .cart-option-audio{
		flex: 1 1 auto;
	}
	.cart .cart-option-delete{
		flex: 0 0 auto;
	}
}

.cart .cart-item label{
	margin:0px;
	font-weight:600
}

.cart .cart-item .card-item {
	display:block;
	position:relative;
	opacity:0.95;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 15%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
	max-width: 120px;
    margin: 0px auto;
	width: 100%;
}

.cart .cart-item:hover .card-item {
	opacity:1;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 30%);
}

.cart .cart-item .cover {
	display:block;
	position:relative;
	border-radius: 4px;
	opacity:0.95;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
	transform: perspective(1000px) rotateY(-5deg);
	max-width: 120px;
    margin: 0px auto;
}

.cart .cart-item .cover .border-right {
    position: absolute;
    right: -3px;
    top: 50%;
    height: 98%;
    width: 3px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 3px 3px 0px;
}

.cart .cart-item .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 3px;
    width: 3px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.cart .cart-item .cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 6px;
    width: 3px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
    pointer-events: none;
}

.cart .cart-item .cover img{
	border-radius: 4px;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top;
}

.cart .cart-item:hover .cover{
	opacity:1;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 40%);
	transform:none;
}

.cart .cart-item .calendar-cover  {
	display: block;
	max-width: 120px;
	margin: 0 auto;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.cart .cart-item .calendar-cover img {
	width: 100%;
	border-radius: 6px;
}

.cart .cart-item-notification h3{
    font-size: 21px;
    font-weight: 700;
    color: #ff6600;
	display: flex;
    justify-content: center;
	align-items: center;
	margin-bottom:8px;
}

.cart .cart-item-notification span{
    margin-right: 10px;
    background-image: linear-gradient(-180deg, #ffffff, #ff66001a);
    border: 2px solid #fdc095;
    border-radius: 100%;
    padding: 6px;
    font-size: 26px;
}

.cart .cart-item-notification .button{
    padding: 8px 30px;
    font-size: 16px;
	margin:0px;
}

/* ================================================================
   VOORDEELBALK: de ladder met drie sporten (2026-08-31)
   1 boek -> 2 boeken = gratis verzending -> 3 boeken = 50% korting.
   Opmaak komt uit mp_cart_voordeelbalk() in includes/lib/cart.php.
   ================================================================ */

/* De regel hierboven (.cart .cart-item-notification span) geeft ELKE span in dit
   blok een rond kadertje met verloop; dat is bedoeld voor het icoontje in de kop.
   De spans in de ladder moeten daar buiten blijven, vandaar deze terugzetter. Hij
   telt drie klassen en wint dus van die regel (ook van de mobiele variant op
   regel ~11610, die margin: 0 auto 5px zet); wat de ladder zelf nodig heeft
   wordt hieronder met vier klassen weer aangezet. */
.cart .cart-item-notification .mp-ladder span {
	margin: 0;
	background-image: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-size: inherit;
}

.cart .cart-item-notification .mp-ladder {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	margin: 0 0 16px;
}

.cart .cart-item-notification .mp-sport {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	position: relative;
	padding: 0 2px;
	min-width: 0;
}

/* De verbindingslijn: elke sport tekent de helft links en de helft rechts van
   zichzelf. Een behaalde sport kleurt zijn linkerhelft, en met is-door ook zijn
   rechterhelft. Is de volgende sport nog niet behaald, dan blijft diens
   linkerhelft zand: samen is dat precies een halve lijn naar de volgende bol. */
.cart .cart-item-notification .mp-sport::before,
.cart .cart-item-notification .mp-sport::after {
	content: "";
	position: absolute;
	top: 13px;
	height: 4px;
	background: #fdc094;
	z-index: 0;
}
.cart .cart-item-notification .mp-sport::before { left: 0; right: 50%; }
.cart .cart-item-notification .mp-sport::after  { left: 50%; right: 0; }
.cart .cart-item-notification .mp-sport:first-child::before,
.cart .cart-item-notification .mp-sport:last-child::after { display: none; }
.cart .cart-item-notification .mp-sport.is-vol::before { background: #ff6600; }
.cart .cart-item-notification .mp-sport.is-vol.is-door::after { background: #ff6600; }

.cart .cart-item-notification .mp-ladder .mp-bol {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 100%;
	border: 2px solid #fdc094;
	background-image: linear-gradient(-180deg, #ffffff, #fae2cd);
}
.cart .cart-item-notification .mp-ladder .mp-bol::after {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 100%;
	background: #ff6602;
}
.cart .cart-item-notification .mp-sport.is-vol .mp-bol {
	border-color: #ff6600;
	background-image: linear-gradient(-180deg, #fd8130, #ff6600);
	box-shadow: rgba(255, 102, 0, 0.25) 0 2px 6px;
}
/* Behaald: het bolletje verdwijnt en het SVG-vinkje uit de opmaak neemt zijn
   plaats in. Geen icoonfont, want dat is tot icons-loaded verborgen. */
.cart .cart-item-notification .mp-sport.is-vol .mp-bol::after { display: none; }

/* NOG NIET BEHAALD: het icoon van de beloning staat in de bol (Ernst, 31-08-2026).
   Material-symbols zijn tot de klasse icons-loaded onzichtbaar, dus het bolletje
   blijft staan tot het icoonfont er is en verdwijnt pas daarna. Laadt de font
   nooit, dan ziet de klant gewoon het bolletje en nooit een leeg rondje of het
   woord local_shipping. */
.cart .cart-item-notification .mp-ladder .mp-bol .material-symbols-outlined {
	font-size: 17px;
	line-height: 1;
	color: #ff6602;
}
.icons-loaded .cart .cart-item-notification .mp-sport .mp-bol::after { display: none; }
.cart .cart-item-notification .mp-ladder .mp-bol svg { width: 15px; height: 15px; display: block; }

/* De labels blijven ook ONbehaald goed leesbaar: het verschil zit in de bol en
   de lijn, niet in tekst die je nauwelijks ziet. */
.cart .cart-item-notification .mp-ladder .mp-aantal,
.cart .cart-item-notification .mp-ladder .mp-beloning {
	display: block;
	color: #333333d6;
	line-height: 1.25;
	max-width: 100%;
}
.cart .cart-item-notification .mp-ladder .mp-aantal {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
/* Geen white-space: nowrap. Dat hield het label op een regel, maar liet het in
   langere talen (bg 'Безплатна доставка') tussen 400 en 480 px uit de kolom
   lopen. Normaal afbreken doet precies wat we willen: een regel waar het past,
   twee waar dat niet kan. */
.cart .cart-item-notification .mp-ladder .mp-beloning {
	font-size: 13px;
	margin-top: -8px;
	font-weight: 400;
}
.cart .cart-item-notification .mp-sport.is-vol .mp-aantal,
.cart .cart-item-notification .mp-sport.is-vol .mp-beloning { color: #ff6600; }
.cart .cart-item-notification .mp-sport.is-vol .mp-beloning { font-weight: 400; }

/* Op een telefoon is de kolom krap: het kader heeft 24 px binnenmarge en de drie
   kolommen houden er dan 91 px over. 'Gratis verzending' heeft er 92 nodig en brak
   daardoor op een 360 px-scherm af. De ladder mag een stuk van die binnenmarge
   terugpakken; dat geeft 102 px en houdt 23 van de 24 talen op een regel. Alleen
   het Bulgaarse label (117 px) breekt af, dat past in geen enkele opzet. */
@media (max-width: 575px) {
	.cart .cart-item-notification .mp-ladder { margin: 0 -12px 16px; }
	.cart .cart-item-notification .mp-sport { padding: 0 1px; }
	.cart .cart-item-notification .mp-ladder .mp-aantal,
	.cart .cart-item-notification .mp-ladder .mp-beloning { font-size: 11.5px; }
}

/* Op een breed scherm is er ruimte voor iets grotere bollen en iconen (Ernst,
   31-08-2026); op een telefoon blijven ze 30 px. De verbindingslijn schuift mee:
   die hoort op het midden van de bol te liggen, dus top = halve bolhoogte min de
   halve lijndikte (34/2 - 4/2 = 15). Vergeet die niet bij een volgende maatwijziging. */
@media (min-width: 576px) {
	.cart .cart-item-notification .mp-ladder .mp-bol { width: 34px; height: 34px; flex: 0 0 34px; }
	.cart .cart-item-notification .mp-ladder .mp-bol::after { width: 10px; height: 10px; }
	.cart .cart-item-notification .mp-ladder .mp-bol svg { width: 17px; height: 17px; }
	.cart .cart-item-notification .mp-ladder .mp-bol .material-symbols-outlined { font-size: 21px; }
	.cart .cart-item-notification .mp-sport::before,
	.cart .cart-item-notification .mp-sport::after { top: 15px; }
}

/* ORDERS */
.orders {
	margin-top:50px;
}

.orders h1{
	font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

.orders h2{
	font-size: 22px;
    font-weight: 700;
}

.orders .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:30px;
	margin-bottom:50px;
}

.orders .card{
	border-radius: 20px;
    border-color: #f8f0e2;
}

.orders .card-header{
	background: #f8f0e2;
    border-color: #f8f0e2;
    border-radius: 20px 20px 0px 0px;
    padding: 10px 20px;
}

.orders .card-header h5{
	font-weight: 700;
	font-size: 18px;
}

.orders .card td, .orders .card .table>:not(caption)>*>*{
	padding: 0px;
	border:0px;
}

.orders .card .title-info{
	width:150px;
}

.orders .card .title-info-long{
	width:220px;
}

.orders .card tr{
	margin-bottom:10px;
	padding-bottom:10px;
	display:block;
	border-bottom:1px dashed #e6dfd3;
}

.orders .card .button{
	font-size: 14px;
    padding: 6px 22px;
    text-align: center;
    box-shadow: none;
    font-weight: 600;
    border-width: 1px;
}

.orders .card .button:hover {
    border-width: 1px !important;
}

/* EXAMPLES */
.examples h1{
	font-size: 38px;
    font-weight: 800;
}

.examples p{
	font-size: 20px;
    font-weight: 300;
}

/* PRICING */
.pricing-top h1{
	font-size: 38px;
    font-weight: 800;
}

.pricing-top p{
	font-size: 20px;
    font-weight: 300;
}

.pricing-top p b{
    font-weight: 700;
}

.pricing-top p.ref {
    background: #d8e2dc99;
    border-radius: 100px;
    padding: 15px 25px;
    font-size: 18px;
    font-weight: 700;
}

.pricing .wrapper {
    background: #fff;
    border-radius: 48px;
    padding: 50px 50px;
    margin-bottom: 50px;
}

.pricing .wrapper .pricing-box {
	border-radius: 30px;
	padding: 25px;
    background-color: #ffd7ba42;
	border: 3px solid #ffd7ba;
}

.pricing .wrapper .pricing-box2{
    background-color:#d8e2dc38;
	border: 3px solid #d8e2dc;
}

.pricing .wrapper .pricing-title {
    font-size: 1.5rem;
	padding:12px 25px;
    margin-bottom: 10px;
    font-weight: bold;
	background: #ffd7ba75;
	border-radius: 20px;
}

.pricing .wrapper .pricing-box2 .pricing-title {
    background: #d8e2dc99;
}

.pricing .wrapper .pricing-price {
    font-size: 2.2rem;
    color: #ff6600;
    margin: 20px 0 15px;
    font-weight: 800;
    border-bottom: 2px dashed #ff660066;
    padding-bottom: 10px;
}

.pricing .wrapper .pricing-price .original {
    text-decoration: line-through;
	color:#333;
	font-weight:600;
	font-size: 18px;
    margin-right: 6px;
}

.pricing .wrapper .pricing-price .percentage {
    background: #f56400;
    padding: 2px 11px;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50px;
    position: absolute;
    margin-top: 18px;
    background-image: linear-gradient(-180deg, #ff893b, #ff6600);
	margin-left: 8px;
}

.pricing .wrapper .pricing-price .save-info{
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.pricing .wrapper .pricing-features {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 20px;
	border-bottom: 2px dashed #ff660066;
	padding: 5px 0px;
}

.pricing .wrapper .pricing-features li {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
	font-weight: 500;
    font-size: 17px;
}

.pricing .wrapper .pricing-arrow {
	font-size: 45px;
    color: #ff6600;
    margin: 30px 0;
    line-height: 65px;
    text-align: center;
    height: 65px;
    width: 65px;
    background: #f8f0e2;
    border-radius: 100%;
    border: 2px solid #ff6600ad;
}

.pricing .wrapper .check{
	color: #20a165;
    margin: 0px 15px 0px 0px;
}

/* PRICING PAGE: Extras Teaser */
.pricing-extras .wrapper {
	background: #f8f0e2;
	border-radius: 48px;
	padding: 50px;
	margin-bottom: 50px;
}
.pricing-extras h2 {
	font-size: 34px;
	font-weight: 800;
	color: #ff6600;
	margin-bottom: 5px;
}
.pricing-extras-intro {
	color: #333;
	font-size: 19px;
	font-weight: 300;
	line-height: 1.6;
	margin-bottom: 30px;
}
.pricing-extras-intro strong {
	font-weight: 600;
}
/* Tile cards – bestaande site-kleuren */
.pricing-extra-tile {
	border-radius: 30px;
	padding: 30px 22px 26px;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 3px solid transparent;
}
.pricing-extra-tile--peach {
	background: #ffd7ba66;
	border-color: #ffd7ba;
}
.pricing-extra-tile--mint {
	background: #d8e2dc66;
	border-color: #d8e2dc;
}
.pricing-extra-tile--lavender {
	background: #fcd5ce66;
	border-color: #fcd5ce;
}
.pricing-extra-tile--sky {
	background: #ece4db66;
	border-color: #ece4db;
}
.pricing-extra-tile-icon {
	margin-bottom: 14px;
}
.pricing-extra-tile-icon img {
	width: 110px;
	height: 110px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
}
.pricing-extra-tile h4, .pricing-extra-tile h3 {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 8px;
	color: #333;
}
.pricing-extra-tile-desc {
	font-size: 16px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 5px;
	flex-grow: 1;
}
.pricing-extra-tile-price {
	font-size: 16px;
	color: #999;
}
.pricing-extra-tile-from {
	font-size: 14px;
	margin-right: 2px;
}
.pricing-extra-original {
	text-decoration: line-through;
	opacity: 0.5;
	font-size: 0.9em;
	margin-right: 3px;
}
.pricing-extra-tile-price strong {
	color: #ff6600;
	font-size: 19px;
}
.pricing-extras-grid {
	text-align: center;
}

@media (max-width: 767px) {
	.pricing-extras .wrapper {
		padding: 35px 20px;
		border-radius: 28px;
	}
	.pricing-extras h2 {
		font-size: 26px;
	}
	.pricing-extras-intro {
		font-size: 18px;
	}
	.pricing-extra-tile {
		padding: 16px 12px 14px;
		border-radius: 20px;
	}
	.pricing-extra-tile-icon img {
		width: 64px;
		height: 64px;
	}
	.pricing-extra-tile h4, .pricing-extra-tile h3 {
		font-size: 14px;
		word-break: break-word;
		hyphens: auto;
	}
	.pricing-extra-tile-desc {
		font-size: 13px;
		line-height: 1.45;
	}
	.pricing-extra-tile-price {
		font-size: 13px;
	}
	.pricing-extra-tile-price strong {
		font-size: 15px;
	}
}

/* IDEAS */
.ideas {
	margin-top:50px;
}

.ideas h1{
	font-size: 38px;
    font-weight: 800;
}

.ideas .top-title {
    color: #ff6600;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
    display: block;
}

.ideas .info{
    font-size: 20px;
    font-weight: 300;
}

.ideas .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:30px;
	margin-bottom:50px;
}

.ideas ul.cats{
	list-style:none;
	margin:0px;
	padding:0px;
}

.ideas ul.cats li{
	float:left;
	margin-right:5px;
}

.ideas ul.cats li a {
  padding: 6px 15px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 5px;
  display: inline-block;
}

.ideas ul.cats li a:hover{
  border-color: #f60 !important;
}

.ideas ul.cats li:nth-child(8n+1) a {
  background-image: linear-gradient(-180deg, #FFDFC8, #F2CCB1);
  border: 1px solid #F2CCB1;
}

.ideas ul.cats li:nth-child(8n+2) a {
  background-image: linear-gradient(-180deg, #E0E8E3, #CDD7D1);
  border: 1px solid #CDD7D1;
}

.ideas ul.cats li:nth-child(8n+3) a {
  background-image: linear-gradient(-180deg, #FDDDD8, #EFCAC4);
  border: 1px solid #EFCAC4;
}

.ideas ul.cats li:nth-child(8n+4) a {
  background-image: linear-gradient(-180deg, #FBE7E4, #EED6D2);
  border: 1px solid #EED6D2;
}

.ideas ul.cats li:nth-child(8n+5) a {
  background-image: linear-gradient(-180deg, #F9F1EF, #ECE1DF);
  border: 1px solid #ECE1DF;
}

.ideas ul.cats li:nth-child(8n+6) a {
  background-image: linear-gradient(-180deg, #FFEAE1, #F2DACE);
  border: 1px solid #F2DACE;
}

.ideas ul.cats li:nth-child(8n+7) a {
  background-image: linear-gradient(-180deg, #F0E9E2, #E0D9D0);
  border: 1px solid #E0D9D0;
}

.ideas ul.cats li:nth-child(8n+8) a {
  background-image: linear-gradient(-180deg, #FED1C9, #F1BBB2);
  border: 1px solid #F1BBB2;
}

.ideas ul.cats li:nth-child(8n+9) a {
  background-image: linear-gradient(-180deg, #FED3AE, #F1BE92);
  border: 1px solid #F1BE92;
}

.ideas ul.cats li:nth-child(8n+10) a {
  background-image: linear-gradient(-180deg, #EDEDE9, #DCDCD9);
  border: 1px solid #DCDCD9;
}

.ideas hr{
	margin: 25px 0px 40px;
    border-top: 1px dashed #fe6500;
}

.ideas .card{
    border: 0px;
    padding:0px;
    border-radius: 20px;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    background-color: #fdfdfd;
    cursor: pointer;
    float: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%);
	padding:17px;
}

.ideas .card h4{
   font-size: 16px;
   margin-top: 15px;
   font-weight: 600;
   line-height: 22px;
   margin-bottom:10px;
}

/* Eerste element */
.ideas .col:nth-child(8n+1) .card {
    background-color: #FFD7BA;
    border-color: #D6B18F; /* Iets donkerder */
}

/* Tweede element */
.ideas .col:nth-child(8n+2) .card {
    background-color: #D8E2DC;
    border-color: #B4BEB8; /* Iets donkerder */
}

/* Derde element */
.ideas .col:nth-child(8n+3) .card {
    background-color: #FCD5CE;
    border-color: #DBB0AD; /* Iets donkerder */
}

/* Vierde element */
.ideas .col:nth-child(8n+4) .card {
    background-color: #FAE1DD;
    border-color: #D6BFB9; /* Iets donkerder */
}

/* Vijfde element */
.ideas .col:nth-child(8n+5) .card {
    background-color: #F8EDEB;
    border-color: #D5C9C7; /* Iets donkerder */
}

/* Zesde element */
.ideas .col:nth-child(8n+6) .card {
    background-color: #FFE5D9;
    border-color: #DCC2B5; /* Iets donkerder */
}

/* Zevende element */
.ideas .col:nth-child(8n+7) .card {
    background-color: #ECE4DB;
    border-color: #C5B8AA; /* Iets donkerder */
}

/* Achtste element */
.ideas .col:nth-child(8n+8) .card {
    background-color: #FEC5BB;
    border-color: #E0A499; /* Iets donkerder */
}

/* Negende element (als er meer dan 8 zijn) */
.ideas .col:nth-child(8n+9) .card {
    background-color: #FEC89A;
    border-color: #D6A17C; /* Iets donkerder */
}

/* Tiende element (als er meer dan 9 zijn) */
.ideas .col:nth-child(8n+10) .card {
    background-color: #E8E8E4;
    border-color: #C2C2BF; /* Iets donkerder */
}

.ideas .card:hover {
    background: #ff66000a;
    background: linear-gradient(180deg, rgb(255 255 255 / 14%) 55%, #0000001f 120%);
}

.ideas .card span{
    font-size: 32px;
}

.ideas .image-container {
    position: relative;
    min-height: 120px;
}

.ideas .image-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid #f0e8e0;
    border-top-color: #ff6600;
    border-radius: 50%;
    animation: imageLoader 0.7s linear infinite;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.ideas .image-container .box-img,
.ideas .image-container h4 {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

.ideas .image-container.loaded::before {
    opacity: 0;
}

.ideas .image-container.loaded .box-img,
.ideas .image-container.loaded h4 {
    opacity: 1;
}

@keyframes imageLoader {
    to { transform: rotate(360deg); }
}

.ideas .cover {
	display: block;
    position: relative;
	border-radius: 5px;
	box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
	transform: perspective(1000px) rotateY(-5deg);
	transition: transform 0.3s ease;
	opacity:0.88;
	left: -3px;
	margin: 25px 25px 0px 25px;
}

.ideas .cover h5 {
	position: absolute;
    top: 23px;
    width: calc(100% - 15px);
    right: 0;
    text-align: center;
	font-size: 13px;
    color: #fff;
    font-weight: 600;
    text-shadow: -1px 0 #00000096, 0 1px #000000e3, 1px 0 #00000096, 0 -1px #00000096;
}
.ideas .cover img{
	width:100%;
	border-radius: 5px;
	opacity:1;
}

.ideas .cover .border-right {
    position: absolute;
    right: -5px;
    top: 50%;
    height: 98%;
    width: 5px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 5px 5px 0px;
}

.ideas .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.ideas .cover::after {
  content: '';
   position: absolute;
   top: 0;
   left: 10px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 25%), transparent);
}

.ideas .cover:hover{
	opacity:1;
	transform: none;
}

/* IDEA */
.idea {
	margin-top:50px;
}

.idea h1{
	font-size: 38px;
    font-weight: 800;
	margin-bottom:25px;
}

.h1-emoji {
    display: inline-block;
    margin-left: 0.25em;
}

.idea h2{
	font-size: 34px;
    margin-bottom: 15px;
	color: #ff6600;
	font-weight:800;
}

.idea h2.others {
    font-size: 34px;
    margin-bottom: 30px;
}

/* How-it-works ("Zo maak je...") kop gecentreerd; alleen theme + name via marker-class .how-centered op de <section>. Idea blijft links. */
.how-centered .wrapper:has(.how) h2 {
    text-align: center;
}

.idea h3{
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
}

.idea p{
    font-size: 17px;
    line-height: 30px;
}

.idea .top-title {
    color: #ff6600;
    font-weight: 600;
    font-size: 18px;
    display: block;
}

.idea .info{
    font-size: 20px;
    font-weight: 300;
}

.idea .wrapper {
	background: #fff;
    border-radius: 48px;
    padding: 50px;
    margin-bottom: 50px;
}

.idea .box-story{
	border: 2px dashed #dcdcdc;
    padding: 20px 35px;
    border-radius: 20px;
	margin: 30px 0px;
}

.idea .box-story p{
	margin:0px;
	font-style:italic;
	font-weight:300;
	font-size: 17px;
}

.idea .box-img{
	background:#e8eeea;
	padding:35px;
	border-radius:20px;
}

.idea .cover {
	display: block;
    position: relative;
	border-radius: 5px;
	box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
	transform: perspective(1000px) rotateY(-5deg);
	transition: transform 0.3s ease;
	opacity:0.88;
	left: -3px;
}

.idea .cover h2 {
	position: absolute;
    top: 35px;
    width: calc(100% - 15px);
    right: 0;
    text-align: center;
    font-size: 35px;
	color: #fff;
    font-weight: 700;
    text-shadow: -1px 0 #00000096, 0 2px #000000e3, 2px 0 #00000096, 0 -1px #00000096;
}
.idea .cover img{
	width:100%;
	border-radius: 5px;
	opacity:1;
}

.idea .cover .border-right {
    position: absolute;
    right: -7px;
    top: 50%;
    height: 98%;
    width: 7px;
    background: #fff;
    border-right: 2px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 5px 5px 0px;
}

.idea .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 7px;
    width: 7px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.idea .cover::after {
  content: '';
   position: absolute;
   top: 0;
   left: 14px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 25%), transparent);
}

.idea .cover:hover{
	opacity:1;
	transform: none;
}

.idea .gender-image{
	max-width: 160px;
    float: right;
    margin-top: -175px;
    margin-right: 15px;
    z-index: 1;
    position: relative;
}

.idea .gender-image img{
	width: 100%;
    border-radius: 20px;
    border: 4px solid #ff6600db;
	box-shadow: #00000080 0px 0px 20px;
}

.idea .arrow{
	font-size: 70px;
    transform: rotateZ(320deg);
    color: #ff6600db;
    float: right;
    margin-top: -73px;
    margin-right: 180px;
    text-shadow: #00000080 0px 0px 15px;
}

.idea .book-list {
    background: #faf8f0;
	border-radius: 20px;
    padding:30px;
	margin-top: 30px;
	margin-bottom: 20px;
}

.idea .book-list h2{
    color:#333;
	margin-bottom: 20px;
	font-size:20px;
}

.idea .book-list ul {
    list-style-type: none;
    margin: 5px 0px;
    padding: 0px;
}

.idea .book-list ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 35px;
    font-size: 17px;
    border-bottom: 1px dashed #ff690666;
    padding-bottom: 10px;
}

.idea .book-list ul li:last-of-type {
    margin-bottom: 0px;
	padding-bottom:0px;
	border:0px;
}

.idea .book-list ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background-image: url(/assets/images/list-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.idea .box-buttons{
	background: #ffd7ba75;
	padding: 15px 35px 7px;
	border-radius:20px;
	margin-top:20px;
}

.idea .box-buttons h5{
	font-size: 20px;
	font-weight: 300;
    margin-bottom: 15px;
}

.idea .box-buttons h5 b{
	font-weight:800;
}

.idea .button {
    font-size: 16px;
    padding: 10px 22px;
    text-align: center;
    box-shadow: none;
    font-weight: 600;
	margin-right:5px;
	width:100%;
}

.idea .box-usp{
	padding: 13px 35px;
    border-radius: 20px;
    border: 1px solid #dcdcdc;
    margin-top: 20px;
}

.idea .box-usp ul{
	list-style:none;
	padding:0px;
	margin:0px;
}

.idea .box-usp ul li{
	color:#333;
	display: flex;
	margin-bottom: 9px;
    font-weight: 500;
    padding-bottom: 9px;
    border-bottom: 1px dashed #dcdcdc;
}

.idea .box-usp ul li:last-of-type{
	margin-bottom:0px;
	border-bottom:0px;
	padding-bottom:0px;
}

.idea .box-usp ul li span{
	margin-right: 13px;
}

.idea .card{
    border: 0px;
    padding: 0px;
    border-radius: 20px;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    background-color: #fdfdfd;
    cursor: pointer;
    float: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%);
    padding: 17px;
}

.idea .card h5{
   font-size: 16px;
}

/* Eerste element */
.idea .col:nth-child(8n+1) .card {
    background-color: #FFD7BA;
    border-color: #D6B18F; /* Iets donkerder */
}

/* Tweede element */
.idea .col:nth-child(8n+2) .card {
    background-color: #D8E2DC;
    border-color: #B4BEB8; /* Iets donkerder */
}

/* Derde element */
.idea .col:nth-child(8n+3) .card {
    background-color: #FCD5CE;
    border-color: #DBB0AD; /* Iets donkerder */
}

/* Vierde element */
.idea .col:nth-child(8n+4) .card {
    background-color: #FAE1DD;
    border-color: #D6BFB9; /* Iets donkerder */
}

/* Vijfde element */
.idea .col:nth-child(8n+5) .card {
    background-color: #ECE4DB;
    border-color: #C5B8AA; /* Iets donkerder */
}

.idea .card:hover {
    background: #ff66000a;
    background: linear-gradient(180deg, rgb(255 255 255 / 14%) 55%, #0000001f 120%);
}

.idea .card span{
    font-size: 32px;
}

.idea .card h4 {
    font-size: 16px;
    margin-top: 15px;
    font-weight: 600;
    line-height: 22px;
    margin-bottom: 10px;
}

.idea .image-container {
    position: relative;
    min-height: 120px;
}

.idea .image-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid #f0e8e0;
    border-top-color: #ff6600;
    border-radius: 50%;
    animation: imageLoader 0.7s linear infinite;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.idea .image-container .box-img,
.idea .image-container .box-img2,
.idea .image-container h4 {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

.idea .image-container.loaded::before {
    opacity: 0;
}

.idea .image-container.loaded .box-img,
.idea .image-container.loaded .box-img2,
.idea .image-container.loaded h4 {
    opacity: 1;
}

.idea .cover2 {
	display: block;
    position: relative;
	border-radius: 5px;
	box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
	transform: perspective(1000px) rotateY(-5deg);
	transition: transform 0.3s ease;
	opacity:0.88;
	left: -3px;
	margin: 25px 25px 0px 25px;
}

.idea .cover2 h5 {
	position: absolute;
    top: 23px;
    width: calc(100% - 15px);
    right: 0;
    text-align: center;
	font-size: 13px;
    color: #fff;
    font-weight: 600;
    text-shadow: -1px 0 #00000096, 0 1px #000000e3, 1px 0 #00000096, 0 -1px #00000096;
}
.idea .cover2 img{
	width:100%;
	border-radius: 5px;
	opacity:1;
}

.idea .cover2 .border-right {
    position: absolute;
    right: -5px;
    top: 50%;
    height: 98%;
    width: 5px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 5px 5px 0px;
}

.idea .cover2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.idea .cover2::after {
  content: '';
   position: absolute;
   top: 0;
   left: 10px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 25%), transparent);
}

.idea .cover2:hover{
	opacity:1;
	transform: none;
}

.idea .how span {
    background: #ff6600;
    background-image: linear-gradient(-180deg, #fd8130, #ff6600);
    border: 2px solid #f60;
    display: flex;
    width: 43px;
    height: 43px;
    text-align: center;
    color: #fff;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    font-weight: 700;
    font-size: 26px;
    flex-shrink: 0;
}

.idea .how img{
	max-width:200px;
}

.idea .how h3 {
    font-size: 18px;
}

.idea .how p {
    font-size: 16px;
}

.idea hr {
    border-top: 1px dashed #ff690666;
    opacity: 1;
    margin: 30px 0px 15px;
}

.idea .how p b{
    font-weight:600;
}

/* --- CARD CREATOR STYLES (voor Bootstrap Grid) --- */
.card-creator-page {
    --primary-color: #f60;
    --primary-color-rgb: 255, 102, 0;
    --light-primary-color: #fff8f0;
    --background-color: #fcfbf8;
    --text-color: #333;
    --border-color: #e0e0e0;
    --border-radius: 16px;
    --box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    --transition-speed: 0.3s;
	margin-top: 40px;
}
.card-creator-page #card-creator-app {
    margin-bottom: 40px;
}

.card-creator-page .top-page h1{
	font-size: 35px;
    font-weight: 800;
  margin-bottom: 20px;
}

.card-creator-page .top-page img{
	height: 90px;
    margin-right: 5px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
}

.card-creator-page .wrapper {
    border-radius: 30px;
    padding: 30px;
    overflow: hidden;
    background: #f8f0e2;
}

.card-creator-page .button-cat{
	border-radius: 100px;
    color: #f60;
    border: 2px solid #f60;
    background: transparent;
    font-weight: 500;
    padding: 5px 16px;
    margin-bottom: 5px;
	transition: background-color 0.5s ease, color 0.3s ease, border 0.3s ease;
}

.card-creator-page .button-cat-active{
	color:#fff;
	background:#f60;
	background-image: linear-gradient(-180deg, #fd8130, #ff6600);
}

.card-creator-page .step h2{
    font-weight: 700;
    text-align: center;
    font-size: 18px;
}

.card-creator-page .step .choice-name{
	display:block;
}

.card-creator-page .step .choice-extra{
	font-style: italic;
    font-weight: 300;
    font-size: 13px;
    display: block;
    margin: 0px 0px 7px;
}

.card-creator-page .step .choice-extra-price{
	display:block;
	font-size: 16px;
    font-weight: 600;
    color: #20a165;
    text-align: center;
	margin: 7px 0px 2px;
}

.card-creator-page .step .choice-extra-size{
	box-shadow: none !important;
    height: 40px !important;
    width: auto !important;
    margin: 5px auto;
}

/* Summary Box */
.card-creator-page #selection-summary {
    background: #f8f0e2;
    border-radius: 30px;
    padding: 20px 20px 15px;
    animation: fadeIn 0.5s;
}
.card-creator-page #summary-image {
    width: 100%;
    height: auto;
    flex-shrink: 0;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.10);
}
.card-creator-page #summary-details h3 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #ffd4b8;
    padding-bottom: 10px;
	font-weight:600;
}
.card-creator-page #summary-list {
    list-style: none;
    padding: 0;
    margin: 0px 0px 10px;
}
.card-creator-page #summary-list li {
    margin-bottom: 5px;
    color: #555;
}
.card-creator-page #summary-list li strong {
    color: #333;
    min-width: 80px;
    display: inline-block;
}

.card-creator-page #summary-actions .button {
    width: 100%;
    text-align: center;
}

.summary-actions-step2{
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-creator-page .button-change-design{
    background-color: transparent;
    color: #f60;
    border: 0px;
    padding: 0px;
    margin: 7px 0px 0px;
    font-size: 14px;
    display: flex;
}

.card-creator-page .button-change-design span{
	font-size: 21px;
    margin-right: 3px;
}

.card-creator-page .summary-actions-step2 .button-change-design{
    margin: 7px 7px 0px;
}

.card-creator-page .button-tool{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
	 padding: 10px;
    font-size: 15px;
}

.card-creator-page .button-tool .material-symbols-outlined{
	font-size:20px;
}

.card-creator-page #generate-ai-text-btn .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: .2em;
}

/* Stappen & Keuzes */

.card-creator-page #step-2-card-preview {
    animation: fadeIn 0.5s;
    background: #fff;
    padding: 35px 35px 15px;
}

.card-creator-page #step-2-preview-image {
    width: 100%;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.12);
}

.card-creator-page .step { display: none; }
.card-creator-page .step.active { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
.card-creator-page .step-header {
    text-align: center;
    margin-bottom: 35px;
}
.card-creator-page .choice-grid input[type="radio"] { display: none; }
.card-creator-page .choice-grid label {
    display: block;
    cursor: pointer;
    position: relative;
    height: 100%;
}

.card-creator-page .choice-grid .choice-content {
    border: 2px solid transparent;
    border-radius: 20px;
    transition: all var(--transition-speed) ease-in-out;
    background-color: #fff;
    overflow: hidden;
    padding: 10px;
    text-align: center;
    height: 100%;
	border: 2px solid #ffd4b8;
}

.card-creator-page .choice-grid .choice-content2{
	border: 2px solid #fff;
	padding: 35px;
	border-radius: 30px;
}

.card-creator-page .choice-grid label:hover .choice-content {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
}
.card-creator-page .choice-grid input[type="radio"]:checked + .choice-content {
    border-color: var(--primary-color);
}
.card-creator-page .choice-grid .choice-content img {
    width: 100%;
    height: auto;
    display: block;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.10);
}
.card-creator-page .choice-grid .choice-name { font-weight: bold; }

.card-creator-page .price-and-nav {
    text-align: center;
    margin-top: 40px;
}
.card-creator-page #go-to-step-3-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    background-image: none;
    border-color: #ccc;
}
.card-creator-page .form-actions {
    text-align: center;
    margin-top: 40px;
}

.card-creator-page .form-actions .button2{
	background-color: #ffffffde !important;
  background-image: linear-gradient(-180deg, #ffffff61, #ff660026);
}

/* Editor & Toolbar */
.card-creator-page #card-editor-canvas-container {
    display: grid;
    place-items: center;
    min-width: 0;
    position: relative;
}

.card-creator-page #card-editor-canvas {
    box-shadow: var(--box-shadow);
}
.card-creator-page .editor-toolbar {
    background: #f8f0e2;
    border-radius: 30px;
    padding: 20px;
	margin-bottom:20px;
}
.card-creator-page .toolbar-tabs {
    display: flex;
    border-bottom: 1px solid #ffd4b8;
    margin-bottom: 20px;
}
.card-creator-page .toolbar-tab {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    font-weight: 600;
}
.card-creator-page .toolbar-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.card-creator-page .toolbar-panel { display: none; }
.card-creator-page .toolbar-panel.active { display: block; animation: fadeIn 0.4s; }

.card-creator-page .tool-section { margin-top: 25px; }
.card-creator-page .tool-section h3 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #ffd4b8;
    padding-bottom: 10px;
	font-weight:600;
}
.card-creator-page .tool-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.card-creator-page .tool-row label {
    flex-shrink: 0;
    width:90px;
    font-size: 0.9em;
}
.card-creator-page .tool-row select,
.card-creator-page .tool-row input {
    height: 40px;
    border-radius: 20px;
    border: 2px solid #ffd4b8;
    line-height: 36px;
    padding: 6px 15px;
	width: 100%;
}
.card-creator-page input[type="range"] { padding: 0; }
.card-creator-page .font-size-value {
    font-weight: bold;
    min-width: 45px;
    text-align: right;
	font-size: 0.9em;
}
.card-creator-page .button-group { display: flex; gap: 5px; }
.card-creator-page .button-group button {
    flex: 1;
    padding: 5px;
    background: #f9f9f9;
    border-radius: 6px;
    cursor: pointer;
    background-color: #fff;
	background-image: linear-gradient(-180deg, #fd813000, #ff66000d);
    border: 2px solid #fce9d7;
    color: #f60;
    width: 36px;
    height: 38px;
}
.card-creator-page .button-group button.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* CSS — toepassen op beide sliders */
#font-size-slider,
#mobile-font-size {
  --percent: 50%;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #f60 0%,
    #f60 var(--percent),
    #fce9d7 var(--percent),
    #fce9d7 100%
  );
  outline: none;
}

/* WebKit / Chrome / Edge thumbs */
#font-size-slider::-webkit-slider-thumb,
#mobile-font-size::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f60;
  margin-top: -2px;
  border: none;
}

/* Firefox track/progress/thumb */
#font-size-slider::-moz-range-track,
#mobile-font-size::-moz-range-track {
  background: #fce9d7;
  height: 10px;
  border-radius: 999px;
}
#font-size-slider::-moz-range-progress,
#mobile-font-size::-moz-range-progress {
  background: #f60;
  height: 10px;
  border-radius: 999px;
}
#font-size-slider::-moz-range-thumb,
#mobile-font-size::-moz-range-thumb {
  background: #f60;
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* accent-color voor browsers die dat gebruiken */
#font-size-slider,
#mobile-font-size {
  accent-color: #f60;
}

.card-creator-page .color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.card-creator-page .color-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.card-creator-page .sticker-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow: hidden;
    overflow-y: scroll;
}
.card-creator-page .sticker-item {
    background: #fff;
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}
.card-creator-page .sticker-item:hover { transform: scale(1.05); }
.card-creator-page .sticker-item img {
    width: 100%;
    height: auto;
}
.card-creator-page .upload-area .button {
    width: 100%;
    text-align: center;
}
.card-creator-page #image-uploader { display: none; }

/* --- CARD CREATOR: MOBIEL-SPECIFIEKE STIJLEN --- */
@media (max-width: 991px) {

  /* Verberg de desktop sidebar op mobiel */
  .card-creator-page #sidebar-step-3 .editor-toolbar {
    display: none;
  }

  /* De zwevende mobiele toolbar */
  #mobile-editor-toolbar {
    position: fixed;
    bottom: -100%; /* Start verborgen */
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
    border-top: 1px solid #e0e0e0;
    transition: bottom 0.3s ease-in-out;
    z-index: 1010;
  }

  #mobile-editor-toolbar.visible {
    bottom: 0; /* Schuif in beeld */
  }

  /* Geklapte staat: basisknoppen */
  #mobile-toolbar-collapsed {
    display: flex;
    justify-content: space-around;
    padding: 12px 5px 14px;
    transition: opacity 0.3s, visibility 0.3s;
  }

  #mobile-toolbar-collapsed button {
    background: #fff5ed;
    border: none;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 10px;
    position: relative;
    transition: background 0.2s;
  }

  #mobile-toolbar-collapsed button .material-symbols-outlined {
    font-size: 22px;
  }

  /* Pulsing indicator op Teksten knop */
  #mobile-toolbar-collapsed button[data-panel="panel-adjust"]::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #ff6b35;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    right: 4px;
    animation: pulse-dot 2s infinite;
  }
  #mobile-toolbar-collapsed button[data-panel="panel-adjust"].seen::after {
    display: none;
  }
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
  }

  /* Uitgeklapte staat: contextuele opties */
  #mobile-toolbar-expanded {
    display: none; /* Standaard verborgen */
    align-items: center;
    justify-content: space-evenly;
    padding: 10px;
    gap: 10px;
    border-top: 1px solid #eee;
  }

  #mobile-toolbar-expanded .button-tool {
      padding: 8px 15px;
      font-size: 15px;
  }
  #mobile-toolbar-expanded select {
      flex-grow: 1;
  }

  /* Toon/verberg de juiste staat */
  #mobile-editor-toolbar.expanded #mobile-toolbar-collapsed {
    display: none;
  }
  #mobile-editor-toolbar.expanded #mobile-toolbar-expanded {
    display: flex;
  }

	/* Card Creator Mobile Toolbar Aanpassingen */
	#mobile-editor-toolbar.expanded #mobile-toolbar-collapsed {
		display: none;
	}

	#mobile-editor-toolbar.expanded #mobile-toolbar-expanded {
		display: block; /* Of flex, afhankelijk van de layout */
		padding: 10px;
	}

	#mobile-toolbar-expanded .mobile-text-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		justify-content: center;
	}

	#mobile-toolbar-expanded select {
		flex: 1 1 100px;
		height: 35px;
		border-radius: 20px;
        border: 2px solid #fce9d7;
		padding: 0 10px;
	}

	#mobile-toolbar-expanded .button-group {
		display: flex;
		gap: 5px;
	}

	#mobile-toolbar-expanded .color-palette {
		display: flex;
		gap: 8px;
		justify-content: center;
		flex-basis: 100%;
	}

	#mobile-toolbar-expanded .color-dot {
		width: 25px;
		height: 25px;
		border-radius: 50%;
	}

	#mobile-toolbar-expanded .button-tool {
		padding: 8px 12px;
		font-size: 14px;
	}

  /* Container voor de panelen die openen (als overlay) */
  #mobile-tool-panels-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1020;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  #mobile-tool-panels-container.visible {
    opacity: 1;
    visibility: visible;
  }

  #mobile-tool-panels .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 5px 15px 5px;
      margin-bottom: 15px;
      border-bottom: 1px solid #e0e0e0;
  }

  #mobile-tool-panels .panel-header #mobile-panel-title {
      font-weight: 700;
      font-size: 18px;
      color: #333;
  }

  #mobile-tool-panels .panel-header #close-mobile-panel-btn {
      background: none;
      border: none;
      color: var(--primary-color);
  }

  #mobile-tool-panels-container #mobile-tool-panels {
    background-color: #faf8f0;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
  }

  #mobile-tool-panels-container.visible #mobile-tool-panels {
    transform: translateY(0);
  }

  .mobile-toolbar-close-btn{
	padding: 0px;
    margin: 0px;
    border: 0px;
    position: absolute;
    top: -32px;
    right: 15px;
    color: #fff;
    background: #ff6600db;
    height: 28px;
    width: 28px;
    display: flex;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
  }

  /* Zorg dat de canvas container niet te breed wordt op kleine schermen */
  .card-creator-page #card-editor-canvas-container {
    padding: 0 5px;
  }

  /* Canvas touch overlay — laat verticaal scrollen door */
  #canvas-touch-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 10;
    touch-action: pan-y;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.2s;
  }
  #canvas-touch-overlay .material-symbols-outlined {
    font-size: 32px;
  }
  #canvas-touch-overlay.hidden {
    opacity: 0;
    pointer-events: none;
  }
}

/* AI Text Modal (mobiel) */
#ai-text-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    padding: 20px;
}
#ai-text-modal.visible {
    opacity: 1;
    visibility: visible;
}
.ai-text-modal-content {
    background: #faf8f0;
    border-radius: 20px;
    max-width: 400px;
    width: 100%;
    padding: 30px 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.3s ease-out;
}
.ai-text-modal-content h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    margin-bottom: 6px;
    color: var(--primary-color);
}
.ai-modal-subtitle {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}
.ai-modal-form .tool-row {
    margin-bottom: 12px;
}
.ai-modal-form label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}
.ai-modal-form input[type="text"] {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #fce9d7;
    border-radius: 10px;
    font-size: 15px;
    background: #fff;
}
.ai-modal-form input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
}
.ai-modal-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #999;
    font-size: 13px;
}
.ai-modal-divider::before,
.ai-modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ddd;
}
.ai-modal-divider span {
    padding: 0 12px;
}
.ai-text-modal-content #modal-add-text-manually-btn {
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.ai-text-modal-content #modal-add-text-manually-btn .material-symbols-outlined {
    font-size: 20px;
}
.ai-modal-skip {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: #999;
    font-size: 13px;
    text-decoration: underline;
}

/* Toast notificatie (card editor) */
#card-editor-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    z-index: 3000;
    pointer-events: none;
    white-space: nowrap;
}
#card-editor-toast.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* BLOG */
.blog{
	margin:50px auto;
}

.blog h1{
	font-size: 38px;
    font-weight: 800;
}

.blog h4{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
    margin-bottom: 30px;
}

.blog .info{
    font-size: 20px;
    font-weight: 300;
}

.blog .card {
    border:0px;
	border-radius: 28px;
	padding-bottom:15px;
	overflow:hidden;
}

.blog .card h5{
   font-weight: 800;
   font-size: 24px;
   margin: 10px 0px;
}

.blog .card p {
    font-size: 17px;
    line-height: 30px;
}

.blog .card .read-more{
   font-weight: 700;
   color: #ff6600;
   display:flex;
}

.blog .card .read-more span{
   margin-left:5px;
}

.blog .card img{
  transition: transform 700ms cubic-bezier(0.2, 0.6, 0.6, 1);
  height: 300px;
  object-fit: cover;
}

.blog .card:hover img{
    transform: scale(1.05);
}

.blog .card:hover h5{
   color: #ff6600;
}

/* BLOG ITEM*/
.blog-item{
	margin-top:50px;
}

.blog-item h1{
	font-size: 38px;
    font-weight: 800;
	 margin-bottom: 25px;
}

.blog-item h5{
	font-weight:700;
	font-size:18px;
}

.blog-item .date{
	font-size: 16px;
    margin-bottom: 30px;
}

.blog-item img.featured{
	border-radius:28px;
	max-height:500px;
	width:100%;
	object-fit:cover;
}

.blog-item .wrapper{
	background:#fff;
	border-radius: 28px;
	padding:30px;
	margin-bottom:50px;
}

.blog-item .wrapper h2{
    font-weight: 800;
    color: #ff6600;
    font-size: 28px;
    margin-bottom: 15px;
    margin-top: 50px;
}

.blog-item .wrapper h3{
	font-weight: 800;
    font-size: 20px;
    margin-bottom: 6px;
    margin-top: 20px;
}

.blog-item .wrapper h4{
	font-weight: 800;
    font-size: 18px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.blog-item .wrapper p{
    font-size: 17px;
    line-height: 30px;
}

.blog-item .wrapper p a{
    color: #ff6600;
}

.blog-item .wrapper ul, .blog-item .wrapper ol{
    padding:0px 20px;
}

.blog-item .wrapper ul li, .blog-item .wrapper ol li{
    font-size: 17px;
    line-height: 30px;
	margin-bottom:15px;
}

.blog-item .sticky-top{
	top: 80px;
    margin-bottom: 50px;
}

.blog-item .table-of-contents ul{
	padding: 0px;
    margin: 0px;
    list-style: none;
}

.blog-item .table-of-contents ul li{
	font-size:15px;
	margin-bottom:1px;
}

.blog-item .table-of-contents ul li:first-of-type{
	margin-top: 0px !important;
}

.blog-item .table-of-contents ul li.toc-level-2{
	margin-top: 15px;
}

.blog-item .table-of-contents ul li.toc-level-3{
	font-weight:300;
}

/* Coloring books*/
.coloring-books{
	margin-top:35px;
}

.coloring-books h1{
	font-size: 35px;
    font-weight: 800;
	display: flex;
    align-items: center;
    justify-content: center;
}

.coloring-books h1 img {
    height: 100px;
    margin-right: 15px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
}

.coloring-books h1 i{
	font-style:normal;
    color: #ff6600;
}

.coloring-books .info{
    font-size: 20px;
    font-weight: 300;
    margin: 0 auto 1rem;
}

.coloring-books .info b{
    font-weight: 500;
}

.coloring-books .wrapper {
	background:#fff;
	border-radius: 30px;
	padding: 30px 40px 20px;
	overflow: hidden;
	position: relative;
}

.coloring-books .cb-new-badge{
	position: absolute;
	top: 14px;
	left: 14px;
	background: #28a745;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	z-index: 2;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.coloring-books .ronde-sticker {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-image: linear-gradient(-180deg, #fd8130, #ff6600);
  border: 3px dashed #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transform: rotate(-10deg); /* De lichte rotatie */
  margin-bottom: -40px;
  margin-top: -80px;
  z-index: 2;
  position: relative;
}

.coloring-books .ronde-sticker p {
  line-height: 1.5;
  font-size: 15px;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-weight: 800;
}

.coloring-books .cover-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 380px;
	margin: 0 auto 25px;
	min-height: 200px;
}

.coloring-books .cover-placeholder-text {
	font-size: 14px;
	color: #9b8e7e;
	text-align: center;
	padding: 0 20px;
	margin: 0;
	font-style: italic;
}

.coloring-books .cover {
	display: block;
    position: relative;
	border-radius: 5px;
	box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
	transform: perspective(1000px) rotateY(-5deg);
	transition: transform 0.3s ease;
	opacity:0.96;
	left: -3px;
	max-width: 380px;
    margin: 0 auto 25px;
}

.coloring-books .cover img{
	width:100%;
	border-radius: 5px;
	opacity:1;
}

.coloring-books .cover .border-right {
    position: absolute;
    right: -6px;
    top: 50%;
    height: 98%;
    width: 6px;
    background: #fff;
    border-right: 2px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 5px 5px 0px;
}

.coloring-books .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.coloring-books .cover::after {
  content: '';
   position: absolute;
   top: 0;
   left: 9px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 25%), transparent);
}

.coloring-books .cover:hover{
	opacity:1;
	transform: none;
}

.coloring-books h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
}

.coloring-books p {
	font-size: 14px;
}

.coloring-books .intro {
	font-size: 1.05rem;
	color: #666;
	margin-bottom: 10px;
}

.coloring-books  hr{
    margin: 0px 0px 15px;
    border-top: 1px dashed #ff6600;
}

.coloring-books .price {
	font-size: 16px;
    font-weight: 600;
    color: #20a165;
    text-align: center;
	margin-bottom:7px;
}

.coloring-books .button2{
	background-color: #ffffffde !important;
    background-image: linear-gradient(-180deg, #ffffff61, #ff660026);
}

.coloring-books .btn-add-to-cart{
	padding:8px;
}

.coloring-books .product-details ul {
	list-style: none;
	padding-left: 0;
	margin:0px;
}

.coloring-books .product-details ul li {
	display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 16px;
}

.coloring-books .product-details ul .material-symbols-outlined {
	color: #f60;
    font-size: 24px;
    width: 26px;
    text-align: center;
}

.coloring-books .product-details a{
	color: #f60;
	font-weight:600;
}

.coloring-books .spinner-border{
	color: #f60;
}

/* Algemene stijl voor pijlen */
:root {
	--swiper-navigation-color: #000;
	--swiper-navigation-size: 30px;
}

.coloring-books  .swiper-button-next, .swiper-button-prev {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.coloring-books  .swiper-button-next:after, .swiper-button-prev:after {
    font-size: 18px !important;
    font-weight: bold;
}

/* Oplossing: positionering van de container */
.coloring-books  .main-book-slider, .product-info .swiper {
   position: relative;
}

/* Oplossing: afbeeldingshoogte */
.coloring-books  .swiper-slide .wrapper .cover {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.coloring-books  .swiper-slide .wrapper .cover img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* Zorgt dat de hele afbeelding zichtbaar is */
}

.coloring-books  .product-info .swiper {
    height: 80px; /* Vaste, kleine hoogte voor thumbnail slider */
}

.coloring-books  .product-info .swiper-slide {
    height: 100%;
    max-width: 42px;
    margin-right: 15px;
}

.coloring-books  .product-info .swiper-slide img {
   width: 100%;
   object-fit: cover; /* Zorgt dat thumbnails de slide vullen */
}

 /* Oplossing: Verberg inactieve pijlen */
.coloring-books  .swiper-button-disabled {
   display: none !important;
}

/* --- CSS VOOR SLIDER --- */
.coloring-books  .swiper-container { margin-top: 1rem; }
.coloring-books  .swiper-slide { cursor: grab; height: auto; text-align: center; }
.coloring-books  .swiper-slide:active { cursor: grabbing; }
.coloring-books  .swiper-slide img { display: block; width: 100%; height: auto; max-height: 90px; object-fit: contain; border-radius: 5px; border: 1px solid #ddd; }

/* --- CSS VOOR FANCYBOX --- */
.fancybox__backdrop {
    background: rgba(24, 26, 27, 0.7);
}

/* PAGE */
.page {
	margin-top:50px;
}

.page h1{
	font-size: 38px;
    font-weight: 800;
}

.page h2{
	font-size: 22px;
    font-weight: 700;
    margin: 40px 0px 10px;
}

.page h3{
	font-size: 18px;
    font-weight: 600;
}

.page hr {
    border-top: 1px dashed #fe6500;
}

.page .info{
    font-size: 20px;
    font-weight: 300;
}

.page a{
	color: #ff6600;
}

/* Knoppen binnen een .page-sectie: .page a (hierboven) won qua specificiteit van
   .button en maakte de knoptekst oranje-op-oranje (gemeld door Ernst 2026-07-21,
   referral-knop op de review-bedankpagina; gold voor elke a.button in een .page).
   De :hover-kleur blijft werken via de !important in .button:hover. */
.page a.button {
	color: #fff;
}
/* Outline-varianten dragen OOK de .button-class en hebben een transparante
   achtergrond; die moeten hun eigen tekstkleur houden (audit 2026-07-21). */
.page a.button.button2 {
	color: #f60;
}
.page a.button.button3 {
	color: #dc3545;
}

.page .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:30px;
	margin-bottom:50px;
}

.page .inputwrapper{
	background: #fcf7f1;
    padding: 30px 30px;
    border-radius: 20px;
    border: 2px solid #fdd6b9;
	margin-bottom:20px;
}

.page .inputwrapper label{
	font-weight:600;
}

.page .inputwrapper h4{
	font-weight: 700;
    font-size: 20px;
    margin-bottom: 20px;
}

.page .inputwrapper hr {
    margin: 30px 0px;
}

.page .button3 {
	font-size: 14px;
    padding: 6px 25px;
}

/* CONTACT */
.contact .answer{

}

.contact .answer p{
	font-size: 17px;
    line-height: 30px;
}

.contact .answer .button{
	color:#fff;
	font-size: 17px;
    padding: 8px 24px;
	margin-right: 5px;
}

.contact .answer .button2{
	color: #f60;
}

/* Landing TOP */
.theme-top{
	padding: 0px;
	padding-top: 75px;

}

.theme-top h1{
	font-size: 48px;
    font-weight: 800;
    max-width: 655px;
	opacity: 0;
    animation: fadeIn 1s ease-out forwards;
    animation-delay: 0.15s; /* Iets later laten starten voor een subtiele vertraging */
}

.theme-top p{
	font-size: 21px;
	font-weight:300;
    max-width: 570px;
	opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease-out forwards;
    animation-delay: 0.3s; /* Kortere vertraging zodat het sneller na de h1 komt */
    margin-bottom: 20px;
}

.theme-top .button {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
    animation-delay: 0.4s; /* Sneller na de p laten komen */
	display:block;
	width:100%;
	max-width:330px;
	text-align:center;
    padding: 12px 15px;
}

.theme-top img {
    max-height: 350px;
	max-width: 100%;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
}

.theme-top .hero-mobile-img {
    max-width: 34%;
    height: auto;
}

.theme-content .wrapper {
    padding: 50px;
}

.theme-content h2{
	font-size: 34px;
	font-weight: 800;
	color: #ff6600;
	margin: 0px 0px 15px;
}

.theme-content p{
    font-size: 17px;
    line-height: 30px;
}

.theme-content .expandable-content .main-text-content {
    overflow: hidden;
    position: relative;
    line-height: 1.6em;
    max-height: 32em;
    transition: max-height 0.6s ease-in-out;
    margin-bottom: 0px;
}

.theme-content .expandable-content .main-text-content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.2em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%); /* #faf8f0 */
    pointer-events: none;
    transition: opacity 0.6s ease-in-out;
}

.theme-content .expandable-content.expanded .main-text-content {
    max-height: 200em;
}

.theme-content .expandable-content.expanded .main-text-content::after {
    opacity: 0;
}

.theme-content .read-more-link {
    display: inline-flex;
    align-items: center;
    color: #ff6600;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    margin-top: 5px;
}

.theme-content .read-more-link .link-text {
    margin-right: 4px;
}

.theme-content .read-more-link .read-more-icon {
    font-size: 20px;
}

.theme-content .read-more-link:hover {
    color: #e65c00;
}

/* Nieuwe 5-blok content (AI-geoptimaliseerde thema-pagina's) */
.theme-content .theme-content-blocks .theme-content-block h3 {
    font-weight: 800;
}

.theme-content .theme-content-blocks .theme-content-body {
    font-size: 17px;
    line-height: 30px;
}

.theme-content .theme-content-blocks .theme-content-body a {
    color: #ff6600;
    text-decoration: underline;
}

.theme-content .theme-content-blocks .theme-content-body a:hover {
    color: #e65c00;
}

/* Voorbeeldverhaal-blok (gestileerd citaat onder de 5 content-blokken) */
.theme-content .theme-story-snippet {
    background: #fff4e6;
    border-left: 4px solid #ff6b1a;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2.5rem;
}

.theme-content .theme-story-snippet .theme-story-snippet-heading {
    color: #ff6600;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 14px;
}

.theme-content .theme-story-snippet .theme-story-snippet-text {
    font-style: italic;
    line-height: 30px;
    font-size: 17px;
    color: #3a2614;
}

/* THEME overview */
.theme-overview .wrapper {
	background:#e8eeea;
	border-radius: 48px;
	padding:50px 10px;
	margin-bottom:50px;
}

.theme-overview h2{
	font-size:36px;
	font-weight:800;
	margin-bottom:35px;
}

.theme-overview ul a{
    padding: 7px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
    display: inline-block;
    background-image: linear-gradient(-180deg, #ffffff, #ffffff36);
    border: 1px solid #c7c7c7;
	transition: background-color 0.5s ease, color 0.3s ease, border 0.3s ease;
}

/* NAMES overview (overrides) */
.names-overview .wrapper {
	background: #f4e7e1;
}

.theme-overview ul a:hover{
    background-image: linear-gradient(-180deg, #ffffff, #00000005);
    border: 1px solid #f60;
}

.theme-overview ul a img {
    height: 24px;
    margin-right: 3px;
}

.theme-overview .fade-in {
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.theme-overview .category-section {
    text-align: left;
    margin-top: 30px;
    margin-bottom: 20px;
}
.theme-overview .category-section h4, .theme-overview .category-section h3 {
    font-weight: bold;
    margin-bottom: 15px;
    color: #33333396;
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}
.theme-overview .show-more-trigger {
  background-color: #f60;
  background-image: linear-gradient(-180deg, #fd8130, #ff6600);
  color: #fff;
  cursor:pointer;
}

.theme-overview .show-less-container {
    padding: 7px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
    margin-top: 15px;
    display: inline-block;
    border: 1px solid #c7c7c7;
    transition: background-color 0.5s ease, color 0.3s ease, border 0.3s ease;
    background-color: #f60;
    background-image: linear-gradient(-180deg, #fd8130, #ff6600);
    color: #fff;
    cursor:pointer;
}

.theme-overview .show-more-trigger:hover, .theme-overview .show-less-container:hover {
  background-image:none;
}

/* Features */
.features-page h2{
	font-weight: 700;
    font-size: 26px;
	margin:0px 0px 0.5rem;
	justify-content: flex-start;
    align-items: center;
	display:flex;
}

.features-page p {
    font-size: 18px;
    font-weight: 300;
	margin-bottom:0px
}

.features-page a{
    display: flex;
	align-items: center;
}

.features-page a span{
	margin-left:5px;
	font-size:20px;
}

.features-page .feature-icon{
    background: #ff6600;
    background-image: linear-gradient(-180deg, #fd8130, #ff6600);
    border: 2px solid #f60;
    width: 43px;
    height: 43px;
    text-align: center;
    display: flex;
    color: #fff;
    border-radius: 100%;
    margin-right: 30px;
    font-size: 26px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.features-page .imgbox {
	height: 230px;
    background: #FEF6F5;
    max-width: 230px;
    margin: 0 0 0 auto;
    border-radius: 40px;
	padding: 30px;
}

.features-page .imgbox img {
	height: 100%;
	max-height: 180px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
	opacity: 1;
}

.badge-new {
	background: #ff6600;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 20px;
	margin-left: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* REVIEW */
.review .material-symbols-outlined{
	cursor:pointer;
	font-size: 34px;
	color:#ff6600;
	opacity:0.7;
}

.review .material-symbols-outlined:hover, .review #star-rating .selected{
	color:#ff6600;
	opacity:1;
}

.review #star-rating .selected {
  font-variation-settings:
  'FILL' 100,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.review .form-check-label{
	font-weight:400 !important;
	cursor:pointer;
}

/* HELP */
.help {
	margin-top:50px;
}

.help h2{
	margin: 0px 0px 15px;
}

.help .button{
	font-size: 15px;
    padding: 7px 25px;
}

.help .search{
	background:#fcf7f1;
    border: 2px solid #fdd6b9;
    padding: 20px;
    border-radius: 30px;
    margin-bottom: 25px;
}

.help .search input{
    margin: 0px;
}

.help .accordion-item{
	background-color: #ffd7ba42;
    border: 2px solid #ff66003b;
    border-radius: 15px !important;
	padding:20px;
	transition: border-color 0.3s ease;
}

.help .accordion-item:hover{
    border-color: #f60;
}

.help .accordion-item:hover .accordion-button{
	color:#f60 !important;
}

.help .accordion-button{
	background: transparent;
	font-weight: 600;
	padding:0px 0px 0px;
	font-size:17px;
}

.help .accordion-body{
	margin:10px 0px 0px;
	padding:0px;
}

.help .card{
	cursor: pointer;
    border-radius: 20px;
	padding:8px;
	border: 2px solid #e0e0e0;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%);
}

/* Eerste element */
.help .col-md-6:nth-child(9n+1) .card {
  background-color: #FDD1AD;
  border-color: #D6B192; /* oranje, vol */
}

/* Tweede element */
.help  .col-md-6:nth-child(9n+2) .card {
  background-color: #CDE7DD;
  border-color: #AEC3BB; /* groen */
}

/* Derde element */
.help  .col-md-6:nth-child(9n+3) .card {
  background-color: #FED7D0;
  border-color: #D7B6B0; /* rood */
}

/* Vierde element */
.help  .col-md-6:nth-child(9n+4) .card {
  background-color: #FFE0C6;
  border-color: #D7BDA7; /* oranje, zachter */
}

/* Vijfde element */
.help  .col-md-6:nth-child(9n+5) .card {
  background-color: #DEF0E9;
  border-color: #BCCBC5; /* groen, zachter */
}

/* Zesde element */
.help  .col-md-6:nth-child(9n+6) .card {
  background-color: #FFE8E4;
  border-color: #D7C4C1; /* rood, zachter */
}

/* Zevende element */
.help  .col-md-6:nth-child(9n+7) .card {
  background-color: #FEEEE0;
  border-color: #D7C9BE; /* oranje, licht */
}

/* Achtste element */
.help  .col-md-6:nth-child(9n+8) .card {
  background-color: #ECF8F3;
  border-color: #C8D2CD; /* groen, licht */
}

/* 9. zandtan. Deze kaart had helemaal geen regel: de cyclus liep tot 9n+8, dus plek 9 kreeg
   de kale witte wrapper als achtergrond en viel als gat in het raster. */
.help .col-md-6:nth-child(9n+9) .card {
  background-color: #FFF4F2;
  border-color: #D7CECD; /* rood, licht */
}

/* 10. de contactkaart: neutraal linnen, als enige zonder kleurzweem. Hij is geen categorie
   maar een uitweg, en leest daardoor als iets anders zonder eruit te springen. Hij is ook de
   tiende kaart in het raster en kreeg zonder eigen regel automatisch weer kleur 1, de felste.
   De selector heeft bewust evenveel gewicht als de nth-child-regels (.help + .col-md-6 +
   .card + .contact-card) EN staat erna, anders wint de cyclus alsnog op gelijke sterkte. */
.help .col-md-6 .card.contact-card {
  background-color: #FBFAF7;
  border-color: #D4D4D1;
  /* De link zit BINNEN de kaart, terwijl .help .card 8px padding en 2px rand heeft.
     Daardoor lag er een ring van 10px die oplichtte met een handje maar niets deed; op
     mobiel is die ring verhoudingsgewijs groter. Dit laat de link de hele kaart dekken. */
  position: relative;
}

.help .col-md-6 .card.contact-card > a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.help .card:hover {
     box-shadow: rgb(56 56 56 / 36%) 0 2px 8px;
	 border-color: #f60 !important;
	 background: linear-gradient(180deg, rgb(255 255 255 / 14%) 55%, #0000001f 120%);
}

.help .card h5{
    margin: 0px;
    padding: 20px 0px;
	  font-weight:600;
    color: #333;
}

.help .card:hover h5{
	 color: #f60;
}

/* assets/css/style.css */
.help #autocomplete-suggestions .list-group-item {
    cursor: pointer;
    border-top: none; /* Voorkom dubbele borders als het de eerste is */
	border:1px dashed #fdd6b9;
}
.help #autocomplete-suggestions .list-group-item:first-child {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
	border-top:1px dashed #fdd6b9;
}
.help #autocomplete-suggestions .list-group-item:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.help #autocomplete-suggestions .list-group-item:hover {
    background-color: #f8f9fa; /* Lichte hover kleur */
}

.help .search .form-control { /* Zorg dat de input boven de suggesties kan komen indien nodig */
    position: relative;
    z-index: 1001;
}

/* INVOICES */
.invoices-page{

}

.table>:not(caption)>*>*{
	border-color:#fdd6b9;
}

.invoices-page .table-striped>tbody>tr:nth-of-type(odd)>*{
	background:#fcf7f1;
	--bs-table-bg-type: none;
}

.invoices-page .button{
	padding: 5px 15px;
    font-size: 15px;
}

.invoices-page .material-symbols-outlined{
	vertical-align: middle;
	font-size: 20px;
}

/* COOKIE BANNER*/
#cookie-banner{
	display: none;
    position: fixed;
    bottom: 25px;
    left: 25px;
    right: 25px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 22%);
    z-index: 9999;
    max-width: 380px;
    padding: 20px;
    background: #fff;
}

#cookie-banner .button{
	display: inline-block;
    padding: 10px 25px;
}

#cookie-banner a{
	color:#ff6600;
}

/* ===== FOOTER v3 (2026-07) — rustige multi-kolom footer: brand + social, ===== */
/* ===== betaalmethoden per land, gelegenheden-links, landenkiezer.         ===== */
/* Sticky footer: de body vult minstens de viewport en de footer krijgt margin-top:auto,
   zodat de footer bij korte pagina's onderaan het scherm blijft (geen lege ruimte eronder). */
body { display: flex; flex-direction: column; min-height: 100vh; }
.site-footer {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    padding: 10px 0 25px;
    width: 100%;
    margin-top: auto;
    background: linear-gradient(0deg, rgb(255 102 0 / 7%) 0%, rgba(250, 248, 240, 0) 100%);
}
.site-footer a { text-decoration: none; }

.site-footer .sf-top {
    display: flex;
    gap: 56px;
    align-items: flex-start;
}
.site-footer .sf-brand { flex: 0 0 260px; min-width: 0; }
.site-footer .sf-logo { display: inline-block; }
.site-footer .sf-logo img {
    width: auto;
    max-width: 210px;
    height: auto;
    display: block;
}
.site-footer .sf-slogan {
    margin: 5px 0 18px;
    font-weight: 300;
    max-width: 240px;
    font-size: 16px;
}
.site-footer .sf-socials { display: flex; gap: 10px; margin-top: 15px; }
.site-footer .sf-soc {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: #f5e9d3;
    color: #333;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.site-footer .sf-soc svg { width: 16px; height: 16px; display: block; }
.site-footer .sf-soc:hover { background: #ff6600; color: #fff; transform: translateY(-1px); }
.site-footer .sf-brand-rule { display: none; }

.site-footer .sf-cols {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.site-footer .sf-col h4, .site-footer .sf-col h2 {
    margin: 2px 0 14px;
    font-size: 16px;
    font-weight: 700;
}
.site-footer .sf-col ul { list-style: none; margin: 0; padding: 0; }
.site-footer .sf-col li { margin: 0 0 11px; }
.site-footer .sf-col a {
    font-weight: 400;
    font-size: 16px;
}
.site-footer .sf-col a:hover { color: #ff6600; }

.site-footer .sf-rule {
    border: 0;
    border-top: 1px solid rgba(51, 41, 20, .08);
    margin: 40px 0 0;
    opacity: 1;
}

.site-footer .sf-pay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 28px;
    flex-wrap: wrap;
    padding: 22px 0;
}
.site-footer .sf-pay-group { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-footer .sf-pay-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.site-footer .sf-pay-logos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.site-footer .sf-pay-logos img {
    height: 31px;
    width: auto;
    display: block;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    padding: 4px 6px;
    box-sizing: border-box;
}

.site-footer .sf-country { position: relative; }
.site-footer .sf-country-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #f5e9d3;
    border: 0px;
    border-radius: 50px;
    padding: 9px 18px;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .16s ease, background .16s ease;
}
.site-footer .sf-country-btn:hover { background: #fe6a09; color: #fff; }
.site-footer .sf-country-btn .sf-chev { width: 15px; height: 15px; display: block; color: #6b6257; }
.site-footer .sf-country .dropdown-menu {
    border-radius: 16px;
    border: 0;
    padding: 6px;
    margin-bottom: 8px !important;
    box-shadow: rgb(56 56 56 / 20%) 0 4px 16px;
    max-height: 320px;
    overflow-y: auto;
}
.site-footer .sf-country .dropdown-item { padding: 8px 16px; border-radius: 10px; font-size: 16px; color: #333; }
.site-footer .sf-country .dropdown-item:hover { background: #f6efe1; }

/* Ronde vlaggetjes (flag-icons override; alleen border-radius, niet de width
   want .fis houdt de vlaggen 1em vierkant -> anders worden ronde vlaggen ovaal). */
.fi { border-radius: 100%; }

/* ===== Slanke conversie-footer (new/cart/checkout): hr + alleen de juridische links ===== */
.site-footer-lean { padding: 20px 0; }
.site-footer-lean .sf-lean-rule { border: 0; border-top: 1px solid rgba(51, 41, 20, .08); margin: 0 0 20px; opacity: 1; }
.site-footer-lean .sf-lean-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; }
.site-footer-lean .sf-lean-legal a { font-size: 15px; color: #6b6257; text-decoration: none; }
.site-footer-lean .sf-lean-legal a:hover { color: #ff6600; }

@media (max-width: 991.98px) {
    .site-footer { padding: 34px 0 22px; }
    /* Pagina's met een mobiele CTA-balk onderaan (beide 84px, position:fixed):
       .mobile-footer-new-book (content-/landingspagina's) en .sticky-cta-bar (book/new/sequel).
       Zonder extra ruimte verdwijnt het laatste footer-element (landenkiezer bij de volledige
       footer, juridische links bij de lean footer) achter die balk zodra je onderaan bent.
       Let op: beide balken staan standaard op bottom:-100px en schuiven pas in beeld zodra JS
       .is-visible zet (mobile-footer-new-book: scroll > 400px; sticky-cta-bar: laatste stap +
       submitknop uit beeld). Daarom matcht deze regel op .is-visible en NIET op het enkele
       bestaan van de balk -- anders staat er ook lege ruimte onder de footer terwijl er
       helemaal geen balk zichtbaar is (korte pagina's, bovenaan). :has() is live, dus de
       ruimte verschijnt en verdwijnt exact met de balk mee. */
    body:has(.mobile-footer-new-book.is-visible) .site-footer,
    body:has(.sticky-cta-bar.is-visible) .site-footer { padding-bottom: 110px; }
    .site-footer .sf-top { flex-direction: column; align-items: center; text-align: center; gap: 26px; }
    .site-footer .sf-brand { flex: none; width: 100%; display: flex; flex-direction: column; align-items: center; }
    .site-footer .sf-slogan { max-width: 100%; margin: 10px auto 0px; }
    .site-footer .sf-socials { justify-content: center; }
    .site-footer .sf-brand-rule { display: block; border: 0; border-top: 1px solid rgb(51 41 20 / 24%); width: 100%; margin: 22px 0 0; }
    .site-footer .sf-cols { width: 100%; max-width: 440px; grid-template-columns: repeat(2, 1fr); gap: 22px 18px; text-align: left; }
    .site-footer .sf-col h4, .site-footer .sf-col h2 { margin: 5px 0px; }
    .site-footer .sf-col li { margin-bottom: 2px; }
    .site-footer .sf-col a { display: inline-block; padding: 5px 0; }
    .site-footer .sf-rule { margin-top: 28px; }
    .site-footer .sf-pay { flex-direction: column; align-items: center; gap: 16px; padding: 20px 0; }
    .site-footer .sf-pay-group { flex-direction: column; align-items: center; gap: 12px; }
    .site-footer .sf-pay-label { margin-bottom: 4px; }
    .site-footer .sf-pay-logos { justify-content: center; }
}

/* EXTRAS PAGE */
.extras-hub {
	padding: 20px 0 60px;
  margin-top: 40px;
}

.extras-hub .top-page h1 {
	font-size: 35px;
	font-weight: 800;
  margin-bottom: 30px;
}

.extras-hub .top-page img {
	height: 90px;
	margin-right: 5px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
}

.extras-hub .intro {
	text-align: center;
	margin-bottom: 10px;
	color: #666;
	font-size: 1.1rem;
}

/* Succesmelding na toevoegen aan winkelwagen */
.extras-success {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
	margin-bottom: 10px;
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
}

.extras-success .material-symbols-outlined {
	font-size: 24px;
	flex-shrink: 0;
}

.extras-hub .fade-in {
	animation: extrasSuccessFadeIn 0.4s ease;
}

.extras-hub .fade-out {
	animation: extrasSuccessFadeOut 0.4s ease forwards;
}

@keyframes extrasSuccessFadeIn {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes extrasSuccessFadeOut {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(-8px); }
}

/* Extras skip button */
#skip-to-cart-btn .button2 {
    min-width: 195px;
    background-color: #ffffffde !important;
    background-image: linear-gradient(-180deg, #ffffff61, #ff660026);
}

.extra-card {
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
	padding: 32px 24px;
	text-align: center;
	position: relative;
	transition: transform 0.2s, box-shadow 0.2s;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.extra-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.extra-card .badge-label {
	position: absolute;
	top: 16px;
	right: 16px;
	background: #f60;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 100px;
	text-transform: uppercase;
}

.extra-card .badge-new {
	background: #28a745;
}

.extra-card .icon-img {
	width: 160px;
	height: 160px;
	margin: 0 auto 16px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
}

.extra-card h3 {
	font-size: 1.3rem;
	margin-bottom: 8px;
  font-weight:700;
}

.extra-card .description {
	color: #666;
	font-size: 0.95rem;
	line-height: 1.5;
	margin-bottom: 16px;
	flex-grow: 1;
}

.extra-card .price-from {
	font-size: 0.9rem;
	color: #999;
	margin-bottom: 16px;
}

.extra-card .price-from strong {
	color: #333;
	font-size: 1.1rem;
}
.extra-card .price-from strong.discount-price {
	color: #e8380d;
}

.extra-card .button {
	width: 100%;
}

/* EXTRAS PAGE: Canvas Selector */
.canvas-selector {
	display: none;
}

.canvas-selector.active {
	display: block;
}

.canvas-selector .top-page h1 {
	font-size: 35px;
	font-weight: 800;
  margin-bottom:30px;
}

.canvas-selector .top-page img {
	height: 90px;
	margin-right: 5px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
}

/* Canvas twee-kolom layout */
.canvas-main-row {
	margin-bottom: 0;
}

.canvas-illustrations-wrapper {
	background: #fff;
	border-radius: 30px;
	padding: 30px 30px 20px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

.canvas-illustrations-wrapper h2 {
	font-size: 18px;
	font-weight: 700;
}

.canvas-usps {
	background: #fff;
	border-radius: 30px;
	padding: 30px 40px 20px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
	overflow: hidden;
}

.canvas-illustration-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 10px;
}

.canvas-illustration-grid .illustration-item {
	border: 3px solid transparent;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s, transform 0.2s;
	position: relative;
}

.canvas-illustration-grid .illustration-item:hover {
	border-color: #f60;
	transform: scale(1.03);
}

.canvas-illustration-grid .illustration-item.selected {
	border-color: #f60;
}

.canvas-illustration-grid .illustration-item.selected::after {
	content: '\e5ca';
	font-family: 'Material Symbols Outlined';
	position: absolute;
	top: 6px;
	right: 6px;
	background: #f60;
	color: #fff;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.canvas-illustration-grid .illustration-item img {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.canvas-illustration-grid .illustration-item img.loaded {
	opacity: 1;
}

.canvas-illustration-grid .illustration-item .img-loader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
	border-radius: 8px;
}

.canvas-illustration-grid .illustration-item .img-loader .spinner-border {
	width: 24px;
	height: 24px;
	border-width: 2px;
	color: #f60;
}

.canvas-illustration-grid .illustration-item .page-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
  background: rgba(0, 0, 0, 0.25);
	color: #fff;
	font-size: 0.7rem;
	text-align: center;
	padding: 3px;
}

/* Rechter paneel: configuratie + preview */
.canvas-config-panel {
	background: #f8f0e2;
	border-radius: 30px;
	padding: 30px;
}

.canvas-config-panel h3 {
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 15px;
}

/* ==============================
   Canvas Preview — gedeelde stijlen
   ============================== */
.canvas-preview {
	--canvas-ratio: 0.8;
	position: relative;
	display: block;
	width: 100%;
}

.canvas-preview-face {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #ede8df;
	border-radius: 2px;
	box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.25), -2px 2px 4px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.canvas-preview-face::before {
	content: '';
	display: block;
	padding-top: calc(100% / var(--canvas-ratio));
}

.canvas-preview-face img {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	transform: scale(var(--canvas-crop-scale, 1));
}

/* ==============================
   Canvas Preview — extras pagina
   ============================== */
.canvas-preview-container {
	position: relative;
	text-align: center;
	margin-bottom: 24px;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Placeholder (zichtbaar tot illustratie is gekozen) */
.canvas-preview-placeholder {
	max-width: 250px;
	margin: 0 auto;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.canvas-preview-placeholder.hidden {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	pointer-events: none;
}

.canvas-preview-placeholder .canvas-preview-face {
	background: linear-gradient(145deg, #ede8df 0%, #e4ddd2 100%);
}

.canvas-placeholder-content {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #b8a888;
	z-index: 3;
}

.canvas-placeholder-content .material-symbols-outlined {
	font-size: 44px;
	margin-bottom: 6px;
	opacity: 0.45;
}

.canvas-placeholder-content span:last-child {
	font-size: 0.82rem;
	opacity: 0.4;
	font-style: italic;
}

/* Actieve canvas preview (na illustratie selectie) */
.canvas-preview-active {
	max-width: 300px;
	margin: 0 auto;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.canvas-preview-active.visible {
	opacity: 1;
	visibility: visible;
	position: relative;
	pointer-events: auto;
}

/* ==============================
   Canvas Mockup View — kinderkamer preview
   ============================== */
.canvas-mockup-view {
	display: none;
	width: 100%;
	margin: 0 auto;
	border-radius: 12px;
	overflow: hidden;
}

.canvas-mockup-view.visible {
	display: block;
}

.canvas-mockup-room {
	position: relative;
	width: 100%;
	line-height: 0;
}

.canvas-mockup-room .mockup-bg-img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}

.canvas-mockup-frame {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	transition: width 0.35s ease, height 0.35s ease;
	line-height: 0;
	overflow: hidden;
	box-shadow:
		-4px 4px 8px rgba(0, 0, 0, 0.25),
		-2px 2px 4px rgba(0, 0, 0, 0.15);
	border-radius: 2px;
	background: #e8e0d4;
}

.canvas-mockup-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(var(--canvas-crop-scale, 1));
}

.mockup-placeholder-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #b8a888;
	text-align: center;
	padding: 8px;
}

.mockup-placeholder-content .material-symbols-outlined {
	font-size: 28px;
	opacity: 0.5;
	margin-bottom: 2px;
}

.mockup-placeholder-content span:last-child {
	font-size: 0.6rem;
	opacity: 0.5;
	font-style: italic;
	line-height: 1.2;
}

/* Mockup formaat groottes (% van achtergrond breedte) */
.canvas-mockup-frame[data-size="small"] {
	width: 18%;
}
.canvas-mockup-frame[data-size="medium"] {
	width: 28%;
}
.canvas-mockup-frame[data-size="large"] {
	width: 33%;
}

/* Toggle knoppen */
.canvas-view-toggle {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-bottom: 20px;
}

.canvas-view-toggle .toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border: 2px solid #e8d5be;
	border-radius: 30px;
	background: #fff;
	color: #666;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.canvas-view-toggle .toggle-btn .material-symbols-outlined {
	font-size: 18px;
}

.canvas-view-toggle .toggle-btn:hover {
	border-color: #f60;
	color: #333;
}

.canvas-view-toggle .toggle-btn.active {
	border-color: #f60;
	background: #fff5f0;
	color: #f60;
}

/* ==============================
   Canvas Preview Mini — cart pagina
   ============================== */
.canvas-preview-mini {
	max-width: 120px;
	margin: 0 auto;
}

.canvas-preview-mini .canvas-preview-face {
	box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.25), -2px 2px 4px rgba(0, 0, 0, 0.15);
}

.canvas-size-options {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.canvas-size-option {
	border: 2px solid #e8d5be;
	border-radius: 14px;
	padding: 12px 16px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	flex: 1;
	min-width: 0;
	background: #fff;
}

.canvas-size-option:hover {
	border-color: #f60;
}

.canvas-size-option.selected {
	border-color: #f60;
	background: #fff5f0;
}

.canvas-size-option .size-label {
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 2px;
}

.canvas-size-option .size-dimensions {
	font-size: 0.8rem;
	color: #666;
	margin-bottom: 4px;
}

.canvas-size-option .size-price {
	font-weight: 700;
	color: #f60;
	font-size: 1rem;
}

/* Canvas warning melding */
.canvas-warning {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff3cd;
	color: #856404;
	border: 1px solid #ffc107;
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 500;
}

.canvas-warning .material-symbols-outlined {
	font-size: 20px;
	color: #f0a500;
	flex-shrink: 0;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}

.canvas-warning.shake {
	animation: shake 0.4s ease-in-out;
}

/* Canvas USPs (matching coloring-books design) */
.canvas-selector .product-details ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.canvas-selector .product-details ul li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1rem;
	font-size: 16px;
}

.canvas-selector .product-details ul .material-symbols-outlined {
	color: #f60;
	font-size: 24px;
	width: 26px;
	text-align: center;
	flex-shrink: 0;
}

.canvas-selector .button2 {
	background-color: #ffffffde !important;
	background-image: linear-gradient(-180deg, #ffffff61, #ff660026);
}

/* MOBILE */
@media only screen and (max-width: 1350px) {

	.navbar-light .navbar-nav .nav-link {
    padding: 0px 0px 0px 17px;
    font-size: 16px;
	}

	.homepage-examples .example span.arrow {
		margin-top: 90px;
		font-size: 40px;
		margin-right: -30px;
	}

	.book .pdf {
		height: 640px;
	}
}

@media only screen and (max-width: 1199px) {

	.homepage-top .examples, .homepage-examples .example a.cover, .idea .cover, .idea .cover2, .booklook .cover, .books .item .cover, .book .inputwrapper .cover, .ideas .cover, .custom-carousel-item .cover, .cart .cart-item .cover, .coloring-books .cover{
		transform: none;
	}

	.navbar {
		background-color: #faf8f0f0;
		position: fixed;
        top: 0;
        width: 100%;
		padding-top: 10px;
        padding-bottom: 10px;
	}
	.navbar-collapse{
		position: fixed;
        top: 69px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        background-color: #faf8f0f0;
        z-index: 1050;
		padding-right: calc(var(--bs-gutter-x)* .5);
		padding-left: calc(var(--bs-gutter-x)* .5);
	}

	.navbar-light .navbar-nav{
		padding:20px 0px;
		min-height: calc(100vh - 123px);
	}

	.navbar .dropdown-menu {
		border-radius: 0px;
		border:0px;
		box-shadow: none;
		margin-top: 0px;
		border-bottom: 1px solid #f5640026;
		background: #ffffffc7;
	}

	.navbar-toggler:focus,
	.navbar-toggler:active,
	.navbar-toggler-icon:focus {
		outline: none;
		box-shadow: none;
	}

	.navbar-light .navbar-toggler{
		border:0px;
		padding: .25rem 0px;
		display: flex;
        flex-direction: column;
        align-items: flex-start;
	}

	.icon-bar {
	  display: block;
	  width: 26px;
	  height: 3px;
	  background-color: #333;
	  border-radius: 3px;
	  margin: 2px 4px;
	  transition: all 0.2s;
	}

	.middle-bar{
		width: 22px;
	}

	.bottom-bar{
		width: 18px;
	}

	 :has(#navbarNav.show) .top-bar {
	  transform: rotate(45deg);
	  transform-origin: 10% 10%;
	}

	 :has(#navbarNav.show) .middle-bar {
	  opacity: 0;
	}

	 :has(#navbarNav.show) .bottom-bar {
	  transform: rotate(-45deg);
	  transform-origin: 10% 90%;
	  width: 26px;
	}

	.navbar-light .navbar-nav .nav-link{
		padding: 14px 0px;
    border-bottom: 1px solid #f5640026;
    font-size: 20px;
    font-weight: 700;
	}

	.navbar-light .navbar-nav .button{
		width: 100%;
		text-align: center;
		margin: 14px 0px 0px;
		padding: 9px 0px;
		color:#fff;
	}

	.navbar img {
		margin-top: 0px;
	}

	.navbar .menu2 ul li.item {
		padding: 0px 0px 0px 18px;
	}

	.navbar .menu2 ul li.account {
		padding-left:0px !important;
	}

	.navbar .menu2 .cart_items {
		top: 2px;
	}

	.navbar .dropdown-item {
		font-weight: 700;
		font-size: 17px;
	}

	.navbar .menu2 ul li {
		padding: 2px 0px;
	}

	.homepage-top h1, .homepage-top h1.long-title {
		font-size: 45px;
	}

	.homepage-reviews .grid {
		column-count: 3;
	}

	.homepage-howitworks img.step {
		max-width: 235px;
		height: auto;
		margin: 35px 0px;
	}

	.homepage-examples .example span.arrow {
        margin-top: 65px;
        margin-right: -20px;
        font-size: 35px;
	}

	footer .dropdown-toggle {
		float: inherit;
        margin-top: 10px;
	}

	.orders .card .title-info, .orders .card .title-info-long {
		width: 100%;
	}

}

@media only screen and (max-width: 767px) {

	.custom-accordion-button, .custom-accordion-button:focus {
		padding: 8px 0px 16px;
        margin-bottom: 10px;
        font-size: 16px;
	}

	.breadcrumb{
		font-size: 14px;
	}

	#faqImage {
		margin-bottom: 50px;
		height: 320px;
		border-radius: 30px;
		object-position: bottom;
	}

	.topbar-action {
		height:40px;
		line-height:40px;
	}

	.topbar-action p{
		font-size: 14px;
        line-height: 19px;
        margin: 6px auto;
	}

	.topbar-action .material-symbols-outlined {
		font-size: 18px;
	}

	.topbar-action b {
		margin: 0px 6px;
        color: transparent;
	}

	/* De twee voordelen wisselen elkaar af. Ze liggen over elkaar in een venster van precies
	   een regel hoog; de een schuift omhoog weg terwijl de ander van onderen binnenkomt.
	   Beide teksten passen in elke taal op een regel, nagemeten: de breedste is het Grieks met
	   292px van de 296 die er op een telefoon van 320 beschikbaar is. */
	.topbar-action p.topbar-roteer {
		position: relative;
		display: block;
		/* 24px, want zo hoog is een item echt: het pictogram is 18px en staat naast tekst met
		   een regelhoogte van 19px, en die twee staan in een flex-regel. Op 19px sneed het
		   venster de boven- en onderkant van het pictogram af. Met 24px plus 8px marge boven
		   en onder komt het precies uit op de 40px die de balk hoog is. */
		height: 24px;
		overflow: hidden;
		margin: 8px auto;
	}

	.topbar-action p.topbar-roteer .topbar-usp {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		/* Ook onderaan vastzetten, zodat het item het hele venster vult. Zonder deze regel is
		   het item 19px in een venster van 24px en plakt het tegen de bovenkant: de tekst
		   staat dan 2,5px te hoog in de balk. Met top en bottom samen vult het de 24px en
		   zet align-items: center hem echt in het midden. */
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		animation: mp-usp-a 10s ease-in-out infinite;
	}

	.topbar-action p.topbar-roteer .topbar-usp:nth-child(2) {
		animation-name: mp-usp-b;
	}

	/* Terugval voor wie beweging heeft uitgezet. Staat bewust HIER, binnen het mobiele blok en
	   na de regels hierboven, want anders wint de schuivende versie op volgorde. */
	@media (prefers-reduced-motion: reduce) {
		.topbar-action p.topbar-roteer .topbar-usp {
			animation-name: mp-usp-a-vervaag;
		}
		.topbar-action p.topbar-roteer .topbar-usp:nth-child(2) {
			animation-name: mp-usp-b-vervaag;
		}
	}

	.navbar-collapse {
        top: 64px;
    }

	.nav-item {
		padding: 0px;
	}

	.icon-bar {
        width: 24px;
    }

	 .middle-bar {
        width: 20px;
    }

	.bottom-bar {
        width: 16px;
    }

	:has(#navbarNav.show) .top-bar {
        transform-origin: 5% 10%;
    }

	:has(#navbarNav.show) .bottom-bar {
        width: 24px;
    }

	/* Een hoogte voor alle talen; alleen als een lange merknaam niet naast de iconen
	   past krimpt hij automatisch mee. Zonder die grens klapte de balk bij 360px breed
	   in twee regels (o.a. Bulgaars, Roemeens, Pools). De 152px is de gemeten vaste
	   ruimte: paginamarge 24 + menuknop 32 + iconen 64 + 32 tussenruimte. */
	.navbar img {
		height: 31px;
		width: auto;
		max-width: calc(100vw - 152px);
		object-fit: contain;
		object-position: left center;
		display: block;
		margin-top: 0px;
	}

	.navbar .menu2 ul li.item{
        padding: 0px 0px 0px 10px;
    }

	.navbar .menu2 .material-symbols-outlined {
		font-size: 27px;
	}

	.navbar .menu2 .cart_items {
		top: -2px;
		height: 16px;
		min-width: 16px;
		line-height: 16px;
		font-size: 12px;
		padding: 0 3px;
	}

	.modal-footer .button {
		margin-bottom: 10px !important;
		width:100%;
	}

	.modal-header .modal-title {
		font-weight: 600;
		font-size: 16px;
		line-height: 120%;
	}

	.homepage-top {
		padding: 15px 0px;
		height:auto;
		/* Hoort bij de min-height hierboven: op een telefoon staat alles onder elkaar en
		   bepaalt de inhoud de hoogte. Zonder deze regel zou het minimum van 500px blijven
		   gelden en kreeg elke telefoon een veel te hoge hero. */
		min-height: 0;
		margin-bottom: -910px;
    background: linear-gradient(
      180deg,
      rgb(255 102 0 / 0%) 0%,   /* Start: Volledig transparant */
      rgb(255 102 0 / 7%) 50%,  /* Midden: Je 7% oranje tint */
      rgb(255 102 0 / 0%) 100%  /* Eind: Weer volledig transparant */
    );
	}

	.homepage-top h1, .homepage-top h1.long-title {
		font-size: 34px;
        margin-bottom: 5px;
        max-width: 100%;
		text-align:center;
	}

	.homepage-top p {
		font-size: 18px;
		text-align:center;
	}

	.homepage-top p.ref{
		margin-top: -15px;
		border-radius: 20px;
	}

	.homepage-top .button{
	   padding: 10px 30px;
	   margin: 0px auto 7px;
	}

	.homepage-top span.cta-text,
	.theme-top span.cta-text{
		margin: 5px auto 40px;
	}

	/* Komt er een sterrenregel onder, dan draagt DIE de onderruimte en laat de tellerregel
		   hem los. Zonder dit staat er 40px tussen twee regels die bij elkaar horen. */
	.homepage-top span.cta-text.has-rating,
	.theme-top span.cta-text.has-rating{
		margin-bottom: 0;
	}

	.homepage-top span.cta-rating,
	.theme-top span.cta-rating{
		margin: 2px auto 40px;
	}

	/* Zit de sterrenregel in de blok-link, dan draagt DIE de onderruimte. Anders valt die
	   40px binnen het gekleurde vlak en wordt het bij hover een veel te hoge balk. */
	/* Mobiel houdt elke pagina wat hij had. De homepage stond op 40px onderruimte, de
	   thema-, cadeau- en leeftijdpaginas op 0 (die droegen mb-0 op de tellerregel). Dat stond
	   eerder als mb-0 op de link zelf, maar dat is margin-bottom: 0 !important en zou de 35px
	   van hierboven OOK op een breed scherm doodslaan. Daarom nu hier, per wrapper. */
	.homepage-top a.cta-block-link{
		margin: 5px auto 40px;
	}

	.theme-top a.cta-block-link{
		margin: 5px auto 0;
	}

	.homepage-top a.cta-block-link span.cta-rating,
	.theme-top a.cta-block-link span.cta-rating{
		margin: 2px auto 0;
	}

	.homepage-top .slider1{
		margin: 80px -7.5px 0px 0px;
	}

	.homepage-top .slider2{
		margin-top:40px;
		margin:40px -7.5px 0px;
	}

	.homepage-top .slider3{
		margin:5px 0px 0px -7.5px;
	}

	.homepage-top .examples .border-right {
		right: -3px;
		width: 3px;
	}

  .homepage-howitworks{
    background:none;
  }

	.homepage-howitworks .wrapper{
		padding: 35px 20px;
		border-radius:30px;
	}

	.homepage-howitworks h2 {
		font-size: 26px;
		margin-bottom: 25px;
	}

	.homepage-howitworks h3 {
		font-size: 21px;
	}

	.homepage-howitworks h2.step-title {
		font-size: 21px;
	}

	.homepage-howitworks span {
		width: 35px;
		height: 35px;
		margin-right: 15px;
		font-size: 21px;
	}

	.homepage-howitworks hr {
		max-width: 200px;
		margin: 50px auto;
		border-top: 1px dashed rgb(255 102 0 / 100%);
		opacity: 1;
	}

	.homepage-howitworks img.step {
		max-width: 200px;
		height: auto;
		margin: 0px 0px 30px;
	}

	.homepage-examples .wrapper{
		padding: 35px 20px;
		border-radius:30px;
	}

	.homepage-examples h2 {
		font-size: 26px;
	}

	.homepage-examples p {
		font-size: 18px;
		margin-bottom: 30px;
	}

	.homepage-examples .box-wrapper {
		border-radius: 20px;
		padding: 15px;
		margin-bottom: 25px;
	}

	.homepage-examples .example .box {
		padding: 6px;
		margin-bottom:10px;
		border-radius: 10px;
	}

	.homepage-examples .example img {
		border-radius: 10px;
	}

	.homepage-examples .example a.cover img {
		border-radius: 3px;
	}

	.homepage-examples .example a.cover{
		box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
		left:0;
		border-radius:3px;
	}

	.homepage-examples .example a.cover .border-right {
        right: -4px;
        width: 4px;
        border-radius: 0px 3px 3px 0px;
        border-right: 1px solid #00000042;
    }

	.homepage-examples .example a.cover::before {
		content: '';
		position: absolute;
		top: 0;
		left: 3px;
		width: 4px;
		height: 100%;
		background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
		border-radius: 5px 0px 0px 5px;
	}

	.homepage-examples .example a.cover::after {
		content: '';
		position: absolute;
		top: 0;
		left: 7px;
		width: 6px;
		height: 100%;
		background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
		pointer-events: none;
	}

	.homepage-examples .example .box-info {
		padding: 20px;
		margin-bottom: 0px;
	}

	.homepage-examples .example .box-link {
		font-size: 14px;
        padding: 10px 20px;
	}

	.homepage-examples .example span.arrow {
        font-size: 30px;
        margin-top: 48px;
        margin-right: -15px;
    }

	.homepage-examples h4 {
		font-size: 18px;
	}

	.homepage-examples h5, .homepage-examples h3.used-photo-title {
		font-size: 12px;
	}

	.homepage-examples ul li {
		margin-bottom: 10px;
		line-height: 18px;
		font-size: 14px;
	}

	.homepage-examples .item {
		flex: 0 0 140px;
		margin-right:15px;
		padding:5px;
	}

	.homepage-examples .item h5{
		font-size:13px;
		padding: 5px 5px 5px 2px;
	}

	.homepage-links .wrapper{
		padding: 30px 20px 15px;
		border-radius:30px;
	}

	.homepage-links .link-wrapper {
		padding: 20px 25px;
		margin-bottom: 15px;
	}

	.homepage-links .button{
		padding: 12px 40px;
		margin-top:20px;
	}

	.homepage-links h3 {
		font-size: 18px;
	}

	.homepage-faq .wrapper{
		padding: 35px 20px;
		border-radius:30px;
	}

	.homepage-faq h2 {
		font-size: 26px;
		margin-bottom: 15px;
	}

	.homepage-form .wrapper {
		padding: 35px 20px;
		border-radius:30px;
	}

	.homepage-form h2{
		font-size: 26px;
	}

	.homepage-form p.top {
		font-size: 18px;
		margin-bottom: -20px;
	}

	.homepage-form h4, .homepage-form h3.form-section-title-spaced {
		font-size: 22px;
		padding-top: 1.75rem;
	}

	.homepage-form .inputwrapper {
		padding: 25px 20px;
	}

	.homepage-form .custum-padding-start{
		padding-left: .5rem;
	}

	.homepage-form .custum-padding-end{
		padding-right: .5rem;
	}

	.homepage-form .custom-radio-block{
		margin-top:10px;
	}

	.homepage-form .radio-content span {
		font-size: 14px;
	}

	.homepage-form .big span {
        font-size: 16px;
    }

	.homepage-form .radio-content {
		padding: 20px 10px;
	}

	.homepage-form .illustrationstyle{
		padding:6px;
	}

	.homepage-form .radio-content img {
		max-width: 70px;
	}

	.homepage-form .big img {
		max-width: 85px;
	}

	.homepage-form .illustrationstyle img{
		max-width:100%;
		border-radius:14px;
	}

	.homepage-form .illustrationstyle:hover img {
		margin-bottom: 6px;
	}

	.homepage-form .button {
		width: 100%;
		text-align: center;
	}

	/* Defensie: step-X-link / submit / add-character knoppen altijd volledig
	   breed op mobile, zelfs als mp-field-in animatie / race condition / iOS
	   Safari quirks een andere width proberen op te leggen. display:block is
	   stabieler dan inline-block voor width:100% renderings. */
	.homepage-form .form-step > .button,
	.homepage-form .form-step > a.button,
	.homepage-form #showStep10Btn {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.homepage-form .button.remove-character{
		width: auto;
	}

	.homepage-form .final-step h5 {
		font-size: 18px;
	}

	.homepage-form .final-step .magic-icon .material-symbols-outlined{
		margin-right: 14px;
		font-size: 18px;
		max-height: 36px;
		padding: 7px;
	}

	.homepage-form .final-step .product-feature-list .feature-icon{
		margin-right: 14px;
		font-size: 18px;
		padding: 7px;
	}

	.homepage-form .final-step .summary-item strong {
		min-width: auto;
	}

	.homepage-form .final-step #summary-image{
		margin: 0px;
	}

	.homepage-form .final-step .inputwrapper2 h4{
		font-size: 18px;
	}

	.homepage-form .final-step .price-cta-wrapper .price-display {
		font-size: 1.5rem;
	}

	.homepage-form .final-step .price-cta-wrapper .price-display-discount {
		font-size: 13px;
	}

	.homepage-form .final-step .inputwrapper2 .button{
		padding: 10px 0px;
		font-size: 16px;
		margin-top: 0px;
	}

	/* Compacter op mobiel: bij 7 iconen is er ~252px beschikbaar; 7x32 + 6x4 = 248px.
	   Met 36px zou het 288px zijn en valt er een icoon op een tweede regel. */
	.homepage-form .payment-wrapper img,
	.sequel-checkout .payment-icons img,
	.cart .summary .payment-wrapper img {
		width: 32px;
		margin-right: 4px;
		padding: 3px 4px;
	}

	.homepage-form .notification {
		padding: 10px;
	}

	.homepage-form .notification .material-symbols-outlined {
		margin-top: 0px;
	}

	.homepage-form .modal-body .font-title{
		top: 15px;
		font-size: 28px;
	}

	.homepage-reviews .wrapper{
		padding: 35px 20px;
		border-radius:30px;
	}

	.homepage-reviews h2 {
		font-size: 26px;
		margin-bottom: 5px;
	}

	.homepage-reviews p.info {
    font-size: 18px;
		margin-bottom: 25px;
	}

	.homepage-reviews .grid {
		column-count: 2;
		column-gap: 0.5rem;
	}

	.homepage-reviews .grid-item {
		margin-bottom: 0.5rem;
	}

	.homepage-reviews .card-body{
		padding: 11px 11px 14px;
	}

	.homepage-reviews .card3 {
		padding:0px;
	}

	.homepage-reviews .item .cover{
		margin: 14px 14px 18px;
	}

	.homepage-reviews .item .cover .border-right {
        right: -4px;
        width: 4px;
        border-radius: 0px 3px 3px 0px;
        border-right: 1px solid #00000042;
    }

	.homepage-reviews .item .cover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 3px;
        width: 4px;
        height: 100%;
        background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
        border-radius: 5px 0px 0px 5px;
    }

	.homepage-reviews .item .cover::after {
        content: '';
        position: absolute;
        top: 0;
        left: 7px;
        width: 6px;
        height: 100%;
        background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
        pointer-events: none;
    }

	.homepage-reviews .item .material-symbols-outlined {
		font-size: 19px;
	}

	.homepage-reviews .item p {
		line-height: 20px;
        font-size: 13px;
	}

	.homepage-reviews .card-title {
		font-size: 13px;
	}

	.homepage-reviews .item hr {
		max-width: 20px;
		margin: 10px 0px;
	}

	.homepage-reviews .cta-card {
		padding: 10px 0px 0px 0px !important;
	}

	.homepage-reviews .cta-card .card-title {
		font-size: 17px;
	}

	.homepage-reviews .cta-card .card-text {
		font-size: 13px;
	}

	.theme-overview .wrapper {
        padding: 35px 8px 20px;
        border-radius: 30px;
    }

	.theme-overview .wrapper h2 {
		font-size: 26px;
		margin-bottom:20px;
	}

	.theme-overview li {
		margin-right:0px !important;
	}

	.theme-overview ul a {
		padding: 5px 10px;
        font-size: 14px;
		margin-bottom: 9px;
	}

	.theme-overview ul a img {
		height: 18px;
	}

  .theme-overview .show-more-trigger{
    padding: 7px 18px;
    font-size: 16px;
    font-weight: 600;
    margin: 10px 55px;
  }

	.usp .wrapper {
        padding: 35px 20px;
        border-radius: 30px;
    }

	.usp .usp-box {
		padding: 35px 20px 10px;
		border-radius: 20px;
	}

	.usp h2 {
		font-size: 26px;
	}

	.usp p {
		font-size: 16px;
		line-height: 22px;
		margin-bottom: 23px;
	}

	.books {
		margin-top: 15px;
	}

	.books h1 {
		font-size: 28px;
		margin-bottom: 15px;
	}

	.books .wrapper {
		border-radius: 28px;
		padding: 15px;
		margin-bottom: 30px;
	}

	.books .wrapper2{
		margin-bottom: 15px;
		padding: 20px;

	}

	.books .notification span{
		margin-top: 0px;
	}

	.cart{
		margin-top: 15px;
	}

	.cart h1 {
		font-size: 28px;
		margin-bottom: 15px;
	}

	.cart h2 {
        font-size: 26px;
    }

	.cart h3 {
        font-size: 22px;
    }

	.cart .wrapper {
		border-radius: 28px;
		padding: 15px;
		margin-bottom: 30px;
	}

	.cart .wrapper3 {
        padding: 25px 20px;
    }

	.cart .inputwrapper {
        padding: 20px 15px;
    }

	.cart .empty h2 {
		color: #333;
		font-size: 18px;
		margin-bottom: 20px;
	}

	.cart .empty .button{
		width:100%;
	}

	.cart .empty .material-symbols-outlined {
		margin: 15px auto 25px;
	}

	.cart .cart-item-notification span {
		margin: 0 auto 5px;
	}

	.cart .cart-item-notification h3 {
		font-size: 18px;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		align-content: center;
		flex-wrap: wrap;
	}

	.cart .cart-item-notification .button {
		padding: 8px 15px;
		font-size: 14px;
	}

	.cart .cart-item h5 {
		font-size: 16px;
	}

	.cart .cart-item p {
		font-size: 14px;
	}

	.cart .cart-item hr {
		margin: 10px 0px 5px;
	}

	.book {
		margin-top: 15px;
	}

	.book h1 {
		font-size: 28px;
		margin-bottom: 15px;
	}

	.book h2 {
		font-size: 26px;
	}

	.book h4 {
		font-size: 20px;
	}

	.book p.top {
		font-size: 17px;
		margin-bottom: 20px;
	}

	.book .top-title {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.book .pdf {
		height: 530px;
		width: 100%;
	}

	.book .wrapper {
		border-radius: 28px;
		padding: 15px;
		margin-bottom: 30px;
	}

	.book .wrapper2 {
		padding: 25px 20px;
		margin-top: -10px;
	}

	.book .wrapper3 {
		padding: 25px 20px;
	}

	.book .inputwrapper {
		padding: 20px 15px;
	}

	.book .button, .book .delete  {
		display:block;
		width: 100%;
	}

	.book .form-footer ul {
		display: inline-block;
		width: 100%;
	}

	.book #priceDiscounted {
		font-size: 28px;
	}

	.book .price-wrapper span{
		margin:0px;
	}

	.book .price-wrapper span.original{
		margin-left:15px;
	}

	.book #priceSale {
		margin-top: 10px;
	}

	.book .referral-code .button {
		padding: 10px;
	}
	.book .referral-code a {
		font-size: 14px;
	}

	.book .price-wrapper {
		border-radius: 35px;
        margin-right: 0px;
        text-align: center;
        padding-bottom: 0px;
        width: 100%;
        max-width: 100%;
        display: inline-block;
        padding-top: 10px
	}

	.book .payment-wrapper {
		margin-top: 20px;
		text-align: center;
		width: 100%;
		float: inherit;
	}

	.book .price-wrapper .button {
		padding: 12px 5px;
        margin: 7px 0px 0px;
	}

	.book .ebook-discount-explanation {
		text-align: center;
	}

	.book .kleurboek-upsell-v2 .upsell-badge{
		font-size: 11px;
		padding: 3px 10px 4px;
	}

	.book .kleurboek-upsell-v2 .upsell-images{
    max-width: 130px;
		margin: 0 auto 10px;
	}

	.book .kleurboek-upsell-v2 .usp-grid{
		grid-template-columns: 1fr;
		margin-bottom: 10px;
	}

	.book .kleurboek-upsell-v2 .usp-grid li{
		padding: 2px 0;
	}

	.book .kleurboek-upsell-v2 .upsell-bottom-row{
		gap: 6px;
	}

	.book .kleurboek-upsell-v2 .upsell-checkbox{
		align-items: flex-start;
	}

	.book .kleurboek-upsell-v2 .upsell-checkbox .form-check-input{
		margin-top: 3px;
	}

	.book .inputwrapper .audio-addon-inline .form-check{
		align-items: flex-start;
	}

	.book .inputwrapper .audio-addon-inline .form-check-input{
		margin-top: 3px;
	}

	.book .inputwrapper .controlebook{
		align-items: flex-start;
	}

	.book .inputwrapper .controlebook .form-check-input[type=checkbox]{
		margin-top: 3px;
	}

	.book .kleurboek-upsell-v2 .upsell-price-discount{
		font-size: 16px;
	}

	.book .inputwrapper .shipping-option{
		padding: 10px 35px;
		margin: 5px 0px 10px;
	}

	.book .inputwrapper .shipping-option label {
		margin-left: 5px;
		font-size: 14px;
    }

	.book .inputwrapper #showMoreOptions {
		font-size: 14px;
	}

	.book .options .notification span {
		margin-top: 0px;
	}

  .book .options .used-photo {
    max-height: 150px;
  }

  .book .options .button {
	width: 100%;
	margin-bottom: 6px;
  }

	.book-edit {
		margin-top: 15px;
	}

	.book-edit h1{
		font-size: 28px;
		margin-bottom: 15px;
	}

	.book-edit h3 {
		font-size: 21px;
		margin-bottom: 10px;
	}

	.book-edit .wrapper {
		padding: 35px 20px;
		border-radius:30px;
	}

	.book-edit textarea.form-control {
		min-height: 235px;
	}

	.book-edit .wrapper .edit-button-box .button{
		width: 100%;
		padding: 10px;
		margin-bottom: 0px;
	}

	.book-edit .buttons{
		display: flex;
		flex-direction: column-reverse;
	}

	.book-edit .buttons .button2{
		margin-top: 5px;
		padding: 5px 10px !important;
		font-size: 16px;
	}

  .editImageModal .btn-outline-primary{
    font-size: 14px;
    flex-wrap: wrap;
  }

	.editImageModal .notify {
		padding: 10px;
	}

	.editImageModal .notify p {
		font-size: 15px;
		font-weight: 500;
	}

	.editImageModal .notify span {
		font-size: 24px;
    margin-right: 6px;
	}

	.editImageModal .button{
		width: 100%;
		padding: 10px 10px;
        font-size: 16px;
	}

	.orders{
		margin-top: 15px;
	}

	.orders h1{
		font-size: 28px;
		margin-bottom: 15px;
	}

	.orders .wrapper {
		padding: 25px;
		border-radius: 28px;
	}

	.blog-item .breadcrumb-item {
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 300px;
		white-space: nowrap;
	}

	.blog, .blog-item {
		margin-top:15px;
	}

	.blog h1{
		font-size: 28px;
	}

	.blog h4{
		font-size: 26px;
		margin-bottom: 15px;
	}

	.blog .info {
        font-size: 18px;
    }

	.blog-item h1{
		font-size: 26px;
		margin-bottom: 15px;
	}

	.blog .card h5 {
		font-size: 22px;
	}

	.blog-item .button{
		width: 100%;
		font-size: 16px;
		padding: 6px;
		display: flex;
        justify-content: center;
	}

	.blog-item img.featured {
		max-height: 250px;
	}

	.blog-item h5 {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.blog-item .date {
		font-size: 14px;
	}

	.blog-item .wrapper {
		padding: 20px 15px;
		margin-bottom: 20px;
	}

	.blog-item .wrapper h2 {
		font-size: 25px;
	}

	.blog-item .table-of-contents ul a{
		color: #f60
	}

	.blog-item .table-of-contents ul li.toc-level-3{
		font-weight:400;
	}

	.blog-item .table-of-contents ul li.toc-level-2{
		font-weight:700;
	}

	.ideas, .idea {
		margin-top:15px;
	}

	.ideas h1{
		font-size: 28px;
	}

	.idea h1{
		font-size: 26px;
		margin-bottom: 15px;
	}

	.ideas .info, .idea .info{
		font-size: 18px;
	}

	.ideas .wrapper{
		border-radius: 28px;
	    padding: 15px;
	}

	.ideas ul.cats li a{
		font-size:14px;
	}

	.ideas .card, .idea .card {
		padding: 10px;
	}

	.ideas .cover, .idea .cover2 {
		margin: 10px 10px 0px 10px;
	}

	.ideas .cover h5, .idea .cover2 h5{
		font-size: 11px;
		top: 12px;
	}

	.ideas .card h4, .idea .card h4{
		font-size: 13px;
		margin-top: 10px;
		line-height: 18px;
	}

	.ideas .row.g-4, .idea .row.g-4 {
		--bs-gutter-x: 0.75rem;
		--bs-gutter-y: 0.75rem;
	}

	.idea .wrapper{
		border-radius: 28px;
	    padding: 25px 20px;
	}

	.idea .button {
		width: 100%;
	}

	.idea h2{
		font-size: 26px;
		margin-bottom: 8px;
	}

	.idea h2.others {
        font-size: 26px;
        margin-bottom: 15px;
    }

	.idea h3 {
		font-size: 18px;
	}

	.idea .box-buttons {
		padding: 15px 15px 7px;
	}

	.idea .box-usp {
		padding: 12px 15px;
	}

	.idea .box-story {
		padding: 20px;
	}

	.idea .book-list {
		padding: 20px;
	}

	.idea .book-list h2 {
		margin-bottom: 15px;
		font-size: 18px;
	}

	.idea .book-list ul li {
		font-size: 16px;
	}

	.idea .cover h2 {
		font-size: 25px;
		top: 25px;
		text-shadow: -1px 0 #00000096, 0 2px #000000e3, 1px 0 #00000096, 0 -1px #00000096;
	}

	.idea .gender-image {
		max-width: 115px;
		margin-top: -130px;
	}

	.idea .arrow {
		margin-right: 135px;
	}

	.examples h1{
		font-size: 28px;
	}

	.examples p{
		font-size: 18px;
	}

	.booklook .wrapper{
		padding: 35px 20px;
		border-radius: 28px;
	}

	.booklook h2{
		font-size: 26px;
	}

	.booklook p{
		font-size: 18px;
	}

	.booklook ul.usp li{
		font-size:15px;
	}

	.booklook ul.usp li span.material-symbols-outlined {
		margin-right: 5px;
	}

	.pricing .wrapper {
		padding: 15px 0px;
		border-radius: 28px;
	}

	.pricing .wrapper .button {
		padding: 12px 20px;
		width: 100%;
	}

	.pricing .wrapper .pricing-price .original {
		font-size: 14px;
		margin-right: 4px;
	}

	.pricing .wrapper .pricing-price .percentage {
		margin-left: 5px;
	}

	.pricing-top h1{
		font-size: 28px;
	}

	.pricing-top p{
		font-size: 18px;
	}

	.pricing-top p.ref{
		border-radius: 30px;
		font-size: 16px;
		line-height: 20px;
	}

	.card-creator-page{
		margin-top: 20px;
	}

	.card-creator-page .button-cat{
		padding: 4px 10px;
		margin-bottom: 5px;
		font-size: 14px;
	}

	.card-creator-page .top-page h1 {
		font-size: 26px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 25px;
        text-align: center;
	}

	.card-creator-page .top-page h1 img {
		height: 80px;
        margin-right: 0px;
        margin-bottom: 0px;
	}

	.card-creator-page .choice-grid .choice-content{
		padding: 8px;
	}

	.card-creator-page .choice-grid .choice-content2 {
		padding: 20px;
		border-radius: 15px;
	}

	.card-creator-page .price-and-nav, .card-creator-page .form-actions {
		margin-top: 20px;
	}

	.card-creator-page .step-header {
		margin-bottom: 15px;
	}

	.card-creator-page .step h2{
		font-size: 19px;
		margin-bottom: 15px;
	}

	.card-creator-page .step-header h2{
		font-size: 17px;
	}

	.card-creator-page #selection-summary{
		margin-top:20px;
	}

	.card-creator-page .editor-toolbar{
		margin-top:30px;
	}

	.card-creator-page .button{
		width:100%;
	}

	.card-creator-page .form-actions .button2 {
        padding: 10px;
        font-size: 16px;
    }

	.coloring-books {
		margin-top: 17px;
	}

	.coloring-books .custum-padding-end{
		padding-right: .5rem;
	}

	.coloring-books .custum-padding-start{
		padding-left: .5rem;
	}

	.coloring-books h1{
		font-size: 26px;
        flex-direction: column;
        margin-bottom: 25px;
	}

	.coloring-books h1 img {
		height: 90px;
        margin-right: 0px;
        margin-bottom: -7px;
	}

	.coloring-books .info{
		font-size: 17px;
        line-height: 26px;
	}

	.coloring-books .ronde-sticker{
		margin-top: -27px;
        margin-bottom: -38px;
		width: 90px;
		height: 90px;
		border: 2px dashed #fff;
	}

	.coloring-books .ronde-sticker p{
		font-size: 11px;
	}

	.coloring-books .wrapper{
		border-radius: 20px;
		padding: 20px 15px 10px;
	}

	.coloring-books h4 {
		font-size: 14px;
	}

	.coloring-books .cover img {
		border-radius: 3px;
	}

	.coloring-books .cover{
		box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
		left:0;
		border-radius:3px;
		margin-bottom:15px;
	}

	.coloring-books .cover .border-right {
        right: -4px;
        width: 4px;
        border-radius: 0px 3px 3px 0px;
        border-right: 1px solid #00000042;
    }

	.coloring-books .cover::before {
		content: '';
		position: absolute;
		top: 0;
		left: 3px;
		width: 4px;
		height: 100%;
		background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
		border-radius: 5px 0px 0px 5px;
	}

	.coloring-books .cover::after {
		content: '';
		position: absolute;
		top: 0;
		left: 7px;
		width: 6px;
		height: 100%;
		background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
		pointer-events: none;
	}

	.coloring-books .price{
		font-size:14px;
	}

	.coloring-books .btn-add-to-cart, .coloring-books .btn-add-to-cart:focus{
		padding: 6px;
    font-size: 17px;
	}

	.coloring-books .button2 {
		padding: 10px;
		font-size: 16px;
    width:100%;
	}

	.coloring-books .button2:focus{
		padding: 10px 15px;
	}

	.coloring-books .product-details ul li{
		margin-bottom: 5px;
		font-size: 14px;
		line-height: 20px;
	}

	.page{
		margin-top: 15px;
	}

	.page h1{
		font-size: 28px;
	}

	.page .info{
		font-size: 18px;
	}

	.page .inputwrapper {
		padding: 20px 15px;
	}

	.page .wrapper {
		padding: 25px;
		border-radius: 28px;
	}

	#loginForm button[type="submit"] {
		width: 100%;
	}

	.theme-top {
		padding: 15px 0px;
	}

	.theme-top h1 {
		font-size: 30px;
        margin-bottom: 5px;
	}

	.theme-top p {
		font-size: 17px
	}

	.theme-top .button{
	   padding: 10px 30px;
	   margin: 0px auto 7px;
	}

	.theme-content h2{
		font-size: 26px;
	}

	.features-page h2 {
		font-size: 21px;
	}

	.features-page p {
		font-size: 16px;
	}

	.features-page .feature-icon {
		margin-right: 15px;
		width: 35px;
		height: 35px;
		font-size: 21px;
	}

	.features-page .imgbox {
		height: 160px;
        max-width: 100%;
        margin: 0 auto;
        padding: 20px;
        border-radius: 30px;
	}

	.review .button{
		width: 100%;
		padding: 12px 20px;
	}

	.help .search {
		border-radius: 20px;
		padding: 10px;
	}

	.help .card h5 {
		padding: 0px;
		font-size:16px;
	}

	.payment-page {
		margin-top: 15px;
	}

	.payment-page h1 {
		font-size: 28px;
	}

	.payment-page .referral-header h2 {
		font-size: 26px;
        margin-bottom: 15px;
    }

	.payment-page .referral-header p{
		font-size: 18px;
	}

	.payment-page .wrapper {
		padding: 25px;
		border-radius: 28px;
	}

	.payment-page .button{
		width:100%;
		padding: 12px 5px;
	}

	/* Extras page */
	/* Sticky i.p.v. fixed: de knop zweeft mee tijdens het scrollen, maar parkeert
	   onderaan netjes onder de laatste kaart (boven de footer), i.p.v. eeuwig over
	   de footer te blijven zweven en de juridische links te bedekken. */
	#skip-to-cart-btn {
		position: sticky;
		bottom: 10px;
		z-index: 1000;
	}

	#skip-to-cart-btn .button2 {
		width: 100%;
		padding: 10px;
		font-size: 16px;
	}

	#skip-to-cart-btn .button2:focus {
		padding: 10px 15px;
	}

  .extras-hub{
    margin-top: 20px;
  }

	.extras-hub .top-page h1 {
		font-size: 24px;
    margin-bottom: 20px;
	}

	.extras-hub .row.g-4 {
		--bs-gutter-x: 0;
		--bs-gutter-y: 1rem;
	}

	.canvas-selector .top-page h1 {
		font-size: 24px;
		margin-bottom: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.canvas-selector .top-page img {
		margin-right: 0px;
    margin-bottom: 10px;
    height: 80px;
	}

  .canvas-selector .button2{
    font-size:16px;
    padding: 10px;
    width: 100%;
  }

	.canvas-illustrations-wrapper {
		padding: 20px 20px 12px;
		border-radius: 20px;
		margin-bottom: 16px;
	}

	.canvas-illustration-grid {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		gap: 8px;
	}

	.canvas-config-panel {
		border-radius: 20px;
		padding: 20px;
	}

	.canvas-preview-active {
		max-width: 200px;
	}

	.canvas-preview-placeholder {
		max-width: 170px;
	}

	.canvas-preview-mini {
		max-width: 90px;
	}

	.canvas-size-options {
		flex-direction: column;
	}

	.canvas-size-option {
		width: 100%;
	}

	.canvas-usps {
		border-radius: 20px;
		padding: 20px 15px 10px;
	}

	.canvas-selector .product-details ul li {
		margin-bottom: 10px;
		font-size: 14px;
		line-height: 20px;
	}

	.canvas-mockup-frame[data-size="small"] {
		width: 16%;
	}
	.canvas-mockup-frame[data-size="medium"] {
		width: 24%;
	}
	.canvas-mockup-frame[data-size="large"] {
		width: 28%;
	}

	.canvas-view-toggle .toggle-btn {
		padding: 6px 12px;
		font-size: 0.78rem;
	}

}

@media only screen and (max-width: 560px) {

	.button, .button:focus{
		padding: 12px 30px;
	}

	/* reCAPTCHA */
    .recaptcha-wrapper {
        transform: scale(0.87);
		transform-origin: 0 0;
    }

	.homepage-top {
		padding: 15px 0px;
		height:auto;
		min-height: 0;
		margin-bottom: -490px;
	}

  .homepage-examples .example .box1 .userphoto, .homepage-examples .example .box2 .userphoto, .homepage-examples .example .box3 .userphoto{
    max-height:60px;
  }
}

@media only screen and (max-width: 360px) {
	.navbar .menu2 ul li.item {
        padding: 0px 0px 0px 7px;
    }

	.homepage-form .final-step .inputwrapper2 .button{
		font-size: 15px;
	}

}

/* ================================================
   CALENDAR PRODUCT PAGE
   Verjaardagskalender — Swiper preview + maandgrid
   ================================================ */
.calendar-product {
	margin-top: 35px;
}

.calendar-product h1 {
	font-size: 35px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.calendar-product h1 img {
	height: 100px;
	margin-right: 15px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
}

.calendar-product .intro {
	font-size: 1.05rem;
	color: #666;
	max-width: 650px;
	margin: 0 auto 10px;
}

/* --- LINKER KOLOM: Swiper preview + prijs + knop --- */
.calendar-preview-wrapper {
	background: #fff;
	border-radius: 30px;
	padding: 30px 30px 25px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
	position: sticky;
	top: 100px;
	text-align: center;
}

/* --- SWIPER: MAIN PREVIEW SLIDER --- */
.calendar-main-swiper {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}

.calendar-main-swiper .swiper-slide {
	text-align: center;
}

.calendar-main-swiper .swiper-slide img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	border: 1px solid #eee;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.calendar-main-swiper .swiper-button-next,
.calendar-main-swiper .swiper-button-prev {
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	width: 38px !important;
	height: 38px !important;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
	--swiper-navigation-color: #333;
	--swiper-navigation-size: 16px;
}

.calendar-main-swiper .swiper-button-next:after,
.calendar-main-swiper .swiper-button-prev:after {
	font-size: 16px !important;
	font-weight: bold;
}

.calendar-main-swiper .swiper-button-disabled {
	display: none !important;
}

/* --- SWIPER: THUMBNAIL STRIP --- */
.calendar-thumb-swiper {
	height: 58px;
}

.calendar-thumb-swiper .swiper-slide {
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.2s;
	border-radius: 4px;
	overflow: hidden;
	border: 2px solid transparent;
}

.calendar-thumb-swiper .swiper-slide-thumb-active {
	opacity: 1;
	border-color: #f60;
}

.calendar-thumb-swiper .swiper-slide:hover {
	opacity: 0.85;
}

.calendar-thumb-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- REGENERATION OVERLAY --- */
.calendar-regen-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.8);
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 30px;
}

.calendar-regen-overlay p {
	margin-top: 10px;
	font-size: 0.9rem;
	color: #666;
	font-style: italic;
}

/* --- INITIAL PLACEHOLDER --- */
.calendar-initial-placeholder {
	background: #f8f0e2;
	border-radius: 12px;
	padding: 80px 30px;
	color: #9b8e7e;
	margin-bottom: 10px;
}

.calendar-initial-placeholder p {
	font-size: 0.9rem;
	font-style: italic;
}

.calendar-product .spinner-border {
	color: #f60;
}
.preview-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	background: #f8f0e2;
	border-radius: 8px;
}
.preview-loading p {
	margin: 10px 0 0;
	font-size: 0.85rem;
	color: #9b8e7e;
	font-style: italic;
}
.preview-loading-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 50px;
	background: #f0e8d8;
	border-radius: 4px;
}
.preview-loading .spinner-border,
.preview-loading-thumb .spinner-border {
	width: 20px;
	height: 20px;
	border-width: 2px;
	color: #c9b99a;
}

/* ===== CALENDAR RING BINDING & HANGING HOOK ===== */
.calendar-binding-deco {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 10;
	pointer-events: none;
}

/* --- Ophanghaak --- */
.calendar-hang-hook {
	width: 26px;
	height: 21px;
	border: 2.5px solid #b5b5b5;
	border-bottom: none;
	border-radius: 13px 13px 0 0;
	margin-bottom: -2px;
	background: transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* --- Rings bar --- */
.calendar-rings-bar {
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	padding: 0 6px;
}

/* --- Wire rings with through-paper effect --- */
.c-ring {
	display: block;
	width: 12px;
	height: 19px;
	border: 2.5px solid #b5b5b5;
	border-radius: 50%;
	background: transparent;
	flex-shrink: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	-webkit-mask-image: linear-gradient(
		to bottom,
		black 0%, black 36%,
		transparent 42%, transparent 58%,
		rgba(0, 0, 0, 0.8) 64%, rgba(0, 0, 0, 0.8) 100%
	);
	mask-image: linear-gradient(
		to bottom,
		black 0%, black 36%,
		transparent 42%, transparent 58%,
		rgba(0, 0, 0, 0.8) 64%, rgba(0, 0, 0, 0.8) 100%
	);
}

/* --- Shadow strip (hidden) --- */
.calendar-binding-shadow {
	display: none;
}

/* --- Calendar sits in the masked gap of the rings --- */
.calendar-preview-wrapper .calendar-main-swiper {
	z-index: 5;
	margin-top: -14px;
	background: #fff;
	border-radius: 0 0 10px 10px;
}

.calendar-preview-wrapper .calendar-main-swiper .swiper-slide img {
	border-radius: 0 0 6px 6px;
}

.calendar-preview-wrapper .calendar-initial-placeholder {
	margin-top: -14px;
	position: relative;
	z-index: 5;
	border-radius: 0 0 12px 12px;
}

.calendar-product .price {
	font-size: 22px;
	font-weight: 600;
	color: #20a165;
	margin-bottom: 5px;
}

.btn-add-calendar {
	font-size: 1rem;
	width: 100%;
}

.btn-add-calendar:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* --- RECHTER KOLOM: Maandoverzicht met illustraties --- */
.calendar-months-wrapper {
	background: #fff;
	border-radius: 30px;
	padding: 30px 30px 20px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

.calendar-months-wrapper h2 {
	font-size: 18px;
	font-weight: 700;
	color: #333;
	margin-bottom: 15px;
}

.calendar-month-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.calendar-month-item {
	background: #faf8f5;
	border-radius: 12px;
	padding: 10px 8px 8px;
	text-align: center;
	transition: box-shadow 0.2s, transform 0.2s;
}

.calendar-month-item:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.month-label {
	font-weight: 700;
	font-size: 0.75rem;
	color: #f60;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

.month-illustration {
	width: 100%;
	aspect-ratio: 2/3;
	border-radius: 8px;
	overflow: hidden;
	background: #ede8df;
	margin-bottom: 8px;
	position: relative;
}

.month-illustration img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.calendar-month-item:hover .month-illustration img {
	transform: scale(1.04);
}

/* --- ILLUSTRATION LOADER (skeleton spinner) --- */
.illustration-loader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ede8df;
	z-index: 1;
}

.illustration-loader .spinner-border-sm {
	color: #c4b9aa;
}

.illustration-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c4b9aa;
}

.illustration-placeholder .material-symbols-outlined {
	font-size: 32px;
}

.btn-swap-illustration {
	background: #fff;
	border: 1px solid #e0d8cc;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 0.7rem;
	color: #888;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-weight: 500;
}

.btn-swap-illustration:hover {
	border-color: #f60;
	color: #f60;
	background: #fff5ee;
}

/* --- SWAP ILLUSTRATIE MODAL --- */
.swap-illustration-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.swap-illustration-item {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	border: 3px solid transparent;
	transition: all 0.2s;
	aspect-ratio: 2/3;
}

.swap-illustration-item:hover {
	border-color: #f60;
	transform: scale(1.03);
}

.swap-illustration-item.selected {
	border-color: #f60;
}

.swap-illustration-item.selected::after {
	content: '\e5ca';
	font-family: 'Material Symbols Outlined';
	position: absolute;
	top: 6px;
	right: 6px;
	background: #f60;
	color: #fff;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.swap-illustration-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.swap-illustration-item .page-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
	font-size: 0.7rem;
	text-align: center;
	padding: 3px;
}

/* --- PRODUCT KENMERKEN (USP's) --- */
.calendar-product .product-details {
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
	overflow: hidden;
}

.calendar-product .product-details ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.calendar-product .product-details ul li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1rem;
	font-size: 16px;
}

.calendar-product .product-details ul li strong {
	display: block;
	font-weight: 700;
}

.calendar-product .product-details ul .material-symbols-outlined {
	color: #f60;
	font-size: 24px;
	width: 26px;
	text-align: center;
	flex-shrink: 0;
}

/* --- TERUG-KNOP stijl --- */
.calendar-product .button2 {
	background-color: #ffffffde !important;
	background-image: linear-gradient(-180deg, #ffffff61, #ff660026);
}

/* --- RESPONSIVE: TABLET (max 991px) --- */
@media (max-width: 991px) {
	.calendar-preview-wrapper {
		position: static;
		margin-bottom: 20px;
	}

	.calendar-month-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- RESPONSIVE: MOBILE (max 767px) --- */
@media (max-width: 767px) {
	.calendar-product {
		margin-top: 15px;
	}

	.calendar-product h1 {
		font-size: 24px;
		flex-direction: column;
    margin-bottom: 0px;
	}

	.calendar-product h1 img {
    height: 80px;
		margin-right: 0px;
    margin-bottom: 0px;
	}

	.calendar-month-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.calendar-preview-wrapper {
		padding: 20px 20px 20px;
		border-radius: 20px;
	}

	.c-ring {
		width: 10px;
		height: 16px;
		border-width: 2px;
	}

	.calendar-hang-hook {
		width: 22px;
		height: 18px;
		border-width: 2px;
	}

	.calendar-preview-wrapper .calendar-main-swiper,
	.calendar-preview-wrapper .calendar-initial-placeholder {
		margin-top: -12px;
	}

	.calendar-months-wrapper {
		padding: 20px 20px 15px;
		border-radius: 20px;
	}

	.calendar-product .product-details {
		border-radius: 20px;
	}

	.swap-illustration-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	.calendar-thumb-swiper {
		height: 45px;
	}

	.calendar-initial-placeholder {
		padding: 50px 20px;
	}

	.calendar-product .price {
		font-size: 20px;
	}
}

/* --- RESPONSIVE: SMALL MOBILE (max 480px) --- */
@media (max-width: 480px) {
	.calendar-month-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.month-label {
		font-size: 0.65rem;
	}

	.btn-swap-illustration {
		font-size: 0.6rem;
		padding: 3px 6px;
	}

	.swap-illustration-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.calendar-thumb-swiper {
		height: 38px;
	}

	.c-ring {
		width: 9px;
		height: 14px;
		border-width: 2px;
	}

	.calendar-hang-hook {
		width: 20px;
		height: 16px;
		border-width: 2px;
	}

	.calendar-preview-wrapper .calendar-main-swiper,
	.calendar-preview-wrapper .calendar-initial-placeholder {
		margin-top: -10px;
	}
}

/* ============================================ */
/* Bundelkorting styling                        */
/* ============================================ */

/* --- Korting banner op extras.php --- */
.bundle-discount-banner {
    background: linear-gradient(-180deg, #fd8130, #ff6600);
    color: #fff;
    padding: 14px 28px;
    border-radius: 14px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin: 8px auto 20px;
    max-width: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 3px 12px rgba(255, 102, 0, 0.25);
    animation: discountBannerSlideIn 0.5s ease-out;
    line-height: 1.5;
}
.bundle-discount-banner strong {
    color: #fff;
    font-weight: 800;
}
.bundle-discount-banner .material-symbols-outlined {
    font-size: 26px;
    flex-shrink: 0;
}

@keyframes discountBannerSlideIn {
    0% { transform: translateY(-10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* --- Korting banner op product pagina's --- */
.product-discount-banner {
    background: linear-gradient(-180deg, #fd813000, #28a7443d);
    color: #28a744;
    border: 2px solid #28a7447a;
    padding: 12px 20px;
    border-radius: 12px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 3px 12px rgba(255, 102, 0, 0.2);
    animation: discountBannerSlideIn 0.5s ease-out;
    line-height: 1.4;
}
.product-discount-banner strong {
    font-weight: 800;
}
.product-discount-banner .material-symbols-outlined {
    font-size: 22px;
    flex-shrink: 0;
}

/* --- Doorgestreepte en korting prijzen --- */
.original-price {
    text-decoration: line-through;
    opacity: 0.45;
    font-size: 0.88em;
    margin-right: 2px;
}

.discount-price {
    color: #e8380d;
    font-weight: 700;
}

/* Grotere discount prijs op extra-cards */
.extra-card .discount-price {
    font-size: 1.3rem;
}

/* --- Korting badge op extra cards --- */
.extra-card {
    position: relative;
}
.extra-card .discount-badge {
    background: #e8380d;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(232, 56, 13, 0.3);
}

/* --- Prijs op extra-cards met korting --- */
.extra-card .price-from .original-price {
    font-size: 0.95rem;
}

/* --- Extras discount detail in cart summary --- */
.extras-discount-detail {
    margin-top: -4px;
    margin-bottom: 4px;
}

/* --- Canvas size price discount --- */
.canvas-size-option .size-price .original-price {
    font-size: 0.85em;
    color: #999;
    opacity: 0.7;
}
.canvas-size-option .size-price .discount-price {
    font-size: 1.05em;
    color: #e8380d;
    font-weight: 700;
}

/* --- Cart item discount prices --- */
.cart-item .original-price {
    font-size: 0.85em;
}
.cart-item .discount-price {
    font-size: inherit;
}

/* --- Card size choice discount --- */
.choice-extra-price .original-price {
    font-size: 0.85em;
}
.choice-extra-price .discount-price {
    font-size: inherit;
}

/* --- Korting prijs op product pagina's --- */
.product-page-price .original-price {
    font-size: 1rem;
}
.product-page-price .discount-price {
    font-size: 1.4rem;
}

.canvas-size-option .size-price .discount-price {
    font-size: 1.05em;
    color: #e8380d;
    font-weight: 700;
}

/* --- Cart item discount prices --- */
.cart-item .original-price {
    font-size: 0.85em;
}
.cart-item .discount-price {
    font-size: inherit;
}

/* --- Card size choice discount --- */
.choice-extra-price .original-price {
    font-size: 0.85em;
}
.choice-extra-price .discount-price {
    font-size: inherit;
}

/* --- Korting prijs op product pagina's --- */
.product-page-price .original-price {
    font-size: 1rem;
}
.product-page-price .discount-price {
    font-size: 1.4rem;
}

/* ============================================================
   Magisch Kinderboek — Wizard UI polish (2026-ready)
   - Snappy, subtle, accessible.
   - prefers-reduced-motion gerespecteerd.
   - Niet-destructief: alleen additief bovenop bestaande CSS.
   - Verplaatst vanuit inline <style> in new.php voor browser-caching.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

    /* --- 1. Selectie-kaarten: snappier hover + press --- */
    .homepage-form .custom-radio-block .radio-content {
        transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
                    box-shadow 160ms ease,
                    border-color 180ms ease;
        will-change: transform;
    }
    .homepage-form .custom-radio-block:hover .radio-content {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.07);
    }
    .homepage-form .custom-radio-block:active .radio-content {
        transform: scale(0.985);
        transition-duration: 80ms;
    }

    /* --- 2. Pick-pulse: subtieler + sneller --- */
    .homepage-form .custom-radio-block[data-just-picked="1"] .radio-content {
        animation: mp-pick-pulse 240ms cubic-bezier(0.2, 0.85, 0.25, 1);
    }
    @keyframes mp-pick-pulse {
        0%   { transform: scale(1); }
        40%  { transform: scale(1.028); }
        100% { transform: scale(1); }
    }

    /* --- 3. Inner-glow op geselecteerde kaart --- */
    .homepage-form .custom-radio-block input[type="radio"]:checked + .radio-content {
        box-shadow: 0 3px 8px rgba(56, 56, 56, 0.32),
                    inset 0 0 0 3px rgba(255, 102, 0, 0.10) !important;
    }

    /* --- 4. Universele knop-press feedback (primary + secondary) --- */
    .homepage-form .button,
    .homepage-form #showStep10Btn,
    .homepage-form #submitBtn,
    .wizard-resume-banner .button {
        transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
                    box-shadow 140ms ease,
                    background-color 140ms ease;
    }
    .homepage-form .button:active,
    .homepage-form #showStep10Btn:active,
    .homepage-form #submitBtn:active,
    .wizard-resume-banner .button:active {
        transform: scale(0.96);
        transition-duration: 70ms;
    }

    /* --- 5. Upload spinner fade --- */
    .upload-spinner { animation: mp-fade-in 140ms ease-out; }
    @keyframes mp-fade-in { from { opacity: 0; } to { opacity: 1; } }

    /* --- 6. Sparkle op CTA-titel: twinkelt, settelt kort en fade dan vlot uit (default easing, fade vanaf 60%) terwijl font-size+marge meekrimpen zodat de titel vloeiend hercentreert --- */
    .homepage-form .final-step .cta-block h4 { position: relative; }
    .homepage-form .final-step .cta-block h4::after {
        content: "✨";
        display: inline-block;
        margin-left: 6px;
        transform-origin: center;
        animation: mp-sparkle-twinkle 2200ms cubic-bezier(0.2, 0.8, 0.2, 1) 500ms 1 both;
    }
    @keyframes mp-sparkle-twinkle {
        0%   { opacity: 0; transform: scale(0.3) rotate(-14deg); font-size: 1em; margin-left: 6px; }
        15%  { opacity: 1; transform: scale(1.35) rotate(10deg); }
        30%  { opacity: 0.75; transform: scale(0.95) rotate(-3deg); }
        45%  { opacity: 1; transform: scale(1.18) rotate(6deg); }
        60%  { opacity: 1; transform: scale(1) rotate(0); font-size: 1em; margin-left: 6px; }
        100% { opacity: 0; transform: scale(0.5) rotate(0); font-size: 0em; margin-left: 0; }
    }
}

/* 7. Book counter: reset .usp span (margin-right + groen) voor dit specifieke
   element zodat "Al 2.957 boeken gemaakt" netjes ademt en groen gereserveerd
   blijft voor de prijs. */
.homepage-form .js-books-counter {
    color: inherit !important;
    margin: 0 0.3em !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   8. CHOICE PILLS — voltooide stappen vouwen vanzelf in tot
   speelse chips die matchen met de wizard-kaarten (pastel-bg,
   3D-icoon, drop-shadow, 20px radius, site-matching easing).
   ============================================================ */

.homepage-form .mp-pills-wrapper {
    margin: 0 0 22px 0;
}
.homepage-form .mp-pills-wrapper:not(:has(.mp-pill)) { display: none; }

/* Zorg dat elke stap voldoende scroll-ruimte heeft zodat de h4 altijd netjes
   onder de navbar kan landen en niet in het midden/onderin de pagina belandt. */
.homepage-form .form-step > h4,
.homepage-form .mp-pills-title {
    scroll-margin-top: 110px;
}
.homepage-form .form-step {
    scroll-margin-top: 110px;
}
/* Min-height op de sectie (niet de wrapper) zorgt dat er bij korte stappen
   altijd genoeg scroll-ruimte is om de huidige stap bovenaan te positioneren,
   ZONDER dat de peach-achtergrond van de wrapper leeg onderruimte krijgt.
   De extra ruimte zit nu ONDER de wrapper, binnen de transparante sectie. */
.homepage-form:has(#bookForm) {
    min-height: calc(100vh + 200px);
}
@media (max-width: 991px) {
    .homepage-form:has(#bookForm) {
        min-height: calc(100vh + 160px);
    }
}
.homepage-form .mp-pills-title {
    /* Erft font-size/weight van .homepage-form h4 (26px / 700) zodat de titel
       naadloos aansluit bij de step-titels ("Kies de leeftijdscategorie" etc.). */
    margin: 0 0 12px 0;
}

.mp-completed-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mp-completed-pills:empty { display: none; }

.homepage-form .mp-pill {
    /* Matcht kaart-aesthetiek: pastel-bg per pill, 20px radius. De JS zet
       background-color (pastel-tint). De gradient zit als background-image
       er bovenop — topje licht opgelicht, onderkant iets verdiept zodat de
       pill een subtiele diepte krijgt en de border-kleur naadloos aansluit. */
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px 5px 5px;
    background-color: #ffffff;
    background-image: linear-gradient(180deg, rgb(255 255 255 / 8%) 30%, rgba(0, 0, 0, 0.14) 115%);
    border: 2px solid #fdd6b9;
    border-radius: 20px;
    color: #333;
    font: 600 14px/1.25 inherit;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    white-space: nowrap;
    max-width: 100%;
    min-height: 46px;
}

.homepage-form .mp-pill-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    overflow: hidden;
}

.homepage-form .mp-pill-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    /* Zelfde filter als kaart-iconen - "van hier" gevoel */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18)) sepia(10%) saturate(90%) brightness(1.05);
}

/* Illustratie-stijlen: vierkante preview zonder sepia, afgeronde hoeken */
.homepage-form .mp-pill[data-icon-kind="style"] .mp-pill-icon-wrap {
    border-radius: 8px;
    width: 40px;
    height: 32px;
}
.homepage-form .mp-pill[data-icon-kind="style"] .mp-pill-icon {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    object-fit: cover;
    filter: none;
}

/* Lettertype: Aa-preview in de eigen font */
.homepage-form .mp-pill[data-icon-kind="text"] .mp-pill-icon-wrap {
    background: #faf0e6;
    font-weight: 700;
    font-size: 17px;
    color: #ff6600;
}

/* Character-foto: rond uitsnede */
.homepage-form .mp-pill[data-icon-kind="photo"] .mp-pill-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    filter: none;
}

/* Material icon fallback (taal, karakter zonder foto, extra details) */
.homepage-form .mp-pill .mp-pill-icon-mat {
    font-size: 20px;
    color: #ff6600;
    line-height: 1;
}

.homepage-form .mp-pill-label {
    font-weight: 600;
    line-height: 1.25;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 2px;
}

.homepage-form .mp-pill-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #ff6600;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    margin: 0px -5px 0px 0px;
}

.homepage-form .mp-pill:focus-visible {
    outline: 3px solid rgba(255, 102, 0, 0.40);
    outline-offset: 2px;
}

.homepage-form .mp-pill.mp-pill-editing {
    border-color: #ff6600 !important;
    box-shadow: 0 6px 18px rgba(255, 102, 0, 0.25);
}

/* Collapsed step - CSS !important nodig om inline display:block van
   showStep() te overschrijven; JS zet ook inline display:none als vangnet. */
.form-step.mp-collapsed { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
    .homepage-form .mp-pill {
        transition:
            transform 260ms cubic-bezier(0.2, 0.6, 0.6, 1),
            box-shadow 260ms cubic-bezier(0.2, 0.6, 0.6, 1),
            border-color 200ms ease,
            background-color 200ms ease;
        animation: mp-pill-in 420ms cubic-bezier(0.34, 1.35, 0.5, 1);
    }
    .homepage-form .mp-pill-icon {
        transition: transform 260ms cubic-bezier(0.2, 0.6, 0.6, 1);
    }
    @keyframes mp-pill-in {
        0%   { opacity: 0; transform: translateY(-10px) scale(0.82) rotate(-2deg); }
        55%  { opacity: 1; transform: translateY(2px) scale(1.04) rotate(0.5deg); }
        100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
    }
    .homepage-form .mp-pill:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 102, 0, 0.22);
        border-color: #f1a27c !important; /* !important verslaat JS-inline borderColor */
    }
    .homepage-form .mp-pill:hover .mp-pill-icon {
        transform: scale(1.09);
    }
    .homepage-form .mp-pill-edit {
        transition: transform 200ms cubic-bezier(0.2, 0.6, 0.6, 1), color 180ms ease;
        font-size: 14px;
        width: 14px;
        height: 14px;
    }
    .homepage-form .mp-pill:hover .mp-pill-edit {
        color: #e55a00;
        transform: rotate(-8deg) scale(1.1);
        width: 14px;
        height: 14px;
        font-size: 14px;
    }
    .homepage-form .mp-pill:active {
        transform: scale(0.96) translateY(0);
        transition-duration: 70ms;
    }
    .homepage-form .mp-pill-bump {
        animation: mp-pill-bump 420ms cubic-bezier(0.34, 1.4, 0.5, 1);
    }
    @keyframes mp-pill-bump {
        0%   { transform: scale(1) rotate(0); }
        35%  { transform: scale(1.07) rotate(-1.5deg); }
        70%  { transform: scale(0.985) rotate(0.8deg); }
        100% { transform: scale(1) rotate(0); }
    }
    .homepage-form .mp-pill.mp-pill-removing {
        animation: mp-pill-out 220ms cubic-bezier(0.4, 0.0, 0.6, 1) forwards;
        pointer-events: none;
    }
    @keyframes mp-pill-out {
        0%   { opacity: 1; transform: scale(1); }
        100% { opacity: 0; transform: scale(0.78) translateY(-4px); }
    }
    /* Step reveal — zachte pop met een milde spring-landing zodat een nieuw
       blok niet abrupt inklapt maar energiek uitrolt. */
    .homepage-form .form-step.mp-reveal {
        animation: mp-step-reveal 460ms cubic-bezier(0.34, 1.15, 0.5, 1);
    }
    @keyframes mp-step-reveal {
        0%   { opacity: 0; transform: translateY(-14px) scale(0.985); }
        55%  { opacity: 1; transform: translateY(3px) scale(1.006); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    /* Titel/heading licht naschuift — extra gevoel van beweging.
       Ook nested h4s binnen step-9 ("Jouw gegevens" / "Inloggen") meenemen. */
    .homepage-form .form-step.mp-reveal > h4,
    .homepage-form .form-step.mp-reveal #registration-fields > h4,
    .homepage-form .form-step.mp-reveal #login-fields > h4 {
        animation: mp-title-reveal 500ms cubic-bezier(0.34, 1.15, 0.5, 1) both;
    }
    @keyframes mp-title-reveal {
        0%   { opacity: 0; transform: translateY(-6px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    /* Kaart-stagger — elke kolom rolt met kleine vertraging mee. Vier golven
       via nth-child(4n+X) zodat zowel smalle (4-koloms) als brede grids
       (subject heeft vaak 4 per rij) mooi cascaden. */
    .homepage-form .form-step.mp-reveal [class*="col-"] > .custom-radio-block {
        animation: mp-card-in 520ms cubic-bezier(0.34, 1.25, 0.5, 1) both;
    }
    @keyframes mp-card-in {
        0%   { opacity: 0; transform: translateY(14px) scale(0.94); }
        65%  { opacity: 1; transform: translateY(-3px) scale(1.015); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .homepage-form .form-step.mp-reveal [class*="col-"]:nth-child(4n+1) > .custom-radio-block { animation-delay: 70ms; }
    .homepage-form .form-step.mp-reveal [class*="col-"]:nth-child(4n+2) > .custom-radio-block { animation-delay: 130ms; }
    .homepage-form .form-step.mp-reveal [class*="col-"]:nth-child(4n+3) > .custom-radio-block { animation-delay: 190ms; }
    .homepage-form .form-step.mp-reveal [class*="col-"]:nth-child(4n+4) > .custom-radio-block { animation-delay: 250ms; }
    .homepage-form .mp-pills-title {
        animation: mp-step-reveal 460ms cubic-bezier(0.34, 1.15, 0.5, 1);
    }

    /* Form-veld stappen (zoals "Jouw persoonlijke details" / step-9) hebben geen
       kaart-grid maar inputwrapper-blokken. Laat die ook mee glijden zodat het
       niet als harde knip voelt. */
    .homepage-form .form-step.mp-reveal > p,
    .homepage-form .form-step.mp-reveal > .inputwrapper,
    .homepage-form .form-step.mp-reveal > #user-auth-section,
    .homepage-form .form-step.mp-reveal > .button,
    .homepage-form .form-step.mp-reveal > a.button,
    .homepage-form .form-step.mp-reveal #character-inputs > .character-set:first-child {
        animation: mp-field-in 520ms cubic-bezier(0.34, 1.2, 0.5, 1) both;
    }
    .homepage-form .form-step.mp-reveal > p                             { animation-delay: 80ms; }
    .homepage-form .form-step.mp-reveal > .inputwrapper                 { animation-delay: 150ms; }
    .homepage-form .form-step.mp-reveal > #user-auth-section            { animation-delay: 220ms; }
    .homepage-form .form-step.mp-reveal > .button,
    .homepage-form .form-step.mp-reveal > a.button                      { animation-delay: 300ms; }
    @keyframes mp-field-in {
        0%   { opacity: 0; transform: translateY(10px) scale(0.985); }
        70%  { opacity: 1; transform: translateY(-2px) scale(1.003); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Personage-blokken (step-7): speelse entry + exit zodat toevoegen en
       verwijderen niet als harde knip aanvoelt. */
    .homepage-form .character-set.mp-char-in {
        animation: mp-char-in 480ms cubic-bezier(0.34, 1.25, 0.5, 1);
        transform-origin: top center;
    }
    @keyframes mp-char-in {
        0%   { opacity: 0; transform: translateY(-12px) scale(0.96); max-height: 0; margin-top: 0; }
        30%  { opacity: 0.7; max-height: 200vh; margin-top: 1.5rem; }
        65%  { opacity: 1; transform: translateY(3px) scale(1.005); max-height: 200vh; }
        100% { opacity: 1; transform: translateY(0) scale(1); max-height: 200vh; }
    }
    .homepage-form .character-set.mp-char-out {
        animation: mp-char-out 360ms cubic-bezier(0.4, 0.0, 0.6, 1) forwards;
        transform-origin: top center;
        overflow: hidden;
        pointer-events: none;
    }
    @keyframes mp-char-out {
        0%   { opacity: 1; transform: scale(1); max-height: 200vh; margin-top: 1.5rem; }
        50%  { opacity: 0.5; transform: scale(0.97); }
        100% { opacity: 0; transform: scale(0.92) translateY(-8px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
    }
}

@media (max-width: 640px) {
    .homepage-form .mp-pills-wrapper { margin-bottom: 16px; }
    .homepage-form .mp-pills-title { margin-bottom: 8px; }
    .mp-completed-pills { gap: 8px; }
    .homepage-form .mp-pill {
        padding: 5px 12px 5px 4px;
        font-size: 12px;
        min-height: 44px;
        gap: 3px;
        font-weight: 600;
    }
    .homepage-form .mp-pill-icon-wrap { width: 30px; height: 30px; }
    .homepage-form .mp-pill-icon { width: 23px; height: 23px; }
    .homepage-form .mp-pill[data-icon-kind="style"] .mp-pill-icon-wrap { width: 38px; height: 30px; }
    .homepage-form .mp-pill[data-icon-kind="style"] .mp-pill-icon { width: 26px; height: 26px; }
    .homepage-form .mp-pill-label {
        max-width: 140px;
        padding-right: 0px;
    }
}

/* ==========================================================================
   UX fixes 2026-04-17
   Safe-area-inset support for iPhone notch/Dynamic Island landscape
   ========================================================================== */
@supports (padding: env(safe-area-inset-left)) {
    .navbar {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ==========================================================================
   UX fixes 2026-04-18 — zero-risk additive polish
   F4: :focus-visible states (only shown on keyboard focus, no mouse/touch impact)
   F5: prevent iOS zoom-in on AI-modal input (mobile-scoped)
   F6: :has() fallback via parallel class selectors for iOS 15.0-15.3
   F7: tap-target safety net on small screens (min-height only enlarges if needed)
   ========================================================================== */

/* F4 — keyboard focus feedback */
.homepage-form .custom-radio-block input[type="radio"]:focus-visible + .radio-content,
.homepage-form .character-type-selector .btn-check:focus-visible + .char-type-btn,
.homepage-form .button:focus-visible,
#submitBtn:focus-visible,
.homepage-form .generated-image-option input[type="radio"]:focus-visible + img,
.book-edit .custom-radio-block input[type="radio"]:focus-visible + span {
    outline: 3px solid #ff6600;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.25);
}

/* F5 — prevent iOS zoom-in on modal input (mobile-only override) */
@media (max-width: 768px) {
    .ai-modal-form input[type="text"] {
        font-size: 16px;
    }
}

/* F6 — :has() fallback via class-parallel selectors.
   In modern browsers these match together with the original :has() rules and
   produce identical output (no conflict). In iOS 15.0-15.3 they are the only
   path to the highlight, so selection feedback still works there. */
.homepage-form .generated-image-option.is-has-checked img {
    transform: scale(1.06);
}
.homepage-form .generated-image-option.is-has-checked {
    border: 2px solid #f60;
    box-shadow: rgb(56 56 56 / 36%) 0 3px 8px;
}
.book-edit .custom-radio-block.is-has-checked {
    border-color: #ff6600;
    background: #fcf7f1;
}

/* F6 — navbar hamburger state fallback: Bootstrap toggles #navbarNav.show,
   a small JS listener mirrors that to body.has-navbar-open. Rules below
   duplicate the existing :has(#navbarNav.show) styles from the responsive
   breakpoints so iOS 15.0-15.3 gets the hamburger animation too. */
@media only screen and (max-width: 1199px) {
    body.has-navbar-open .top-bar {
        transform: rotate(45deg);
        transform-origin: 10% 10%;
    }
    body.has-navbar-open .middle-bar {
        opacity: 0;
    }
    body.has-navbar-open .bottom-bar {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
        width: 26px;
    }
}
@media only screen and (max-width: 767px) {
    body.has-navbar-open .top-bar {
        transform-origin: 5% 10%;
    }
    body.has-navbar-open .bottom-bar {
        width: 24px;
    }
}

/* F7 — tap-target safety net on very small screens.
   min-height only enlarges blocks whose computed height is under 44px; blocks
   that are already larger (almost all on real devices) are unaffected. */
@media (max-width: 480px) {
    .homepage-form .custom-radio-block .radio-content {
        min-height: 44px;
    }
}

/* F8 — Loading state van de submit-button (pay-and-generate knop).
   Op mobile blijft :hover "plakken" na tap (sticky hover). De generieke
   .button:hover-regel zet background-color: transparent en color: #f60 —
   dat maakt de knop wit met oranje rand, en de witte spinner wordt
   onzichtbaar. Deze override forceert de oranje loading-state zolang de
   knop disabled is, ongeacht :hover-state. */
.homepage-form #submitBtn:disabled,
.homepage-form #submitBtn:disabled:hover,
.homepage-form #submitBtn[disabled],
.homepage-form #submitBtn[disabled]:hover {
    background-color: #f60 !important;
    background-image: linear-gradient(-180deg, #fd8130, #ff6600) !important;
    color: #fff !important;
    border: 2px solid #f60 !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px !important;
    opacity: 1 !important;
    cursor: wait !important;
}

/* F9 — op de laatste stap (step-10) is de extra min-height (100vh+200px)
   die de homepage-form sectie "vult" onnodig. Het content-blok is daar al
   vol genoeg, en de min-height zou een grote lege ruimte produceren tussen
   de beige wrapper en de reviews-sectie eronder. JS zet de class
   .mp-step10-active zodra step-10 zichtbaar wordt, dus resetten we de
   min-height hier. */
.homepage-form#new.mp-step10-active {
    min-height: 0 !important;
}
@media (max-width: 991px) {
    .homepage-form#new.mp-step10-active {
        min-height: 0 !important;
    }
}

/* F10 — Sticky mobile pay-button loading state.
   Dezelfde behandeling als #submitBtn: wanneer de sticky-knop disabled is,
   blijft de oranje background staan (voorkomt dat .button:hover op mobile
   de knop wit maakt) en de spinner is wit zodat hij zichtbaar is. */
.sticky-cta-bar #stickyCtaBtn:disabled,
.sticky-cta-bar #stickyCtaBtn:disabled:hover,
.sticky-cta-bar #stickyCtaBtn[disabled],
.sticky-cta-bar #stickyCtaBtn[disabled]:hover {
    background-color: #f60 !important;
    background-image: linear-gradient(-180deg, #fd8130, #ff6600) !important;
    color: #fff !important;
    border: 2px solid #f60 !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px !important;
    opacity: 1 !important;
    cursor: wait !important;
}
.sticky-cta-bar #stickyCtaBtn .spinner-border {
    color: #fff;
    margin: 0;
    height: 21px;
    width: 21px;
}

/* ================================
   Drafts: onvoltooide boek-creaties
   ================================ */
.drafts {
    margin-top: 35px;
    margin-bottom: 50px;
}

/* Shortcut-chip naast "Mijn kinderboeken" H1 — attention-getter die scrollt
   naar de drafts-sectie onderaan de pagina. Alleen zichtbaar als er drafts
   zijn (server-side gerenderd), dus geen risico op dode chip. */
.books-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 25px;
}
.books-heading-row h1 {
    margin-bottom: 0;
}
.drafts-shortcut-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff5ec;
    border: 1.5px solid #f60;
    color: #f60;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 14px 8px 12px;
    border-radius: 100px;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.drafts-shortcut-chip:hover,
.drafts-shortcut-chip:focus {
    background: #f60;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.25);
}
.drafts-shortcut-chip .material-symbols-outlined {
    font-size: 20px;
}
.drafts-shortcut-chip__arrow {
    font-size: 18px !important;
    transition: transform 0.2s ease;
}
.drafts-shortcut-chip:hover .drafts-shortcut-chip__arrow {
    transform: translateX(4px);
}
@media (max-width: 575px) {
    .drafts-shortcut-chip {
        font-size: 13px;
        padding: 6px 12px;
        gap: 6px;
    }
    .drafts-shortcut-chip .material-symbols-outlined {
        font-size: 18px;
    }
}

.drafts .drafts-heading {
    font-size: 38px;
    font-weight: 800;
}

.drafts .drafts-subtitle {
    font-size: 20px;
    font-weight: 300;
}

.drafts .wrapper {
    background: #fff;
    border-radius: 48px;
    padding: 30px;
}

/* .draft-item matcht qua styling 1:1 met .books .item — zelfde boek-cover
   met 3D rotate perspective, centered h5, primary + button2 actions. */
.draft-item {
    margin-bottom: 25px;
    border-radius: 20px;
    padding: 15px;
    background-color: #faf8f0;
    transition: box-shadow 0.3s ease;
}
.draft-item.draft-dismissing {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.draft-cover-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 0 14px;
    display: block;
    cursor: pointer;
    text-decoration: none;
}
.draft-cover-wrap:hover {
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.18);
}
.draft-cover-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
}
.draft-item:hover .draft-cover-wrap img {
    transform: scale(1.03);
}
.draft-cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #fff5ec 0%, #fdd6b9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.draft-cover-placeholder .material-symbols-outlined {
    font-size: 72px;
    color: #f60;
    opacity: 0.55;
}

/* Status-badge op de cover */
.draft-status-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    background: #fff;
    color: #f60;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 5px 10px;
    border-radius: 100px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.draft-status-badge--canceled {
    color: #666;
}

/* Titel met naam + compacte subinfo eronder */
.draft-item h5 {
    margin: 0 0 14px;
    line-height: 1.3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.draft-card-title-name {
    font-size: 18px;
    font-weight: 800;
    color: #333;
    word-break: break-word;
}
.draft-card-title-sub {
    font-size: 13px;
    font-weight: 400;
    color: #777;
    line-height: 1.35;
    word-break: break-word;
}

/* Buttons binnen .draft-item volgen .books .item patroon */
.draft-item .button {
    font-size: 16px;
    padding: 8px 20px;
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.draft-item .button2 {
    font-weight: 600;
    padding: 7px 20px;
    font-size: 15px;
    position: relative;
}
.draft-item .button span {
    font-size: 18px;
    margin-right: 8px;
    line-height: 1;
}
.draft-item .button2 span.material-symbols-outlined {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;
}
.draft-item .book-actions {
    margin-top: 2px;
}
.draft-item .draft-dismiss:hover {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}
.draft-item .draft-dismiss:disabled {
    opacity: 0.5;
    cursor: wait;
}
/* Zelfde stijl als .books .item .availability-notice ("Nog X weken beschikbaar") */
.draft-item .availability-notice {
    font-size: 12px;
    color: #333;
    opacity: 0.35;
    text-align: center;
    margin-top: 9px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.draft-item .availability-notice .material-symbols-outlined {
    font-size: 14px;
}

/* Modal: alle details van een draft — speels, maar wel leesbaar.
   Compacte header (geen half-foto overlay), karakter-strip, lange teksten
   krijgen volle breedte, en een CTA in de footer die aanzet tot klikken. */
.draft-details-modal .modal-content {
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    background: #faf8f0;
}
.draft-details-header {
    background: #fff;
    border-bottom: 1px solid #fdd6b9;
    padding: 20px 26px;
    gap: 10px;
    align-items: flex-start;
}
.draft-details-header__text {
    flex: 1;
    min-width: 0;
}
.draft-details-header .modal-title {
    font-size: 26px;
    font-weight: 800;
    color: #333;
    margin: 6px 0 2px;
    line-height: 1.2;
}
.draft-details-header__sub {
    margin: 0;
    color: #666;
    font-size: 14px;
}
.draft-details-header .draft-status-badge {
    position: static;
    display: inline-block;
    border: 1.5px solid #f60;
    box-shadow: none;
    margin: 0;
}
.draft-details-body {
    padding: 24px 26px;
}
.draft-details-section {
    padding: 0 0 28px;
    margin: 0;
}
.draft-details-section:last-child {
    padding-bottom: 0;
}
.draft-details-section + .draft-details-section {
    padding-top: 28px;
    border-top: 1px solid #f0e3cc;
}
.draft-details-section__title {
    font-size: 20px;
    font-weight: 800;
    color: #f60;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.draft-details-section__title .material-symbols-outlined {
    font-size: 26px;
}

/* Chips voor kind-info */
.draft-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.draft-chip-grid--story {
    margin-top: 12px;
}
.draft-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #f0e3cc;
    border-radius: 14px;
    padding: 12px 14px;
}
.draft-chip .material-symbols-outlined {
    color: #f60;
    font-size: 24px;
    flex-shrink: 0;
}
.draft-chip__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.draft-chip__label {
    color: #888;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.draft-chip__value {
    color: #333;
    font-size: 15px;
    font-weight: 700;
    word-break: break-word;
    line-height: 1.35;
}

/* Tiles met 3D-iconen (thema, moraal, onderwerp) */
.draft-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.draft-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 2px solid #fdd6b9;
    border-radius: 16px;
    padding: 14px 16px;
}
.draft-tile__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff5ec;
    border-radius: 12px;
    overflow: hidden;
}
.draft-tile__icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
.draft-tile__icon--placeholder .material-symbols-outlined {
    color: #f60;
    font-size: 28px;
}
.draft-tile__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.draft-tile__label {
    color: #888;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.draft-tile__value {
    color: #333;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    word-break: break-word;
}

/* Personages-strip: alle characters met foto, naam, leeftijd, relatie */
.draft-characters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.draft-character {
    background: #fff;
    border: 2px solid #fdd6b9;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.draft-character__photo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff5ec;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fdd6b9;
}
.draft-character__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.draft-character__photo .material-symbols-outlined {
    color: #f60;
    font-size: 42px;
}
.draft-character__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: 100%;
}
.draft-character__name {
    font-size: 15px;
    font-weight: 800;
    color: #333;
    line-height: 1.25;
    word-break: break-word;
}
.draft-character__meta {
    font-size: 12px;
    color: #666;
    line-height: 1.3;
}
.draft-character__relation {
    font-size: 11px;
    color: #f60;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

/* Tekstblokken (volle breedte) voor lange teksten zoals voorwoord */
.draft-textblocks {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.draft-textblock {
    background: #fff;
    border: 2px solid #fdd6b9;
    border-radius: 16px;
    padding: 16px 18px;
}
.draft-textblock__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.draft-textblock__header .material-symbols-outlined {
    color: #f60;
    font-size: 22px;
}
.draft-textblock__label {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.draft-textblock__value {
    margin: 0;
    color: #333;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Vormgeving: illustratiestijl + lettertype naast elkaar */
.draft-design-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.draft-illu-card,
.draft-font-card {
    background: #fff;
    border: 2px solid #fdd6b9;
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.draft-illu-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
}
.draft-illu-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.draft-illu-card__text,
.draft-font-card__text {
    display: flex;
    flex-direction: column;
}
.draft-illu-card__label,
.draft-font-card__label {
    color: #888;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.draft-illu-card__text strong,
.draft-font-card__text strong {
    color: #333;
    font-size: 16px;
    font-weight: 800;
}
.draft-font-card__preview {
    background: #fff5ec;
    border-radius: 10px;
    padding: 18px 14px;
    font-size: 38px;
    font-weight: 600;
    color: #f60;
    text-align: center;
    line-height: 1.1;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.draft-details-section--meta .draft-chip-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.draft-details-modal .modal-footer.draft-details-footer {
    border-top: 1px solid #f0e8d6;
    padding: 12px 32px;
    gap: 18px;
    background: #fff;
    justify-content: space-between;
    flex-wrap: wrap;
}
.draft-details-modal .modal-footer.draft-details-footer .button {
    margin-bottom: 0 !important;
}
.draft-details-footer__price {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.draft-details-footer__price-label {
    font-size: 10px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.draft-details-footer__price-value {
    font-size: 21px;
    font-weight: 800;
    color: #20a165;
}
.draft-details-footer__buttons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.draft-details-footer__cta {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.draft-details-footer__cta .material-symbols-outlined {
    font-size: 22px;
}

/* Mobile: de hele drafts-sectie + modal uitlijnen voor kleine schermen */
@media (max-width: 767px) {
    /* Sectie-heading */
    .drafts { margin-top: 30px; }
    .drafts .drafts-heading { font-size: 28px; }
    .drafts .drafts-subtitle { font-size: 16px; }
    .drafts .wrapper {
        padding: 20px;
        border-radius: 32px;
    }

    /* Modal */
    .draft-details-modal .modal-dialog {
        margin: 8px;
    }
    .draft-details-header { padding: 8px 20px; }
    .draft-details-header .btn-close { margin-top: 10px; }
    .draft-details-header .modal-title { font-size: 22px; }
    .draft-details-body { padding: 18px 20px; }
    .draft-details-section { margin-bottom: 20px; }
    .draft-details-section__title { font-size: 18px; }

    /* Personages-strip: 2 per rij op mobile */
    .draft-characters {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .draft-character { padding: 10px; }
    .draft-character__photo { width: 64px; height: 64px; }

    /* Tiles (thema/onderwerp/moraal) en design-grid (illu/font) stacken */
    .draft-tile-grid,
    .draft-design-grid,
    .draft-chip-grid {
        grid-template-columns: 1fr;
    }
    .draft-font-card__preview { font-size: 28px; min-height: 72px; }

    /* Footer: verticaal stacken — prijs bovenaan, buttons volle breedte */
    .draft-details-modal .modal-footer.draft-details-footer {
        padding: 8px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .draft-details-footer__price {
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        gap: 6px;
        margin-bottom: 0px;
    }
    .draft-details-footer__price-label {
        font-size: 12px;
    }
    .draft-details-footer__price-value {
        font-size: 20px;
    }
    .draft-details-footer__buttons {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    .draft-details-modal .modal-footer.draft-details-footer .button,
    .draft-details-modal .modal-footer.draft-details-footer .draft-details-footer__cta {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 12px 20px !important;
        white-space: normal;
    }
}

/* Header: draft-badge op account-icoon — matcht .cart_items-styling */
.navbar .menu2 .draft-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #fe6500;
    height: 18px;
    min-width: 18px;
    padding: 0 4px;
    border-radius: 100px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    font-size: 13px;
    font-weight: 700;
    box-sizing: border-box;
}

@media only screen and (max-width: 1199px) {
    .navbar .menu2 .draft-badge {
        top: 2px;
    }
}

@media only screen and (max-width: 767px) {
    .navbar .menu2 .draft-badge {
        top: -2px;
        height: 16px;
        min-width: 16px;
        line-height: 16px;
        font-size: 12px;
        padding: 0 3px;
    }
}

.navbar .dropdown-item:has(.badge-inline) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.navbar .dropdown-item .badge-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fe6500;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 100px;
    line-height: 1;
    box-sizing: border-box;
}

/* ==========================================================================
   Book wait view — toont na een edit terwijl PDF in achtergrond regenereert
   ========================================================================== */
.book-wait-view {
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}
.book-wait-view__inner {
    max-width: 540px;
    text-align: center;
}
.book-wait-view__spinner-wrap {
    margin-bottom: 36px;
    position: relative;
    display: inline-block;
}
.book-wait-view__spinner {
    width: 72px;
    height: 72px;
    border: 5px solid #f4e3c8;
    border-top-color: #ff6600;
    border-radius: 50%;
    animation: bookWaitSpin 1.1s linear infinite;
}
.book-wait-view__sparkle {
    position: absolute;
    font-size: 22px;
    line-height: 0;
    color: #ff6600;
    animation: bookWaitFloat 2.4s ease-in-out infinite;
}
/* De ster is een inline SVG en geen emoji: een emoji komt uit het kleurenlettertype van het
   besturingssysteem en negeert color, dus die bleef geel. De maat volgt de font-size hierboven. */
.book-wait-view__sparkle svg {
    display: block;
    width: 1em;
    height: 1em;
}
.book-wait-view__sparkle--top {
    top: -16px;
    right: -22px;
}
.book-wait-view__sparkle--bottom {
    bottom: -12px;
    left: -22px;
    font-size: 18px;
    animation-delay: 0.6s;
}
.book-wait-view__heading {
    font-size: 1.85rem;
    margin-bottom: 5px;
    color: #333;
    font-weight: 800;
    animation: bookWaitHeadingPulse 2.4s ease-in-out infinite;
    transform-origin: center center;
}
.book-wait-view__body {
    color: #333;
    line-height: 1.6;
    font-size: 1.05rem;
    animation: bookWaitBodyFade 3.6s ease-in-out infinite;
}
.book-wait-view__error {
    display: none;
    margin-top: 32px;
}
.book-wait-view__error-text {
    color: #333;
    line-height: 1.5;
    margin-bottom: 5px;
}
.book-wait-view__noscript-text {
    color: #333;
    line-height: 1.5;
    margin-top: 32px;
}
.book-wait-view__retry {
    display: inline-block;
    padding: 12px 28px;
    background: #ff6600;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.25);
}
.book-wait-view__retry:hover {
    background: #e65c00;
    color: #fff;
}
@keyframes bookWaitSpin {
    to { transform: rotate(360deg); }
}
@keyframes bookWaitFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.9; }
    50%      { transform: translateY(-6px) scale(1.15); opacity: 1; }
}
@keyframes bookWaitHeadingPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}
@keyframes bookWaitBodyFade {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────
   Homepage-form: section title spacing + occasion-tegels
   Occasion tegels staan ONDER de leeftijdstegels in dezelfde wrapper
   (één gecombineerd blok). Andere pastel-rotatie zodat ze visueel
   onderscheidbaar zijn van de leeftijdstegels.
   ───────────────────────────────────────────────────────────────────── */

/* Extra ademruimte boven section-titles (h4) binnen homepage-form */
.homepage-form .form-section-title-spaced {
    margin-top: 30px;
    margin-bottom: 5px;
}

/* Voorbeeldverhaal: ingeklapt na ~2 regels, klik "Lees verder" om te expanden.
   SEO blijft intact — volledige tekst staat in DOM. */
.theme-content .theme-story-snippet .theme-story-snippet-text.is-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
}

.theme-content .theme-story-snippet .theme-story-snippet-text.is-collapsed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2em;
    background: linear-gradient(180deg, rgba(255, 244, 230, 0) 0%, #fff4e6 90%);
    pointer-events: none;
}

.theme-content .theme-story-snippet .theme-story-snippet-toggle {
    margin-top: 12px;
    background: transparent;
    border: none;
    color: #ff6600;
    font-weight: 700;
    font-size: 15px;
    padding: 4px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.theme-content .theme-story-snippet .theme-story-snippet-toggle:hover {
    color: #d4500a;
}

.theme-content .theme-story-snippet .theme-story-snippet-toggle-icon {
    display: inline-block;
    transition: transform 0.25s ease;
    line-height: 1;
}

.theme-content .theme-story-snippet .theme-story-snippet-toggle[aria-expanded="true"] .theme-story-snippet-toggle-icon {
    transform: rotate(180deg);
}

/* ============================================================
   AI Voorwoord-helper (new.php step-9)
   ============================================================ */

/* Trigger-knop naast label */
.foreword-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.foreword-label-row label {
    margin-bottom: 0;
}
.ai-foreword-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #fff5ec 0%, #ffe8d4 100%);
    color: #f60;
    border: 1.5px solid #fdd6b9;
    border-radius: 100px;
    padding: 6px 14px 6px 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    white-space: nowrap;
}
.ai-foreword-trigger:hover {
    background: linear-gradient(135deg, #ffe8d4 0%, #ffd6b3 100%);
    border-color: #f60;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.18);
}
.ai-foreword-trigger:active {
    transform: translateY(0);
}
.ai-foreword-trigger .material-symbols-outlined {
    font-size: 18px;
    color: #f60;
}

/* Modal overlay */
#foreword-ai-modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 10, 0.55);
    z-index: 2050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 20px;
    overflow-y: auto;
}
#foreword-ai-modal.visible {
    opacity: 1;
    visibility: visible;
}

.foreword-ai-content {
    background: #faf8f0;
    border-radius: 22px;
    width: 100%;
    max-width: 500px;
    padding: 32px 28px 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    position: relative;
    transform: translateY(20px) scale(0.97);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
#foreword-ai-modal.visible .foreword-ai-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.foreword-ai-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    z-index: 2;
}
.foreword-ai-close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #000;
}
.foreword-ai-close .material-symbols-outlined {
    font-size: 22px;
}

/* Views: switch via state-class op #foreword-ai-modal */
.foreword-ai-view {
    display: none;
    animation: forewordAiViewIn 0.3s ease-out;
}
#foreword-ai-modal.foreword-ai-state-questions .foreword-ai-view-questions,
#foreword-ai-modal.foreword-ai-state-loading   .foreword-ai-view-loading,
#foreword-ai-modal.foreword-ai-state-results   .foreword-ai-view-results {
    display: block;
}
@keyframes forewordAiViewIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.foreword-ai-content h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #f60;
}
.foreword-ai-content h3 .material-symbols-outlined {
    font-size: 26px;
}
.foreword-ai-subtitle {
    color: #333;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 22px;
}

/* Info-banner in modal. Selector met #foreword-ai-modal om de bestaande
   .homepage-form .notification (specificity 0,2,0) consequent te overrulen
   en margin/padding/alignment voor modal-context te zetten. */
#foreword-ai-modal .foreword-ai-notice {
    background: #fce9d7;
    border-radius: 16px;
    padding: 10px 16px;
    font-size: 14px;
    margin: 0 0 18px;
    color: #ff6600;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
#foreword-ai-modal .foreword-ai-notice .material-symbols-outlined {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    margin-right: 0;
}
#foreword-ai-modal .foreword-ai-notice > div {
    flex: 1;
    min-width: 0;
}

/* Questions view */
.foreword-ai-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.foreword-ai-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.foreword-ai-row label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}
.foreword-ai-optional-tag {
    font-weight: 300;
    color: #888;
    font-size: 14px;
}
/* Ontvanger-picker (alleen zichtbaar bij 2+ mensen-personages) */
.foreword-ai-recipients {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.foreword-ai-recipient-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.foreword-ai-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 12px;
    border-radius: 100px;
    border: 2px solid #fce9d7;
    background: #fff;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    user-select: none;
}
.foreword-ai-recipient-chip.active {
    border-color: #f60;
    background: #fff5ec;
    color: #f60;
}
.foreword-ai-recipient-chip .chip-check {
    font-size: 16px;
}
.foreword-ai-recipient-chip:not(.active) .chip-check {
    display: none;
}
.foreword-ai-row input[type="text"],
.foreword-ai-row textarea {
    width: 100%;
    padding: 6px 15px;
    border: 2px solid #fce9d7;
    border-radius: 20px;
    font-size: 16px;
    background: #fff;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1.4;
    box-sizing: border-box;
    color: #333;
}
.foreword-ai-row input[type="text"] {
    height: 50px;
}
.foreword-ai-row textarea {
    resize: vertical;
    min-height: 72px;
    padding: 10px 15px;
    line-height: 1.5;
}
.foreword-ai-row input[type="text"]:focus,
.foreword-ai-row textarea:focus {
    outline: none;
    border-color: #fdd6b9;
    box-shadow: none;
}
.foreword-ai-row input[type="text"]::placeholder,
.foreword-ai-row textarea::placeholder {
    color: #ccc;
}
.foreword-ai-error {
    color: #dc3545;
    font-size: 13px;
    margin: 4px 0 0;
    min-height: 0;
    display: none;
}
.foreword-ai-error.visible {
    display: block;
}
.foreword-ai-generate-btn {
    width: 100%;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
}
.foreword-ai-generate-btn .material-symbols-outlined {
    font-size: 20px;
}

/* Loading view */
.foreword-ai-view-loading {
    text-align: center;
    padding: 30px 0 20px;
}
.foreword-ai-view-loading h3 {
    justify-content: center;
    margin-top: 18px;
}
.foreword-ai-loading-stars {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.foreword-ai-loading-stars .material-symbols-outlined {
    font-size: 32px;
    color: #f60;
    animation: forewordSparkle 1.4s ease-in-out infinite;
}
.foreword-ai-loading-stars .material-symbols-outlined:nth-child(2) {
    animation-delay: 0.2s;
    font-size: 40px;
}
.foreword-ai-loading-stars .material-symbols-outlined:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes forewordSparkle {
    0%, 100% { opacity: 0.35; transform: scale(0.85) rotate(0deg); }
    50%      { opacity: 1;    transform: scale(1.1)  rotate(15deg); }
}

/* Results view */
.foreword-ai-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 16px;
}
.foreword-option-card {
    background: #fff;
    border: 2px solid #fce9d7;
    border-radius: 14px;
    padding: 14px 16px 12px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.foreword-option-card:hover {
    border-color: #fdd6b9;
    box-shadow: 0 6px 18px rgba(255, 102, 0, 0.08);
    transform: translateY(-1px);
}
.foreword-option-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff5ec;
    color: #f60;
    border-radius: 100px;
    padding: 3px 10px 3px 7px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.foreword-option-badge .material-symbols-outlined {
    font-size: 15px;
}
.foreword-option-text {
    font-size: 15px;
    line-height: 1.55;
    color: #2d2d2d;
    white-space: pre-line;
    margin-bottom: 0;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}
.foreword-option-text + .foreword-option-choose {
    margin-top: 12px;
}
.foreword-option-choose {
    width: 100%;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.foreword-option-choose .material-symbols-outlined {
    font-size: 18px;
}
.foreword-ai-retry {
    display: block;
    text-align: center;
    margin-top: -5px;
    color: #ff6602;
    font-size: 14px;
}
.foreword-ai-retry:hover {
    color: #f60;
}

/* Flash effect op textarea als optie gekozen wordt */
.foreword-filled-flash {
    animation: forewordFilledFlash 1.2s ease-out;
}
@keyframes forewordFilledFlash {
    0%   { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.35); border-color: #f60; }
    100% { box-shadow: 0 0 0 18px rgba(255, 102, 0, 0); border-color: #fce9d7; }
}

/* Mobile tweaks */
@media (max-width: 560px) {
    .foreword-ai-content {
        padding: 26px 20px 22px;
        border-radius: 18px;
    }
    .foreword-ai-content h3 {
        font-size: 19px;
    }
    .foreword-option-text {
        max-height: 140px;
    }
}

/* === Personage: Hoofdrol-toggle (huisstijl-oranje, groter, vriendelijke UI) === */
.character-main-toggle {
    padding-left: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: .7rem;
    row-gap: .2rem;
    margin-top: .35rem;
    margin-bottom: 1rem;
}
.character-main-toggle .form-check-input {
    float: none;
    margin: 0;
    flex: 0 0 auto;
    width: 3.25em;
    height: 1.75em;
    cursor: pointer;
    background-color: #ece4d8;
    border-color: #ddd2c2;
    box-shadow: none;
    transition: background-color .25s ease, border-color .25s ease, background-position .2s ease-in-out;
}
.character-main-toggle .form-check-input:checked {
    background-color: #ff6600;
    border-color: #ff6600;
}
.character-main-toggle .form-check-input:focus {
    border-color: #ff6600;
    box-shadow: 0 0 0 .25rem rgba(255, 102, 0, .25);
}
.character-main-toggle .form-check-label {
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    color: #333;
}
.character-main-toggle .form-text {
    flex-basis: 100%;
    width: 100%;
    margin: 0;
    color: #b7ac9c;
}

/* === Subtiel, consistent "(optioneel)"-label bij optionele velden === */
.optional-hint {
    font-size: .76em;
    font-weight: 400;
    color: #bcb1a1;
    letter-spacing: .01em;
}

/* === Toggle 'Hoofdrol' (.char_is_main) in merk-oranje i.p.v. Bootstrap-blauw, incl. focus === */
.char_is_main:checked { background-color: #ff6600; border-color: #ff6600; }
.char_is_main:focus { border-color: #ff6600; box-shadow: 0 0 0 .2rem rgba(255, 102, 0, .25); }
.char_is_main:focus:not(:checked) { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); }

/* Hoofdrol-toggle: label op eigen regel, schakelaar daaronder en links uitgelijnd (niet ernaast/zwevend) */
.character-main-toggle { display: block; }
.character-main-toggle > label { display: block; margin-bottom: .4rem; }
.character-main-toggle .form-check { padding-left: 0; min-height: auto; margin-bottom: 0; }
.character-main-toggle .form-switch .form-check-input { margin-left: 0; }

/* Referral tegoed-balk: groene versie van .notification, volle breedte, mobiel */
.ref-credit-bar, .page.referral .ref-credit { display:flex; align-items:center; gap:14px; width:100%; box-sizing:border-box; background:#f8f0e2; border-radius:28px; padding:25px 50px; margin:0 0 15px; line-height:normal; color:#ff6602; }
.page.referral .ref-credit { max-width:none; margin:0 auto 20px; }
.ref-credit-bar .material-symbols-outlined, .page.referral .ref-credit .material-symbols-outlined { color:#ff6602; font-size:30px; flex:0 0 auto; margin-top:0; }
.ref-credit-bar__txt, .page.referral .ref-credit__txt { flex:1 1 auto; min-width:0; text-align:left; }
.ref-credit-bar__exp, .page.referral .ref-credit__exp { display:inline-block; font-size:.9em; font-weight:500; color:#999; }
.ref-credit-bar .button, .page.referral .ref-credit__cta { flex:0 0 auto; white-space:nowrap; padding:9px 22px !important; font-size:15px !important; font-weight:600 !important; color:#fff !important; border:none !important; background:#ff6600 !important; background-image:none !important; margin:0px; }
.ref-credit-bar .button:hover, .page.referral .ref-credit__cta:hover { background:#e65c00 !important; background-image:none !important; color:#fff !important; box-shadow:0 4px 12px rgba(255,102,0,.28) !important; }
@media (max-width:640px){ .ref-credit-bar, .page.referral .ref-credit { flex-wrap:wrap; gap:10px 12px; padding:20px; } .ref-credit-bar__txt, .page.referral .ref-credit__txt { flex:1 1 0; } .ref-credit-bar .button, .page.referral .ref-credit__cta { flex:1 1 100%; width:100%; max-width:none; text-align:center; } }
/* ===== Referral cadeau-banner + tegoed-inwissel-blok (new.php/sequel.php) ===== */
.referral-gift-banner { margin:15px 0 18px; padding:14px 18px; border-radius:20px; background:#e4ebe7; border:2px solid #cbdcd2; }
.referral-gift-banner__title { font-weight:600; font-size:18px; color:#333; }
.referral-gift-banner__body { margin-top:5px; font-size:17px; color:#333; }
.referral-gift-banner__value { margin-top:3px; font-size:17px; color:#ff6602; font-weight:600; }
.referral-redeem-banner { margin:15px 0 18px; padding:14px 18px; border-radius:20px; background:#e4ebe7; border:2px solid #cbdcd2; color:#333; }
.referral-redeem-banner__title { font-weight:600; font-size:18px; color:#333; }
.referral-redeem-banner__body { margin-top:6px; font-size:17px; color:#333; }
.referral-redeem-banner__value { margin-top:3px; font-size:17px; color:#ff6602; font-weight:600; }

html.mp-redeem-free .price-display-discount, html.mp-redeem-free .payment-wrapper, html.mp-redeem-free .disclaimer, html.mp-redeem-free .mp-pm { display:none !important; }
/* ===== Referral hub (referral.php) ===== */
.page.referral { padding-bottom:40px; }
.page.referral .ref-h1 { text-align:center; margin-bottom:14px; }
.page.referral .ref-lead { text-align:center; font-size:20px; font-weight:300; }
.page.referral .ref-credit { display:flex; align-items:center; gap:14px; width:100%; box-sizing:border-box; margin:0 auto 20px; padding:25px 50px; background:#f8f0e2; border-radius:28px; color:#ff6602; } @media (max-width:640px){ .page.referral .ref-credit{ flex-wrap:wrap; gap:10px 12px; padding:20px; } .page.referral .ref-credit__txt{ flex:1 1 0; } .page.referral .ref-credit__cta{ flex:1 1 100%; text-align:center; } }
.page.referral .ref-credit .material-symbols-outlined { font-size:30px; color:#ff6602; flex:0 0 auto; }
.page.referral .ref-credit__txt { flex:1 1 auto; color:#ff6602; line-height:inherit; text-align:left; }
.page.referral .ref-credit__exp { color:#999; font-size:.9em; }
.page.referral .ref-card { margin:26px auto 50px; padding:36px 40px; }
.page.referral .ref-section-title { text-align:center; font-size:28px; font-weight:800; color:#ff6600; margin:0 0 30px; }
.page.referral .ref-share-label { display:block; font-weight:bold; text-align:center; margin-bottom:16px; font-size:1.05em; }
/* stappenplan (breder, volledige zinnen) */
.page.referral .ref-howto { display:flex; align-items:flex-start; justify-content:center; max-width:980px; margin:0 auto; }
.page.referral .ref-step { flex:0 1 300px; text-align:center; padding:0 10px; }
.page.referral .ref-step__circle { width:80px; height:80px; border-radius:50%; background:#fff3e8; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(255,102,0,.15); }
.page.referral .ref-step__circle .material-symbols-outlined { font-size:38px; color:#ff6600; font-variation-settings:'wght' 500; }
.page.referral .ref-step__label { font-weight:500; margin-top:16px; font-size:1em; color:#1f1f1d; line-height:1.5; }
.page.referral .ref-step__line { flex:1 1 auto; height:0; margin-top:40px; border-top:3px dotted #ffb27a; min-width:24px; max-width:120px; }
/* checklist: links uitgelijnd, even breed als hoe het werkt */
.page.referral .ref-rules { list-style:none; padding:28px 0 0; margin:32px auto 0; max-width:980px; border-top:1px solid #f0e6da; display:flex; flex-direction:column; gap:13px; }
.page.referral .ref-rules li { display:flex; align-items:flex-start; gap:11px; text-align:left; line-height:1.5; font-size:1.02em; }
.page.referral .ref-rules li .material-symbols-outlined { color:#2c8a3d; font-size:23px; flex:0 0 auto; margin-top:1px; }
@media (min-width:681px) { .page.referral .ref-step__label { min-height:4.5em; } }
@media (max-width:680px) {
    .page.referral .ref-card { padding:26px 20px; }
    .page.referral .ref-howto { flex-direction:column; align-items:center; }
    .page.referral .ref-step { flex:0 0 auto; width:100%; max-width:320px; }
    .page.referral .ref-step__label { min-height:0; }
    .page.referral .ref-step__line { width:0; height:24px; min-width:0; max-width:none; margin:6px auto; border-top:none; border-left:3px dotted #ffb27a; }
    .page.referral .ref-credit { flex-direction:column; text-align:center; }
    .page.referral .ref-credit__txt { text-align:center; }
}

/* ===== Referral share-widget (partials/referral_share.php) ===== */
.referral-share .rs-channels { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.referral-share .refshare-chan { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-width:200px; text-align:center; margin:0; }
.referral-share .refshare-chan svg { flex:0 0 auto; }
.referral-share .rs-copybtn { background:#5b6470 !important; background-image:none !important; border-color:#5b6470 !important; color:#ffffff !important; cursor:pointer; }
.referral-share .refshare-status { display:none; margin-top:14px; text-align:center; }
.referral-share .refshare-status.is-copied { display:inline-flex; align-items:center; gap:7px; background:#e7f6ec; color:#2c8a3d; padding:7px 16px; border-radius:999px; font-weight:bold; font-size:0.95em; }
.referral-share .refshare-status svg { fill:#2c8a3d; flex:0 0 auto; }
@media (max-width:560px) {
    .referral-share .rs-channels { flex-direction:column; align-items:stretch; }
    .referral-share .refshare-chan { width:100%; }
}

/* ===== Referral hoe-het-werkt (partials/referral_howitworks.php) ===== */
.rr-hiw .rr-hiw-title { text-align:center; font-size:28px; font-weight:800; color:#ff6600; margin:0 0 30px; }
.rr-hiw .rr-hiw-steps { display:flex; align-items:flex-start; justify-content:center; max-width:980px; margin:0 auto; }
.rr-hiw .rr-hiw-step { flex:0 1 300px; text-align:center; padding:0 10px; }
.rr-hiw .rr-hiw-circle { width:80px; height:80px; border-radius:50%; background:#fff3e8; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(255,102,0,.15); }
.rr-hiw .rr-hiw-circle .material-symbols-outlined { font-size:38px; color:#ff6600; font-variation-settings:'wght' 500; }
.rr-hiw .rr-hiw-label { font-weight:500; margin-top:16px; font-size:16px; color:#1f1f1d; line-height:1.5; }
.rr-hiw .rr-hiw-line { flex:1 1 auto; height:0; margin-top:40px; border-top:3px dotted #ffb27a; min-width:24px; max-width:120px; }
.rr-hiw .rr-hiw-rules { list-style:none; padding:28px 0 0; margin:32px auto 0; max-width:980px; border-top:1px solid #f0e6da; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:14px 44px; }
.rr-hiw .rr-hiw-rules li { display:flex; align-items:flex-start; gap:11px; text-align:left; line-height:1.5; font-size:16px; flex:0 1 auto; max-width:440px; }
.rr-hiw .rr-hiw-rules li .material-symbols-outlined { color:#2c8a3d; font-size:23px; flex:0 0 auto; margin-top:1px; }
@media (min-width:681px) { .rr-hiw .rr-hiw-label { min-height:4.5em; } }
@media (max-width:680px) {
    .rr-hiw .rr-hiw-title { font-size:22px; margin:0 0 24px; }
    .rr-hiw .rr-hiw-steps { flex-direction:column; align-items:center; }
    .rr-hiw .rr-hiw-step { flex:0 0 auto; width:100%; max-width:320px; padding:0; }
    .rr-hiw .rr-hiw-circle { width:68px; height:68px; }
    .rr-hiw .rr-hiw-circle .material-symbols-outlined { font-size:32px; }
    .rr-hiw .rr-hiw-label { min-height:0; margin-top:12px; }
    .rr-hiw .rr-hiw-line { flex:0 0 auto; width:0; height:22px; min-width:0; max-width:none; margin:12px auto; border-top:none; border-left:3px dotted #ffb27a; }
    .rr-hiw .rr-hiw-rules { flex-direction:column; align-items:flex-start; gap:13px; padding-top:22px; margin-top:24px; }
    .rr-hiw .rr-hiw-rules li { font-size:16px; max-width:none; }
}

/* ===== Referral CTA-blok (partials/referral_cta.php) ===== */
.rr-cta .rr-cta-title { font-size:28px; font-weight:800; color:#1f1f1d; margin:0 0 12px; text-align:center; }
.rr-cta .rr-cta-lead { font-size:18px; margin:0 auto 24px; line-height:1.55; max-width:860px; text-align:center; }
.rr-cta .rr-cta-note { font-size:18px; max-width:860px; margin:0 auto 26px; line-height:1.55; text-align:center; }
@media (max-width:680px) {
    .rr-cta .rr-cta-title { font-size:21px; line-height:1.3; margin:0 0 10px; }
    .rr-cta .rr-cta-lead { font-size:16px; margin-bottom:18px; }
    .rr-cta .rr-cta-note { font-size:16px; margin-bottom:20px; }
}

/* ===== Referral /r/ landing (referral_landing.php) ===== */
.referral-reveal-hero .rr-hero-value { font-size:20px; font-weight:600; max-width:570px; margin:-4px 0 16px; } @media only screen and (max-width: 767px){ .referral-reveal-hero .rr-hero-value { font-size:18px; } } .referral-reveal-hero .rr-hero-pill { display:inline-block; background:#e7f6ee; color:#127a45; border-radius:999px; padding:5px 16px; line-height:1.5; } .referral-reveal-hero .rr-hero-value .rr-hero-free { font-weight:700; }
.referral-reveal-hero .rr-hero-value .original-price { color:#888; opacity:1; text-decoration:line-through; }
/* hoe het werkt: prijs-spans mogen NIET de oranje nummer-badge-stijl erven; doorgestreept (rood) -> groen gratis */
.referral-reveal-howto p .original-price, .referral-reveal-howto p .rr-free { display:inline !important; background:none !important; background-image:none !important; border:0 !important; width:auto !important; height:auto !important; min-width:0 !important; border-radius:0 !important; margin:0 !important; padding:0 !important; flex-shrink:initial !important; vertical-align:baseline; }
.referral-reveal-howto p .original-price { color:#888 !important; opacity:1; text-decoration:line-through; font-size:18px !important; }
.referral-reveal-howto p .rr-free { display:inline-block !important; background:#e7f6ee !important; color:#127a45 !important; font-weight:700; font-size:18px !important; padding:0 9px !important; border-radius:999px !important; line-height:1.55; }
/* leeftijd-tegels als links */
.referral-reveal-ages .rr-age-link { display:block; text-decoration:none; color:inherit; }
.referral-reveal-ages .rr-age-link:hover, .referral-reveal-ages .rr-age-link:focus { text-decoration:none; }
.referral-reveal-ages .rr-age-link:focus-visible .radio-content { border-color:#f60 !important; outline:2px solid #f60; outline-offset:2px; }
/* USP gratis: doorgestreepte prijs + groene Gratis, nette inline-opmaak (geen flex-collapse) */
.referral-reveal-usp .usp-box p { display:block; position:relative; padding-left:32px; } .referral-reveal-usp .usp-box p > .material-symbols-outlined { position:absolute; left:0; top:1px; margin:0 !important; } .referral-reveal-usp .rr-usp-price { display:inline; white-space:nowrap; }
.referral-reveal-usp .rr-usp-price .original-price { color:#888 !important; opacity:1; margin:0 0 0 0px !important; text-decoration:line-through; font-weight:500; }
.referral-reveal-usp .rr-usp-price .rr-usp-free { display:inline-block; background:#e7f6ee; color:#127a45 !important; font-weight:700; margin:0 0 0 3px !important; padding:0 9px; border-radius:999px; font-size:18px; line-height:1.55; } @media only screen and (max-width: 767px){ .referral-reveal-usp .rr-usp-price .rr-usp-free { font-size:16px; } }


/* Referral: tussenscherm wanneer de beloofde gratis gift niet doorgaat (punt 1, 2026-07-02) */
.ref-declined-overlay{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;background:rgba(33,29,45,.55);padding:20px;}
.ref-declined-box{background:#fff;border-radius:16px;max-width:440px;width:100%;padding:28px 26px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.22);}
.ref-declined-box h4{margin:0 0 12px;}
.ref-declined-box p{margin:0 0 20px;}
.ref-declined-box .button{display:block;width:100%;margin:0 0 10px;}
.ref-declined-box .button:last-child{margin-bottom:0;}
/* Referral: reassure-regel op de landing + notities op de pending-pagina (2026-07-02) */
.rr-hero-reassure{margin:2px 0 14px;font-size:15px;opacity:.85;}
.ref-pending-note{color:#b3261e;font-weight:600;}
.ref-pending-note--ok{color:#1b7f4b;}

/* ============================================================
   HOMEPAGE Voorbeelden: subtiele scroll-reveal (mp-ex-*)
   Het originele kaart-design blijft ongewijzigd en alle content
   is ALTIJD zichtbaar (geen opacity 0, dus nooit een leeg blok).
   Zodra een kaart in beeld komt (.mp-ex-seen via script in
   index.php) glijden de onderdelen gefaseerd omhoog op hun plek:
   eerst de foto's, dan het boek (dat daarna licht zweeft), dan de
   verhaalkeuzes en links (geen sterretjes meer, weggehaald op verzoek
   2026-07-03). Zonder JS of met
   prefers-reduced-motion staat alles gewoon stil op zijn plek.
   ============================================================ */

/* Foto's heel licht scheef als polaroids, recht bij hover */
.homepage-examples .example .userphoto{
	--mprot: 0deg;
	transform: rotate(var(--mprot));
	transition: transform .25s ease;
}

.homepage-examples .example .userphoto:nth-child(odd){ --mprot: -2.4deg; }
.homepage-examples .example .userphoto:nth-child(even){ --mprot: 2deg; }

.homepage-examples .example .userphoto:hover{ transform: rotate(0deg); }

/* Reveal: onderdelen staan vooraf iets lager (wel volledig zichtbaar)
   en glijden gefaseerd omhoog op hun plek zodra de kaart in beeld komt.
   Geen rotaties: rustige, zuivere beweging. */
.homepage-examples.mp-ex-anim .mp-ex-stack .example .col-md-3 .box,
.homepage-examples.mp-ex-anim .mp-ex-stack .example .col-7 .box,
.homepage-examples.mp-ex-anim .mp-ex-stack .example .box-info,
.homepage-examples.mp-ex-anim .mp-ex-stack .example .box-link{
	transition: transform .95s cubic-bezier(.32,.72,.24,1);
}

.homepage-examples.mp-ex-anim .box-wrapper:not(.mp-ex-seen) .example .col-md-3 .box{
	transform: translateY(46px);
}

.homepage-examples.mp-ex-anim .box-wrapper:not(.mp-ex-seen) .example .col-7 .box{
	transform: translateY(56px) scale(.96);
}

.homepage-examples.mp-ex-anim .box-wrapper:not(.mp-ex-seen) .example .box-info,
.homepage-examples.mp-ex-anim .box-wrapper:not(.mp-ex-seen) .example .box-link{
	transform: translateY(46px);
}

/* Gefaseerd op hun plek: foto's, dan boek, dan keuzes en links */
.homepage-examples.mp-ex-anim .box-wrapper.mp-ex-seen .example .col-md-3 .box{ transition-delay: 0s; }
.homepage-examples.mp-ex-anim .box-wrapper.mp-ex-seen .example .col-7 .box{ transition-delay: .18s; }
.homepage-examples.mp-ex-anim .box-wrapper.mp-ex-seen .example .box-info{ transition-delay: .34s; }
.homepage-examples.mp-ex-anim .box-wrapper.mp-ex-seen .example .box-link{ transition-delay: .46s; }
.homepage-examples.mp-ex-anim .box-wrapper.mp-ex-seen .example .box-link:last-of-type{ transition-delay: .58s; }

/* Polaroids: starten recht en iets lager, draaien gefaseerd met een
   kleine veer naar hun scheve eindstand (eindstand = huidige weergave) */
.homepage-examples.mp-ex-anim .box-wrapper:not(.mp-ex-seen) .example .userphoto{
	transform: translateY(12px) rotate(0deg) scale(.94);
}

.homepage-examples.mp-ex-anim .box-wrapper.mp-ex-seen .example .userphoto{
	animation: mpExPhotoSettle .7s cubic-bezier(.32,.72,.24,1) backwards;
}

.homepage-examples.mp-ex-anim .box-wrapper.mp-ex-seen .example .userphoto:nth-child(1){ animation-delay: .05s; }
.homepage-examples.mp-ex-anim .box-wrapper.mp-ex-seen .example .userphoto:nth-child(2){ animation-delay: .14s; }
.homepage-examples.mp-ex-anim .box-wrapper.mp-ex-seen .example .userphoto:nth-child(3){ animation-delay: .23s; }
.homepage-examples.mp-ex-anim .box-wrapper.mp-ex-seen .example .userphoto:nth-child(4){ animation-delay: .32s; }
.homepage-examples.mp-ex-anim .box-wrapper.mp-ex-seen .example .userphoto:nth-child(5){ animation-delay: .41s; }

@keyframes mpExPhotoSettle{
	0%{ transform: translateY(12px) rotate(0deg) scale(.94); }
	75%{ transform: translateY(-1px) rotate(var(--mprot)) scale(1.01); }
	100%{ transform: translateY(0) rotate(var(--mprot)) scale(1); }
}

/* Na het neerdalen gaat het boek heel licht zweven */
.homepage-examples.mp-ex-anim .box-wrapper.mp-ex-seen .example .col-7 .box{
	animation: mpExFloatSoft 5.5s ease-in-out 1.5s infinite;
}

@keyframes mpExFloatSoft{
	0%, 100%{ transform: translateY(0); }
	50%{ transform: translateY(-8px); }
}

/* Verhaalkeuzes-blok niet tonen op mobiel; de twee links eronder blijven */
@media (max-width: 767.98px){
	.homepage-examples .example .box-info{
		display: none;
	}
}

/* ============================================================
   Voorbeeld-cover: loader-spinner tot de coverafbeelding geladen is
   (zoals bij de review-items). Spinner op de omhullende .box via :has();
   img fade-in bij .mp-loaded (JS-vrij via inline onload/onerror op de img).
   Zonder :has()-support: geen spinner, maar de fade-in werkt nog.
   ============================================================ */
.homepage-examples .example .box:has(> a.cover){
	position: relative;
	min-height: 140px;
}

.homepage-examples .example .box:has(> a.cover.mp-loaded){
	min-height: 0;
}

.homepage-examples .example .box:has(> a.cover:not(.mp-loaded))::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid #f0e8e0;
	border-top-color: #ff6600;
	border-radius: 50%;
	animation: imageLoader 0.7s linear infinite;
	z-index: 1;
}

.homepage-examples .example a.cover img{
	opacity: 0;
	transition: opacity .4s ease-in;
}

.homepage-examples .example a.cover.mp-loaded img{
	opacity: 1;
}

/* ============================================================
   Voorbeeld-detailpagina (example.php): gebruikte foto's in
   dezelfde speelse stijl als het Voorbeelden-blok op de homepage:
   polaroid-tilt, gefaseerde settle bij het inscrollen (script in
   example.php zet mp-ex-anim/mp-ex-seen op de foto-box) en
   rechtdraaien bij hover. Hergebruikt mpExPhotoSettle hierboven.
   ============================================================ */
section.book .options2 .used-photo{
	--mprot: 0deg;
	transform: rotate(var(--mprot));
	transition: transform .25s ease;
}

section.book .options2 .used-photo:nth-child(odd){ --mprot: -2.4deg; }
section.book .options2 .used-photo:nth-child(even){ --mprot: 2deg; }

section.book .options2 .used-photo:hover{ transform: rotate(0deg); }

section.book .options2 .box.mp-ex-anim:not(.mp-ex-seen) .used-photo{
	transform: translateY(12px) rotate(0deg) scale(.94);
}

section.book .options2 .box.mp-ex-anim.mp-ex-seen .used-photo{
	animation: mpExPhotoSettle .7s cubic-bezier(.32,.72,.24,1) backwards;
}

section.book .options2 .box.mp-ex-anim.mp-ex-seen .used-photo:nth-child(1){ animation-delay: .05s; }
section.book .options2 .box.mp-ex-anim.mp-ex-seen .used-photo:nth-child(2){ animation-delay: .14s; }
section.book .options2 .box.mp-ex-anim.mp-ex-seen .used-photo:nth-child(3){ animation-delay: .23s; }
section.book .options2 .box.mp-ex-anim.mp-ex-seen .used-photo:nth-child(4){ animation-delay: .32s; }
section.book .options2 .box.mp-ex-anim.mp-ex-seen .used-photo:nth-child(5){ animation-delay: .41s; }

@media (prefers-reduced-motion: reduce){
	.homepage-examples .example .userphoto,
	section.book .options2 .used-photo{
		transform: none !important;
	}
}

/* ============================================================
   Mogelijkheden-pagina (/features): blokken landen zacht op de
   stapel bij het inscrollen (script in features.php zet
   mp-ex-anim op .features-page en mp-ex-seen per blok-wrapper).
   Geen sticky, geen opacity 0, geen schaduwen (passen niet in het
   design); het beeldvlak volgt iets later met een mini-tilt die
   rechttrekt, afwisselend per blok.
   ============================================================ */
.features-page.mp-ex-anim .wrapper{
	transition: transform .95s cubic-bezier(.32,.72,.24,1);
}

.features-page.mp-ex-anim .wrapper:not(.mp-ex-seen){
	transform: translateY(48px) scale(.97);
}

.features-page.mp-ex-anim .wrapper .imgbox{
	transition: transform .85s cubic-bezier(.32,.72,.24,1) .15s;
}

.features-page.mp-ex-anim .col-12:nth-child(odd) .wrapper:not(.mp-ex-seen) .imgbox{
	transform: translateY(16px) rotate(1.4deg) scale(.97);
}

.features-page.mp-ex-anim .col-12:nth-child(even) .wrapper:not(.mp-ex-seen) .imgbox{
	transform: translateY(16px) rotate(-1.4deg) scale(.97);
}

/* ============================================================
   Seizoens-promo (homepage): kaart landt zacht bij het inscrollen,
   de 3D-illustratie volgt met een mini-tilt en blijft daarna licht
   zweven (hergebruikt mpExFloatSoft). Script in index.php zet
   mp-ex-anim/mp-ex-seen op de sectie. Geen opacity 0, geen schaduw.
   ============================================================ */
.seasonal-promo.mp-ex-anim .seasonal-promo-card{
	transition: transform .95s cubic-bezier(.32,.72,.24,1);
}

.seasonal-promo.mp-ex-anim:not(.mp-ex-seen) .seasonal-promo-card{
	transform: translateY(44px) scale(.98);
}

.seasonal-promo.mp-ex-anim .seasonal-promo-icon{
	transition: transform .85s cubic-bezier(.32,.72,.24,1) .15s;
}

.seasonal-promo.mp-ex-anim:not(.mp-ex-seen) .seasonal-promo-icon{
	transform: translateY(14px) rotate(-2deg) scale(.96);
}

.seasonal-promo.mp-ex-anim.mp-ex-seen .seasonal-promo-icon{
	animation: mpExFloatSoft 6s ease-in-out 1.6s infinite;
}

/* ============================================================
   Thema-blok (theme-overview): subtiele scroll-reveal van de
   pill-buttons. Bij het inscrollen glijden de pills gefaseerd
   omhoog op hun plek; script in app.js zet mp-ex-anim + mp-ex-seen
   op elke .theme-overview. Altijd zichtbaar (geen opacity 0);
   zonder JS of bij reduced-motion staat alles stil.
   ============================================================ */
.theme-overview.mp-ex-anim .list-inline-item{
	transition: transform .5s cubic-bezier(.32,.72,.24,1), opacity .5s ease;
}

/* Pre-state: net iets lager en onzichtbaar; gefaseerd faden ze links-naar-rechts
   in en schuiven ze omhoog zodra het blok in beeld komt. Gated op .mp-ex-anim
   (alleen als JS draait en geen reduced-motion), dus nooit een leeg blok. */
.theme-overview.mp-ex-anim:not(.mp-ex-seen) .list-inline-item{
	opacity: 0;
	transform: translateY(22px);
}

.theme-overview.mp-ex-anim .list-inline-item:nth-child(1){ transition-delay: 0s; }
.theme-overview.mp-ex-anim .list-inline-item:nth-child(2){ transition-delay: .045s; }
.theme-overview.mp-ex-anim .list-inline-item:nth-child(3){ transition-delay: .09s; }
.theme-overview.mp-ex-anim .list-inline-item:nth-child(4){ transition-delay: .135s; }
.theme-overview.mp-ex-anim .list-inline-item:nth-child(5){ transition-delay: .18s; }
.theme-overview.mp-ex-anim .list-inline-item:nth-child(6){ transition-delay: .225s; }
.theme-overview.mp-ex-anim .list-inline-item:nth-child(7){ transition-delay: .27s; }
.theme-overview.mp-ex-anim .list-inline-item:nth-child(8){ transition-delay: .315s; }
.theme-overview.mp-ex-anim .list-inline-item:nth-child(9){ transition-delay: .36s; }
.theme-overview.mp-ex-anim .list-inline-item:nth-child(10){ transition-delay: .405s; }
.theme-overview.mp-ex-anim .list-inline-item:nth-child(11){ transition-delay: .45s; }
.theme-overview.mp-ex-anim .list-inline-item:nth-child(n+12){ transition-delay: .495s; }

@media (prefers-reduced-motion: reduce){
	.theme-overview.mp-ex-anim:not(.mp-ex-seen) .list-inline-item,
	.theme-overview.mp-ex-anim .list-inline-item{
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* ============================================================
   Thema-pills (theme-overview): op mobiel 5 pills minder in de
   beginweergave. De selector verbergt de laatste 6 li's behalve
   de allerlaatste; met de "bekijk alle thema's"-knop als laatste
   li verdwijnen zo precies 5 thema-pills en blijft de knop staan.
   ============================================================ */
@media (max-width: 767.98px){
	.theme-overview #initial-view li.list-inline-item:nth-last-child(-n+6):not(:last-child){
		display: none;
	}

	/* De "Bekijk alle ..."-knop (oranje .show-more-trigger) op mobiel op een
	   eigen, gecentreerde regel; ruimte erboven = pill-rij-afstand (9px, uit
	   de pill margin-bottom), daarom margin-top 0 op li en knop.
	   :has() vangt ALLE markup-varianten: "Bekijk alle thema's" in #trigger-li
	   (index/features/ideas/theme) EN de losse "Bekijk alle namen"-link
	   (idea/name/ideas/theme). Zonder :has()-support valt alles terug op de
	   inline-weergave (geen breuk). */
	.theme-overview li.list-inline-item:has(> .show-more-trigger){
		display: block;
		width: 100%;
		margin-top: 0;
		text-align: center;
	}

	.theme-overview li.list-inline-item > .show-more-trigger{
		margin-top: 0;
		padding: 5px 15px;
		font-size: 14px;
		margin-bottom: 9px;
	}
}

/* Lightbox-loader: spinner-overlay over de (alvast getoonde) kleine versie
   terwijl de grote reviewfoto laadt; hergebruikt de imageLoader-keyframes. */
.review-lightbox .lightbox-media { position: relative; }
.review-lightbox .lightbox-media.mp-lb-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ff6600;
    border-radius: 50%;
    animation: imageLoader 0.7s linear infinite;
    z-index: 1;
}
.review-lightbox .lightbox-media.mp-lb-loading img { opacity: 0.65; }

/* /features: het laatste feature-blok ("Luister naar het verhaal") naar het
   groene themablok = 50px (desktop). Bootstrap .mb-4 (24px) is !important,
   dus deze override ook. Mobiel wordt het 25px (zie blok hieronder). */
.features-page > .col-12:last-child > .wrapper {
    margin-bottom: 50px !important;
}

/* ================================================================
   MOBIELE SPACING & KOP-TWEAKS (2026-07-11)
   Eén mobiel blok. Volgorde van de regels is bewust: de generieke
   25px-blokmarge eerst, daarna de specifiekere 50px-override voor het
   laatste blok vóór de footer (source-order + !important winnen).
   ================================================================ */
@media (max-width: 767.98px) {

    /* 1. Alle content-blokken/wrappers: op desktop 50px uit elkaar, op mobiel
          25px. Headers (h1/h2) en #faqImage vallen hier bewust buiten. */
    .homepage-howitworks .wrapper,
    .homepage-examples .wrapper,
    .homepage-links .wrapper,
    .homepage-faq .wrapper,
    .homepage-reviews .wrapper,
    .seasonal-promo,
    .booklook .wrapper,
    .usp .wrapper,
    .payment-page .wrapper,
    .books .wrapper,
    .book-edit .wrapper,
    .book .wrapper,
    .cart .wrapper,
    .orders .wrapper,
    .pricing .wrapper,
    .pricing-extras .wrapper,
    .ideas .wrapper,
    .idea .wrapper,
    .blog-item .wrapper,
    .blog-item .sticky-top,
    .page .wrapper,
    .theme-overview .wrapper,
    .drafts {
        margin-bottom: 25px;
    }

    /* 2. Het wizard-form-blok gebruikt Bootstrap .mb-5 (48px, !important) i.p.v.
          een .wrapper-marge; op mobiel ook 25px (!important want de utility is dat). */
    .homepage-form .container.mb-5 {
        margin-bottom: 25px !important;
    }

    /* 3. Ruimte laatste blok -> footer = 50px. Blokken hebben zelf 25px ondermarge
          (regel 1); de footer voegt daar 25px padding-top aan toe -> 50px totaal.
          Universeel: geen fragiele last-of-type die op één-sectie-paginas (referral)
          álle wrappers zou raken. Padding collapse't niet, dus voorspelbaar. */
    /* 17px + de ~8px whitespace-regel bovenin de footer = 25px footer-bijdrage;
       met de 25px blokmarge erboven wordt de zichtbare ruimte precies 50px. */
    footer {
        padding-top: 17px;
    }
    /* Referral is één sectie met eigen block-spacing; op mobiel gelijktrekken. */
    .page.referral { padding-bottom: 25px; }
    .page.referral .ref-card { margin-bottom: 25px; }
    .page.referral .ref-credit { margin-bottom: 25px; }

    /* 4. Themablok-kop smaller + gecentreerd op mobiel. */
    .theme-overview h2 {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* 5. /features: laatste feature-blok -> groen blok = 25px op mobiel. */
    .features-page > .col-12:last-child > .wrapper {
        margin-bottom: 25px !important;
    }

    /* 6. /blog index: kaart-kolommen 25px uit elkaar (i.p.v. Bootstrap mb-5 = 48px); en de
          .blog-sectie zelf geen extra ondermarge op mobiel, zodat de laatste kaart -> footer
          ook op 25px uitkomt (net als de andere paginas; footer padding-top maakt er 50px van). */
    .blog .col-md-4.mb-5 {
        margin-bottom: 25px !important;
    }
    .blog {
        margin-bottom: 0;
    }
}


/* Mobiele knop-/prijs-afmetingen (2026-07-16, per Ernst): calendar-upsellknop
   full-width zoals de andere flow-knoppen; product-prijzen compacter op mobiel. */
@media only screen and (max-width: 767px) {
    .calendar-product .button2 {
        background-color: #ffffffde !important;
        background-image: linear-gradient(-180deg, #ffffff61, #ff660026);
        padding: 10px;
        font-size: 16px;
        width: 100%;
    }
    .product-page-price .discount-price {
        font-size: 1.1rem;
    }
    .product-page-price .original-price {
        font-size: 0.8rem;
    }
}

/* ==== Leeftijdspills op /gifts en /ideas (2026-07-16) ====
   Zelfde pastelpalet als de leeftijdsnav op de age-pagina's; de wrapper is hier
   bewust wit (review Ernst). De oranje "Per leeftijd"-trigger valt buiten het
   palet via :not(.show-more-trigger); hover = oranje rand zoals op age.php. */
.theme-overview.ages-pill-block .wrapper { background: #f3ece8; }
.theme-overview.ages-pill-block ul .list-inline-item a:not(.show-more-trigger):hover { border-color: #f60 !important; }
.theme-overview.ages-pill-block ul .list-inline-item:nth-child(10n+1) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #FFDFC8, #F2CCB1); border-color: #DFBCA3; }
.theme-overview.ages-pill-block ul .list-inline-item:nth-child(10n+2) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #E0E8E3, #CDD7D1); border-color: #BDC6C0; }
.theme-overview.ages-pill-block ul .list-inline-item:nth-child(10n+3) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #FDDDD8, #EFCAC4); border-color: #DCBAB4; }
.theme-overview.ages-pill-block ul .list-inline-item:nth-child(10n+4) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #FBE7E4, #EED6D2); border-color: #DBC5C1; }
.theme-overview.ages-pill-block ul .list-inline-item:nth-child(10n+5) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #F9F1EF, #ECE1DF); border-color: #D9CFCD; }
.theme-overview.ages-pill-block ul .list-inline-item:nth-child(10n+6) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #FFEAE1, #F2DACE); border-color: #DFC9BE; }
.theme-overview.ages-pill-block ul .list-inline-item:nth-child(10n+7) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #F0E9E2, #E0D9D0); border-color: #CEC8BF; }
.theme-overview.ages-pill-block ul .list-inline-item:nth-child(10n+8) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #FED1C9, #F1BBB2); border-color: #DEACA4; }
.theme-overview.ages-pill-block ul .list-inline-item:nth-child(10n+9) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #FED3AE, #F1BE92); border-color: #DEAF86; }
.theme-overview.ages-pill-block ul .list-inline-item:nth-child(10n+10) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #EDEDE9, #DCDCD9); border-color: #CACAC8; }

/* ==== Letter-index op /names (2026-07-16) ====
   Elk van de honderden naam-pagina's in 2 klikken bereikbaar; springt naar de
   pagineringspagina waar de beginletter start. */
/* Letter-index /names (review Ernst 2026-07-17): filterpills in een kaartje,
   altijd 1 regel horizontaal scrollen (ook mobiel), exact het age--nav-patroon
   van de leeftijdspagina's; actieve letter = oranje. */
.names-letter-card { background: #f8f0e2; border-radius: 48px; padding: 10px 20px; margin: 4px 0 18px; }
.names-letter-index { display: flex; gap: 10px; overflow-x: auto; padding: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.names-letter-index::-webkit-scrollbar { display: none; }
@media (max-width: 767.98px) { .names-letter-card { padding: 8px 14px; border-radius: 32px; } }
.names-letter-index a { flex: 0 0 auto; white-space: nowrap; padding: 7px 18px; border-radius: 50px; color: #333; font-weight: 600; font-size: 16px; text-decoration: none; transition: background-color 0.5s ease, color 0.3s ease, border 0.3s ease; }
.names-letter-index a:hover { border-color: #f60 !important; }
.names-letter-index a:nth-child(10n+1) { background-image: linear-gradient(-180deg, #FFDFC8, #F2CCB1); border: 1px solid #DFBCA3; }
.names-letter-index a:nth-child(10n+2) { background-image: linear-gradient(-180deg, #E0E8E3, #CDD7D1); border: 1px solid #BDC6C0; }
.names-letter-index a:nth-child(10n+3) { background-image: linear-gradient(-180deg, #FDDDD8, #EFCAC4); border: 1px solid #DCBAB4; }
.names-letter-index a:nth-child(10n+4) { background-image: linear-gradient(-180deg, #FBE7E4, #EED6D2); border: 1px solid #DBC5C1; }
.names-letter-index a:nth-child(10n+5) { background-image: linear-gradient(-180deg, #F9F1EF, #ECE1DF); border: 1px solid #D9CFCD; }
.names-letter-index a:nth-child(10n+6) { background-image: linear-gradient(-180deg, #FFEAE1, #F2DACE); border: 1px solid #DFC9BE; }
.names-letter-index a:nth-child(10n+7) { background-image: linear-gradient(-180deg, #F0E9E2, #E0D9D0); border: 1px solid #CEC8BF; }
.names-letter-index a:nth-child(10n+8) { background-image: linear-gradient(-180deg, #FED1C9, #F1BBB2); border: 1px solid #DEACA4; }
.names-letter-index a:nth-child(10n+9) { background-image: linear-gradient(-180deg, #FED3AE, #F1BE92); border: 1px solid #DEAF86; }
.names-letter-index a:nth-child(10n+10) { background-image: linear-gradient(-180deg, #EDEDE9, #DCDCD9); border: 1px solid #CACAC8; }
.names-letter-index a.names-letter-current, .names-letter-index a.names-letter-current:hover { background-image: linear-gradient(-180deg, #fd8130, #ff6600) !important; border-color: #f60 !important; color: #fff; }

/* ==== Hub -> blog "Blog over kinderboeken" relatieblok (uit blog_links.php inline-<style> gehaald 2026-07-18) ==== */
.mp-hub-related .wrapper { background:#fff; border-radius:48px; padding:50px; }
.mp-hub-related h2 { font-weight:800; color:#ff6600; font-size:34px; margin-bottom:30px; }
.mp-hub-related .mp-hub-card-imgwrap { overflow:hidden; border-radius:12px; }
.mp-hub-related .mp-hub-card-img { width:100%; height:170px; object-fit:cover; display:block; transition:transform .45s ease; }
.mp-hub-related .mp-hub-card:hover .mp-hub-card-img { transform:scale(1.07); }
.mp-hub-related .mp-hub-card-title { font-size:18px; font-weight:600; line-height:1.35; margin-top:.7rem; transition:color .2s ease; }
.mp-hub-related .mp-hub-card:hover .mp-hub-card-title { color:#ff6600; }
.mp-hub-related .mp-hub-card-more { margin-top:.45rem; color:#ff6600; font-weight:700; font-size:15px; }
@media (max-width:767px){ .mp-hub-related .wrapper{ padding:24px; border-radius:24px; } .mp-hub-related h2{ font-size:26px; margin-bottom:20px; } .mp-hub-related .row{ --bs-gutter-x:14px; } .mp-hub-related .mp-hub-card-img{ height:110px; } .mp-hub-related .mp-hub-card-title{ font-size:15px; } .mp-hub-related .mp-hub-card-more{ font-size:13px; } }

/* ============================================================
   Boekkaften (15-10-2026, keuze Ernst na drie blinde rondes): eerst mooi, dan zichtbaar een boek, dan zo dicht
   mogelijk bij ons gedrukte boek (het echte boek zelf tonen de bladerviewer en het 3D-boek).
   - Collage bovenaan de homepage en de doorverwijspagina: het oude ontwerp, alleen haakse hoeken aan de rugkant en
     88% dekking. Op dit kleine formaat leest een beige rug als een wit randje (bezoekers kozen dit).
   - Overige getekende hardcovers ('versie 2'): links buiten de kaft de beige rug van het dichte boek uit de
     bladerviewer (assets/js/flipbook_boek.js, PROFIEL; 6,45 mm op 210,8 mm = 3,06%), vanaf de rug een zachte
     schaduw de kaft in met een heel licht randje erachter, rechts een witte bladzijdenrand (boven en onder 1% korter:
     het bord steekt uit), rugkant haaks en de voorkant met de oude ronding van elke plek. Waar ruimte is staat de rug
     naast de illustratie, zodat het boek niet kleiner wordt. Niet voor een kaft met het 3D-boek erop (data-book3d).
   - Kleurboek (paperback): fijne rillijn bij de rug, haakse hoeken, witte bladzijden gelijk met de kaft.
   De gedempte dekking in rust en de lichte draaiing van elke plek blijven zoals ze waren.
   ============================================================ */
:root {
	--mk-rugrand: linear-gradient(to right, #d1c9c1 0%, #e9e1d7 4%, #f4ebe1 9.2%, #f8efe4 18.4%, #f5ece2 36.2%, #ece3d9 41.5%,
		#dbd3ca 46.8%, #ddd5cc 52.1%, #e7ded5 60%, #efe6dd 68.2%, #f9f0e6 76%, #f6ede3 80.6%, #f3eae0 86.8%, #f3eae0 100%);
}

/* collage bovenaan de homepage: oud ontwerp, rugkant haaks, 88% (0,85 was net te flets, 100% te fel) */
.homepage-top .examples {
	opacity: 0.88;
}
.homepage-top .examples,
.homepage-top .examples img {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.homepage-top .examples::before {
	border-radius: 0;
}

/* schaduw als box-shadow: een filter op de licht gedraaide kaft oogde vervaagd */
.books .item .cover,
.booklook .coverwrapper:not([data-book3d]) .cover {
	box-shadow: -9px 6px 10px rgb(40 25 10 / 30%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
.books .item:hover .cover,
.booklook .wrapper:hover .coverwrapper:not([data-book3d]) .cover {
	box-shadow: -9px 6px 10px rgb(40 25 10 / 42%);
	transform: none;
	opacity: 1;
}
.homepage-examples .example a.cover {
	box-shadow: -10px 10px 18px rgb(40 25 10 / 30%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
.homepage-examples .example a.cover:hover {
	box-shadow: -10px 10px 18px rgb(40 25 10 / 42%);
	transform: none;
	opacity: 1;
}
@media only screen and (max-width: 767px) {
	.homepage-examples .example a.cover {
		box-shadow: -6px 6px 10px rgb(40 25 10 / 30%);
	}
}

/* rug */
:is(.homepage-examples .example a.cover, .booklook .coverwrapper:not([data-book3d]) .cover, .books .item .cover, .sequel-book-cover,
	.cart #book-items-wrapper .cart-item .cover, .ideas .cover:not(.gift-occasion-grid .cover), .idea .cover, .idea .cover2,
	.book .inputwrapper .coverwrapper:not([data-book3d]) .cover)::before {
	content: '';
	position: absolute;
	top: 0;
	left: calc(-1 * max(4px, 3.06%));
	width: max(4px, 3.06%);
	height: 100%;
	border-radius: 0;
	background: var(--mk-rugrand);
}
/* zachte schaduw vanaf de rug de kaft in, met een heel licht randje erachter (geen harde lichtstreep) */
:is(.homepage-examples .example a.cover, .booklook .coverwrapper:not([data-book3d]) .cover, .books .item .cover, .sequel-book-cover,
	.cart #book-items-wrapper .cart-item .cover, .ideas .cover:not(.gift-occasion-grid .cover), .idea .cover, .idea .cover2,
	.book .inputwrapper .coverwrapper:not([data-book3d]) .cover)::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	width: clamp(6px, 7%, 18px);
	height: 100%;
	border-radius: 0;
	background: linear-gradient(to right, rgb(40 25 10 / 18%), rgb(40 25 10 / 5%) 40%, rgb(40 25 10 / 0%) 60%, rgb(255 255 255 / 8%) 76%, rgb(255 255 255 / 0%));
	pointer-events: none;
}
/* geen schaduw op een kaft zonder illustratie (lege plaatshouder, lege boekblok-kaft): 'past daar minder mooi bij' */
:is(.books .item .cover, .sequel-book-cover, .booklook .coverwrapper:not([data-book3d]) .cover, .idea .cover,
	.book .inputwrapper .coverwrapper:not([data-book3d]) .cover):has(img[src*="placeholder-cover"], img[src*="booklook-cover"])::after {
	display: none;
}
/* witte bladzijdenrand, hoogstens 8 px */
:is(.homepage-examples .example a.cover, .booklook .coverwrapper:not([data-book3d]) .cover, .books .item .cover, .sequel-book-cover,
	.cart #book-items-wrapper .cart-item .cover, .ideas .cover:not(.gift-occasion-grid .cover), .idea .cover, .idea .cover2,
	.book .inputwrapper .coverwrapper:not([data-book3d]) .cover) .border-right {
	display: block;
	top: 1%;
	bottom: 1%;
	right: calc(-1 * clamp(3px, 2.1%, 8px));
	width: clamp(3px, 2.1%, 8px);
	height: auto;
	transform: none;
	border: 0;
	border-radius: 0 2px 2px 0;
	background: linear-gradient(to right, rgb(60 40 20 / 0%), rgb(60 40 20 / 6%)),
		repeating-linear-gradient(to right, #ffffff 0, #ffffff 1px, #f2eee8 1px, #f2eee8 2px);
	box-shadow: inset -1px 0 0 rgb(60 40 20 / 26%);
}
/* smalle randen (winkelwagen, ideeen op de telefoon): een tint wit zonder lijntjes */
.cart #book-items-wrapper .cart-item .cover .border-right {
	background: linear-gradient(to right, #ffffff, #f5f1eb);
}
/* rugkant haaks, voorkant houdt de ronding van elke plek ('bijna haaks maakt het niet mooier', Ernst) */
:is(.homepage-examples .example a.cover, .booklook .coverwrapper:not([data-book3d]) .cover, .books .item .cover, .sequel-book-cover,
	.cart #book-items-wrapper .cart-item .cover, .ideas .cover:not(.gift-occasion-grid .cover), .idea .cover, .idea .cover2,
	.book .inputwrapper .coverwrapper:not([data-book3d]) .cover),
:is(.homepage-examples .example a.cover, .booklook .coverwrapper:not([data-book3d]) .cover, .books .item .cover, .sequel-book-cover,
	.cart #book-items-wrapper .cart-item .cover, .ideas .cover:not(.gift-occasion-grid .cover), .idea .cover, .idea .cover2,
	.book .inputwrapper .coverwrapper:not([data-book3d]) .cover) img {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
/* plaats: in het perzik vak van de voorbeelden schuift de kaft de rugbreedte op en staat hij midden in het vak; de
   grote kaft op /idea en /name en de rasters 'ideeen' houden hun maat, de rug valt in de ruimte ernaast */
.homepage-examples .example a.cover {
	margin-left: max(4px, 3.06%);
}
@media only screen and (min-width: 1200px) {
	.homepage-examples .example a.cover {
		left: -7px;
	}
}
@media only screen and (max-width: 991px) {
	.idea .cover {
		margin-left: max(4px, 3.06%);
	}
}
@media only screen and (max-width: 767px) {
	.ideas .cover:not(.gift-occasion-grid .cover),
	.idea .cover2 {
		margin-left: calc(10px + max(4px, 3.06%));
	}
	:is(.ideas .cover:not(.gift-occasion-grid .cover), .idea .cover2) .border-right {
		background: linear-gradient(to right, #ffffff, #f5f1eb);
	}
}
/* titels over de kaft: midden op de illustratie, met ruimte tot de rand en evenwichtig afgebroken */
.ideas .cover:not(.gift-occasion-grid .cover) h5,
.idea .cover h2,
.idea .cover2 h5 {
	width: 100%;
	left: auto;
	right: 0;
	padding: 0 8%;
	text-wrap: balance;
}
.idea .cover h2 {
	padding: 0 4%;
}

/* grote kaft bovenaan /idea en /name: buitenrand van de bladzijden 2 px, alleen vanaf tabletbreedte; op de telefoon
   blijft het 1 px (Ernst 15-10). De voorbeelden hadden dit ook, maar houden 1 px (Ernst 16-10). :not(#mk-geen-id) tilt de specificiteit naar ID-niveau;
   de regel hierboven telt '.cart #book-items-wrapper' mee in zijn :is() en zou anders winnen */
@media only screen and (min-width: 768px) {
	.idea .cover .border-right:not(#mk-geen-id):not(.mk-a):not(.mk-b) {
		box-shadow: inset -2px 0 0 rgb(60 40 20 / 26%);
	}
}

/* voorbeelden (homepage en /examples): het boek een tikje kleiner, zodat er rondom lucht is in het perzik vak
   (Ernst 16-10). Computer 20 px, tablet 18 px (was 12), telefoon 11 px (was 6); op de telefoon houdt de kaft rechts de
   breedte van de bladzijdenrand vrij, zodat links en rechts even veel lucht is */
.homepage-examples .example .box:has(> a.cover) {
	padding: 20px;
}
@media only screen and (max-width: 1199px) {
	.homepage-examples .example .box:has(> a.cover) {
		padding: 18px;
	}
}
@media only screen and (max-width: 767px) {
	.homepage-examples .example .box:has(> a.cover) {
		padding: 11px;
	}
	.homepage-examples .example a.cover {
		margin-right: clamp(3px, 2.1%, 8px);
	}
}
/* voorbeelden op de computer: de bladzijdenrand rechts was 8 px en oogde net te groot naast de kaft (Ernst 16-10, koos
   6,5 px uit 8/7/6,5/6). Daaronder blijft het 2,1% van de kaft, dat is al smaller */
@media only screen and (min-width: 1200px) {
	.homepage-examples .example a.cover .border-right:not(#mk-geen-id) {
		right: calc(-1 * min(2.1%, 6.5px));
		width: min(2.1%, 6.5px);
	}
}
/* kleurboek: een gelijmde paperback, geen beige rug en geen uitstekend bord (Ernst 15-10: het 'nieuwe ontwerp', met haakse
   hoeken aan de rugkant): fijne rillijn bij de rug, smal lichtrandje aan de voorsnede, bladzijden gelijk met de kaft */
:is(.coloring-books .cover, .cart #coloring-book-items-wrapper .cart-item .cover),
:is(.coloring-books .cover, .cart #coloring-book-items-wrapper .cart-item .cover) img {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
:is(.coloring-books .cover, .cart #coloring-book-items-wrapper .cart-item .cover)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 2.6%;
	width: 3px;
	height: 100%;
	border-radius: 0;
	background: linear-gradient(to right, rgb(0 0 0 / 10%), rgb(255 255 255 / 22%));
	pointer-events: none;
}
:is(.coloring-books .cover, .cart #coloring-book-items-wrapper .cart-item .cover)::after {
	content: '';
	position: absolute;
	top: 0;
	left: auto;
	right: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(to left, rgb(255 255 255 / 30%), transparent);
	pointer-events: none;
}
/* bladzijden boven en onder 0,6% korter dan de kaft: anders staken ze naast de ronde voorhoeken en de lichte draaiing
   boven en onder uit en leken ze langer dan het boek (Ernst 16-10, koos 0,6% boven 0 en 1%) */
:is(.coloring-books .cover, .cart #coloring-book-items-wrapper .cart-item .cover) .border-right {
	display: block;
	top: 0.6%;
	bottom: 0.6%;
	right: max(-2.1%, -6px);
	width: min(2.1%, 6px);
	height: auto;
	transform: none;
	border: 0;
	border-radius: 0 2px 2px 0;
	background: linear-gradient(to right, rgb(60 40 20 / 0%), rgb(60 40 20 / 7%)),
		repeating-linear-gradient(to right, #fffdf9 0, #fffdf9 1px, #f1ebe2 1px, #f1ebe2 2px);
	box-shadow: inset -1px 0 0 rgb(60 40 20 / 22%);
}
/* de grote kleurboekkaft op /coloring_book: hoogstens zo breed als de oude rand (6 px, telefoon 4 px) */
@media only screen and (max-width: 767px) {
	.coloring-books .cover .border-right {
		right: max(-2.1%, -4px);
		width: min(2.1%, 4px);
	}
}

/* ============================================================
   Focusring alleen voor het toetsenbord (16-10-2026, Ernst: 'blauwe balk om afbeeldingen die een menu of venster
   openen, op de iPhone'). Bootstrap zet na sluiten de focus terug op de opener (accounticoon, kleurboek, 3D-boek) en
   Safari toont dan de standaardring of de blauwe Bootstrap-schaduw van .nav-link/.btn. Een scriptje in
   partials/header.php zet data-invoer="aanwijzen" na tik of klik en "toetsenbord" na Tab; wie met Tab bedient, houdt
   de ring. Invoervelden blijven zoals ze waren (daar typ je in), de oranje toetsenbordringen van de site ook.
   ============================================================ */
html[data-invoer="aanwijzen"] :is(a, button, summary, [role="button"], [tabindex]):is(:focus, :focus-visible) {
	outline: none;
}
html[data-invoer="aanwijzen"] :is(.nav-link, .btn):focus-visible,
html[data-invoer="aanwijzen"] .btn-close:focus {
	box-shadow: none;
}