/* ==========================================================================
   Bouman Grafiek – pagina's (Dierenportretten, Over, Contact), shop, product,
   formulieren, winkelwagen en afrekenen.
   ========================================================================== */

:root {
	--h1p: clamp(76px, 8vw, 128px);
	--h2p: clamp(52px, 5vw, 80px);
	--secp: clamp(110px, 10vw, 160px);
	--gap-shop: clamp(40px, 4vw, 64px) clamp(20px, 2.2vw, 32px);
}
@media (max-width: 759px) {
	:root { --h1p: 60px; --h2p: 46px; --secp: 88px; --gap-shop: 36px 14px; }
}

/* ---------- Hulpklassen ---------- */
.bg-wrap { max-width: 1320px; margin: 0 auto; }
.bg-stack { display: flex; flex-direction: column; gap: 60px; }
.bg-stack--14 { gap: 14px; } .bg-stack--18 { gap: 18px; } .bg-stack--20 { gap: 20px; } .bg-stack--26 { gap: 26px; } .bg-stack--28 { gap: 28px; } .bg-stack--32 { gap: 32px; } .bg-stack--48 { gap: 48px; }
@media (max-width: 759px) { .bg-stack { gap: 40px; } .bg-stack--14 { gap: 14px; } .bg-stack--18 { gap: 18px; } .bg-stack--20 { gap: 20px; } .bg-stack--26 { gap: 26px; } .bg-stack--28 { gap: 28px; } .bg-stack--32 { gap: 32px; } }
.bg-sec--top0 { padding-top: 0 !important; }
.bg-paper { background: var(--bg-papier); }
.bg-darkplain { background: var(--bg-donker); color: var(--bg-zand); }
.bg-darkplain .bg-it { color: var(--bg-perzik); }
.bg-h1--page { font-size: var(--h1p); line-height: .92; }
.bg-h1--page .bg-kicker { margin-bottom: 24px; }
.bg-h2--page { font-size: var(--h2p); }
.bg-headrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.bg-split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.bg-rise { animation: bg-rise 1s both; }
.bg-rise-late { animation: bg-rise 1s .15s both; }
@keyframes bg-reveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.bg-unveil { animation: bg-reveal 1.4s .1s cubic-bezier(.7, 0, .2, 1) both; }
.bg-ph--soft { background: #D6CBB8; }
.bg-ph--dark { background: #3A3029; color: #CFC5B6; }
.bg-faq--nokicker .bg-kicker:empty { display: none; }
.bg-secp { padding-top: var(--secp); padding-bottom: var(--secp); }
.bg-shop .bg-sec, .bg-product .bg-sec, .bg-page .bg-sec { padding-left: var(--gutter); padding-right: var(--gutter); }
@media (max-width: 759px) { .bg-split2 { grid-template-columns: 1fr; gap: 48px; } }

/* Lijst-dl */
.bg-dl { margin: 0; display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); border-top: 1px solid var(--bg-lijn); }
.bg-dl dt { padding: 16px 0; border-bottom: 1px solid var(--bg-lijn); color: var(--bg-tekst-2); font-size: 15px; }
.bg-dl dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--bg-lijn); font-size: 16px; }
.bg-dl--facts { grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); }

/* ---------- Pagina-intro ---------- */
.bg-phero { padding: clamp(48px, 5vw, 80px) var(--gutter) clamp(96px, 9vw, 140px); }
.bg-phero__grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.bg-phero__text { display: flex; flex-direction: column; gap: 30px; animation: bg-rise 1s both; }
.bg-phero__lead { margin: 0; max-width: 28em; font-size: 19px; text-wrap: pretty; }
.bg-phero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.bg-phero__art { position: relative; justify-self: center; width: 100%; max-width: 500px; }
.bg-lamp-wrap--hero { max-width: none; }
.bg-lamp-wrap--hero .bg-lamp { width: 34%; margin-left: -17%; }
.bg-lamp-wrap--hero .bg-arch-wood { box-shadow: 0 60px 90px -40px rgba(43,38,32,.75); }
.bg-arch-mat > img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 0 0; }
@media (max-width: 759px) {
	.bg-phero { padding: 32px 20px 88px; }
	.bg-phero__grid { grid-template-columns: 1fr; gap: 48px; }
	.bg-phero__text { order: 2; }
	.bg-phero__art { order: 1; }
}

/* ---------- Grote stappen ---------- */
.bg-bigsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
.bg-bigsteps li { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--bg-tekst-2); }
.bg-bigsteps__n { font-family: var(--f-it); font-style: italic; font-weight: 300; font-size: 64px; line-height: .8; color: var(--bg-perzik); }
.bg-bigsteps__t { margin: 0; font-family: var(--f-kop); font-weight: 400; font-size: 28px; line-height: 1.1; }
.bg-bigsteps__d { font-size: 16px; color: #CFC5B6; max-width: 22em; }
@media (max-width: 1099px) { .bg-bigsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .bg-bigsteps { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Galerij ---------- */
.bg-gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-shop); align-items: end; }
.bg-gal__item { margin: 0; grid-column: span var(--span); display: flex; flex-direction: column; gap: 12px; }
.bg-gal__frame { box-shadow: 0 34px 50px -26px rgba(43,38,32,.55); }
.bg-gal__img { position: relative; overflow: hidden; background: #E3D9C9; }
.bg-gal__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-gal__item--arch .bg-gal__frame { padding: 16px; background: linear-gradient(135deg, #5A3E2B, #3A2819); border-radius: 999px 999px 4px 4px; }
.bg-gal__item--arch .bg-gal__img { border-radius: 999px 999px 0 0; }
.bg-gal__item--black .bg-gal__frame { padding: 8px; background: #1C1916; }
.bg-gal__item--gilt .bg-gal__frame { padding: 10px; background: var(--bg-goud); }
.bg-gal__item--white .bg-gal__frame { padding: 10px; background: #fff; }
.bg-gal figcaption { font-family: var(--f-it); font-style: italic; font-size: 18px; color: var(--bg-tekst-3); }
@media (max-width: 759px) {
	.bg-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bg-gal__item { grid-column: auto; }
	.bg-gal__item:first-child { grid-column: 1 / -1; }
	.bg-gal__item--arch .bg-gal__frame { padding: 10px; }
	.bg-gal__item--black .bg-gal__frame, .bg-gal__item--gilt .bg-gal__frame, .bg-gal__item--white .bg-gal__frame { padding: 6px; }
}

/* ---------- Formaatkiezer ---------- */
.bg-sizes { display: flex; flex-direction: column; gap: 20px; --k: 4.2px; }
.bg-sizes__row { display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: center; gap: 28px; min-height: 260px; padding: 24px 0; border-bottom: 4px solid #B9A68C; }
.bg-sizes button { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--bg-inkt); }
.bg-sizes__frame { display: block; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); padding: max(3px, calc(var(--w) * var(--k) * .07)); background: var(--bg-lijn); box-shadow: 0 10px 16px -12px rgba(43,38,32,.4); transition: all .4s var(--ease); }
.bg-sizes__frame span { display: block; width: 100%; height: 100%; background: var(--bg-label); transition: background .4s; }
.bg-sizes__label { font-size: 14px; font-weight: 400; }
.bg-sizes button.is-on .bg-sizes__frame { background: #4A3324; box-shadow: 0 24px 30px -16px rgba(43,38,32,.6); }
.bg-sizes button.is-on .bg-sizes__frame span { background: #E7D2B6; }
.bg-sizes button.is-on .bg-sizes__label { font-weight: 600; }
.bg-sizes__note { text-align: center; }
@media (max-width: 1099px) { .bg-sizes { --k: 2.6px; } .bg-sizes__row { gap: 16px; } }
@media (max-width: 759px) { .bg-sizes { --k: 2.1px; } .bg-sizes__row { gap: 14px; min-height: 150px; } }

/* ---------- Formulieren (Contact Form 7) ---------- */
.bg-formgrid { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--split-gap); align-items: start; }
.bg-formgrid__intro { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 24px; }
.bg-formgrid__tip { font-size: 30px; line-height: 1.1; transform: rotate(-2deg); align-self: flex-start; }
.bg-formcard { padding: clamp(32px, 3.6vw, 52px); background: var(--bg-label); box-shadow: 0 1px 0 #D6CBB8, 0 40px 60px -40px rgba(43,38,32,.45); }
#aanvragen { padding-left: 0 !important; padding-right: 0 !important; scroll-margin-top: 20px; }
@media (max-width: 759px) {
	.bg-formgrid { grid-template-columns: 1fr; }
	.bg-formgrid__intro { position: static; }
	.bg-formcard { padding: 28px 20px; }
}
.bg-form .bg-fields { display: grid; grid-template-columns: 1fr; gap: 22px 18px; }
.bg-form--2 .bg-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bg-form .bg-full { grid-column: 1 / -1; }
@media (max-width: 759px) { .bg-form--2 .bg-fields { grid-template-columns: 1fr; } }
.bg-form label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; margin: 0; }
.bg-form p { margin: 0; }
.bg-form br { display: none; }
.bg-form .wpcf7-form-control-wrap { display: block; }
.bg-form input[type=text], .bg-form input[type=email], .bg-form input[type=tel], .bg-form select, .bg-form textarea {
	width: 100%; min-height: 56px; padding: 0 18px; border: 1px solid var(--bg-lijn); border-radius: 14px; background: #fff; color: var(--bg-inkt); font-size: 16px; font-weight: 400; outline: none; transition: border-color .2s;
}
.bg-form select { padding: 0 14px; }
.bg-form textarea { min-height: 0; padding: 16px 18px; line-height: 1.5; resize: vertical; }
.bg-form input:focus, .bg-form select:focus, .bg-form textarea:focus { border-color: var(--bg-inkt); }
.bg-form input[type=submit], .bg-form button[type=submit] {
	width: 100%; min-height: 58px; border: 0; border-radius: 999px; background: var(--bg-inkt); color: var(--bg-zand); font-size: 15px; font-weight: 500; cursor: pointer; transition: background .3s;
}
.bg-form input[type=submit]:hover { background: var(--bg-terra); }
.bg-form .wpcf7-spinner { position: absolute; margin: 18px 0 0 -40px; }
.bg-drop { position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px !important; min-height: 150px; padding: 24px; border: 1px dashed #B9A68C; border-radius: 999px 999px 14px 14px; background: var(--bg-papier); text-align: center; cursor: pointer; transition: all .3s; }
.bg-drop.has-file { border-color: var(--bg-terra); background: #F3E6DA; }
.bg-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bg-drop__title { font-family: var(--f-hand); font-size: 30px; line-height: 1; color: var(--bg-terra); font-weight: 400; }
.bg-drop__sub { font-size: 14px; color: var(--bg-tekst-2); font-weight: 400; }
.bg-form .wpcf7-not-valid-tip { font-size: 13px; color: #A3201B; margin-top: 4px; font-weight: 400; }
.bg-form .wpcf7-response-output { margin: 18px 0 0 !important; padding: 14px 18px !important; border-radius: 14px; font-size: 15px; border-width: 1px !important; }
.bg-form.sent .bg-fields, .wpcf7-form.sent .bg-fields { display: none; }
.wpcf7-form.sent .wpcf7-response-output { border: 0 !important; padding: 40px 8px !important; text-align: center; font-size: 18px; }
.wpcf7-form.sent .wpcf7-response-output::before { content: 'dankjewel!'; display: block; margin-bottom: 14px; font-family: var(--f-hand); font-size: 44px; line-height: 1; color: var(--bg-terra); }

/* ---------- Over ---------- */
.bg-over__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden; background: #D6CBB8; border: 14px solid #fff; box-shadow: 0 50px 70px -36px rgba(43,38,32,.6); }
.bg-over__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-over__tile { position: absolute; left: -12%; bottom: -6%; width: 34%; transform: rotate(-4deg); }
.bg-faq__grid--facts { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
.bg-woodbox { padding: clamp(14px, 1.5vw, 22px); background: linear-gradient(135deg, #5A3E2B, #3A2819); box-shadow: 0 50px 70px -36px rgba(43,38,32,.7); }
.bg-woodbox img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.bg-mats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-shop); }
.bg-mats > div { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--bg-inkt); }
.bg-mats__sw { display: flex; gap: 6px; }
.bg-mats__sw span { width: 30px; height: 30px; border-radius: 48% 52% 50% 46%; box-shadow: inset 0 0 0 1px rgba(43,38,32,.12); }
.bg-mats__t { margin: 0; font-family: var(--f-kop); font-weight: 400; font-size: 28px; line-height: 1.1; }
.bg-mats__d { font-size: 15px; color: var(--bg-tekst-3); }
.bg-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-shop); }
.bg-site .bg-opts__item { display: flex; flex-direction: column; gap: 18px; color: var(--bg-zand); text-decoration: none; }
.bg-opts__img { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden; background: #3A3029; }
.bg-opts__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bg-opts__item:hover .bg-opts__img img { transform: scale(1.05); }
.bg-opts__t { margin: 0; font-family: var(--f-kop); font-weight: 400; font-size: 30px; line-height: 1.1; }
.bg-opts__d { font-size: 15px; color: #CFC5B6; max-width: 22em; }
.bg-opts__cta { align-self: flex-start; font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--bg-perzik); color: var(--bg-perzik); }
@media (max-width: 1099px) { .bg-mats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
	.bg-over__tile { left: -4%; }
	.bg-over__tile.bg-fr--gilt { border-width: 7px; }
	.bg-faq__grid--facts { grid-template-columns: 1fr; }
	.bg-mats, .bg-opts { grid-template-columns: 1fr; }
	.bg-woodbox { padding: 12px; }
}

/* ---------- Contact ---------- */
.bg-contact__grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--split-gap); align-items: start; }
.bg-site .bg-contact__mail { align-self: flex-start; font-family: var(--f-it); font-style: italic; font-weight: 300; font-size: clamp(36px, 3.4vw, 52px); line-height: 1.1; color: var(--bg-terra); text-decoration: none; border-bottom: 1px solid var(--bg-terra); }
.bg-contact__note { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; background: var(--bg-donker); color: var(--bg-zand); max-width: 420px; }
.bg-contact__note > span:not(.bg-hand) { font-size: 15px; color: #CFC5B6; }
.bg-site .bg-contact__note a { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--bg-zand); text-decoration: none; border-bottom: 1px solid var(--bg-perzik); }
.bg-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-shop); align-items: end; }
.bg-strip .bg-fr { transform: rotate(var(--rot)); box-shadow: 0 30px 44px -24px rgba(43,38,32,.55); }
.bg-strip .bg-fr--black { border-width: 8px; padding: 0; }
.bg-strip .bg-fr--gilt { border-width: 10px; }
.bg-strip .bg-fr--white { border-width: 10px; }
.bg-fr--woodthin { border: 14px solid #4A3324; }
@media (max-width: 759px) {
	.bg-contact__grid { grid-template-columns: 1fr; }
	.bg-contact__mail { font-size: 32px !important; }
	.bg-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Shop
   ========================================================================== */
.bg-crumbs { font-size: 14px; color: var(--bg-tekst-2); }
.bg-crumbs span { margin: 0 6px; color: #B9A68C; }
.bg-site .bg-crumbs a { color: var(--bg-tekst-2); text-decoration: none; }
.bg-site .bg-crumbs a:hover { color: var(--bg-inkt); }
.bg-shop__intro { padding: clamp(56px, 6vw, 96px) var(--gutter) clamp(48px, 4vw, 64px); }
.bg-shop__introgrid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 64px; align-items: end; }
.bg-shop__lead { margin: 0; max-width: 30em; font-size: 18px; text-wrap: pretty; }
@media (max-width: 759px) { .bg-shop__intro { padding: 40px 20px; } .bg-shop__introgrid { grid-template-columns: 1fr; } }

.bg-filters { position: sticky; top: 0; z-index: 5; background: rgba(237,230,218,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid #D6CBB8; border-bottom: 1px solid #D6CBB8; }
.admin-bar .bg-filters { top: 32px; }
.bg-filters__in { max-width: 1320px; margin: 0 auto; padding: 14px var(--gutter); display: flex; flex-wrap: nowrap; align-items: center; gap: 12px 24px; }
.bg-pills { display: flex; gap: 8px; overflow-x: auto; flex: 1 1 auto; min-width: 0; padding: 2px 0; scrollbar-width: none; }
.bg-pills::-webkit-scrollbar { display: none; }
.bg-site .bg-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--bg-lijn); border-radius: 999px; background: transparent; color: var(--bg-inkt); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: all .3s; }
.bg-pill span { font-size: 12px; opacity: .65; }
.bg-site .bg-pill:hover { border-color: var(--bg-inkt); color: var(--bg-inkt); }
.bg-site .bg-pill.is-on { border-color: var(--bg-inkt); background: var(--bg-inkt); color: var(--bg-zand); }
.bg-selects { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; margin: 0; }
.bg-select { min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 16px; border: 1px solid var(--bg-lijn); border-radius: 999px; font-size: 14px; margin: 0; }
.bg-select > span { color: var(--bg-tekst-2); }
.bg-select select { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--bg-inkt); font-size: 14px; font-weight: 500; min-height: 40px; outline: none; cursor: pointer; padding: 0 4px; }
@media (max-width: 759px) {
	.bg-filters__in { flex-wrap: wrap; }
	.bg-selects { flex: 1 1 100%; }
	.bg-select { flex: 1 1 0; }
}

.bg-shop__grid { padding-top: 40px !important; }
.bg-shop__count { font-size: 14px; color: var(--bg-tekst-2); }
.bg-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-shop); }
@media (max-width: 1099px) { .bg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bg-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .bg-cards, .bg-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bg-shop__grid { padding-top: 28px !important; } }

.bg-card { display: flex; flex-direction: column; gap: 14px; }
.bg-card__img { position: relative; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; background: #E3D9C9; transition: background .5s; overflow: hidden; min-height: 0; }
.bg-card__img:hover { background: #DDD1BE; }
.bg-card__img img { display: block; width: 68%; object-fit: cover; box-shadow: 0 26px 36px -18px rgba(43,38,32,.6); transition: transform .7s var(--ease); }
.bg-card__img img.is-sq { width: 74%; box-shadow: 0 22px 30px -16px rgba(43,38,32,.55); }
.bg-card__img:hover img { transform: translateY(-6px); }
.bg-badge { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 999px; background: var(--bg-label); font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.bg-badge--inline { position: static; align-self: flex-start; padding: 5px 12px; }
.bg-card__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bg-card__txt { display: flex; flex-direction: column; min-width: 0; }
.bg-card__name { margin: 0; font-weight: 400; font-size: inherit; }
.bg-site .bg-card__name a { font-family: var(--f-it); font-style: italic; font-size: 21px; line-height: 1.15; color: inherit; text-decoration: none; }
.bg-card__sub { font-size: 13px; color: var(--bg-tekst-2); }
.bg-card__price { font-size: 15px; font-weight: 500; white-space: nowrap; }
.bg-site .bg-card__add { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--bg-terra); background: transparent; color: var(--bg-terra); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.bg-site .bg-card__add.added::after { content: ' ✓'; margin-left: 4px; }
.bg-card .added_to_cart { display: none; }
@media (max-width: 759px) { .bg-site .bg-card__name a { font-size: 18px; } }

.bg-empty { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 80px 20px; text-align: center; border-top: 1px solid var(--bg-lijn); }
.bg-empty p { margin: 0; max-width: 28em; font-size: 18px; }
.bg-site .bg-empty a:not(.bg-btn) { color: var(--bg-terra); }
.bg-shop .nav-links { display: flex; gap: 8px; justify-content: center; }
.bg-shop .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border: 1px solid var(--bg-lijn); border-radius: 999px; text-decoration: none; }
.bg-shop .page-numbers.current { background: var(--bg-inkt); color: var(--bg-zand); border-color: var(--bg-inkt); }

/* Banner */
.bg-banner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; padding: clamp(48px, 5vw, 80px); background: var(--bg-donker); color: var(--bg-zand); }
.bg-banner .bg-it { color: var(--bg-perzik); }
.bg-banner__img { justify-self: center; width: min(100%, 300px); padding: 12px; background: linear-gradient(135deg, #6A4A33, #3A2819); border-radius: 999px 999px 4px 4px; }
.bg-banner__img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 0 0; }
@media (max-width: 759px) { .bg-banner { grid-template-columns: 1fr; padding: 40px 24px; } .bg-banner__img { width: 70%; } }

/* ==========================================================================
   Productpagina
   ========================================================================== */
.bg-product__main { padding: clamp(32px, 3vw, 48px) var(--gutter) clamp(96px, 8vw, 130px); }
.bg-product__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.bg-gallery { position: sticky; top: 110px; display: flex; flex-direction: row; gap: 16px; }
.bg-gallery__thumbs { display: flex; flex-direction: column; gap: 10px; }
.bg-gallery__thumbs button { position: relative; width: 84px; aspect-ratio: 4 / 5; padding: 0; border: 1px solid transparent; background: #E3D9C9; overflow: hidden; cursor: pointer; }
.bg-gallery__thumbs button.is-on { border-color: var(--bg-inkt); }
.bg-gallery__thumbs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-gallery__stage { position: relative; flex: 1; min-width: 0; aspect-ratio: 4 / 5; background: #E3D9C9; overflow: hidden; cursor: zoom-in; display: flex; align-items: center; justify-content: center; }
.bg-gallery__art { width: 70%; overflow: hidden; box-shadow: 0 40px 60px -30px rgba(43,38,32,.6); }
.bg-gallery__art.is-sq { width: 76%; }
.bg-gallery__art img { display: block; width: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.bg-gallery__hint { position: absolute; right: 16px; bottom: 14px; font-size: 24px; color: var(--bg-tekst-2); pointer-events: none; transition: opacity .3s; }
.bg-gallery__stage:hover .bg-gallery__hint { opacity: 0; }
.bg-product__info { display: flex; flex-direction: column; gap: 28px; }
.bg-product__title { margin: 0; font-family: var(--f-kop); font-weight: 400; font-size: clamp(56px, 5vw, 84px); line-height: .95; letter-spacing: -.025em; }
.bg-product__sub { font-family: var(--f-it); font-style: italic; font-size: 22px; color: var(--bg-tekst-2); }
.bg-product__price { display: flex; align-items: baseline; gap: 10px; }
.bg-product__price > span { font-size: 26px; font-weight: 500; }
.bg-product__price small { font-size: 13px; color: var(--bg-tekst-2); }
.bg-product__desc { max-width: 32em; font-size: 18px; text-wrap: pretty; }
.bg-product__desc p { margin: 0 0 12px; }
.bg-product__desc p:last-child { margin: 0; }
.bg-buy { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.bg-qty { display: flex; align-items: center; min-height: 58px; border: 1px solid var(--bg-inkt); border-radius: 999px; }
.bg-qty button { width: 52px; height: 56px; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: var(--bg-inkt); padding: 0; }
.bg-qty input { width: 32px; border: 0; background: transparent; text-align: center; font-weight: 500; font-size: 16px; -moz-appearance: textfield; appearance: textfield; padding: 0; }
.bg-qty input::-webkit-outer-spin-button, .bg-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bg-buy__btn { flex: 1 1 220px; }
.bg-soldout { margin: 0; padding: 18px 22px; background: var(--bg-label); }
.bg-handmade { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px 22px; background: var(--bg-label); box-shadow: 0 1px 0 #D6CBB8; }
.bg-handmade__b { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #E3D9C9; font-family: var(--f-hand); font-size: 26px; color: var(--bg-terra); }
.bg-handmade > span:last-child { display: flex; flex-direction: column; }
.bg-handmade strong { font-weight: 500; }
.bg-handmade > span:last-child > span { font-size: 15px; color: var(--bg-tekst-3); }
.bg-acc { border-bottom: 1px solid var(--bg-lijn); }
.bg-acc details { border-top: 1px solid var(--bg-lijn); }
.bg-acc summary { display: flex; justify-content: space-between; align-items: center; min-height: 60px; font-size: 16px; font-weight: 500; list-style: none; cursor: pointer; }
.bg-acc summary::-webkit-details-marker { display: none; }
.bg-acc summary span { font-size: 22px; font-weight: 300; transition: transform .3s; }
.bg-acc details[open] summary span { transform: rotate(45deg); }
.bg-acc dl { margin: 0 0 22px; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 8px 20px; font-size: 15px; }
.bg-acc dt { color: var(--bg-tekst-2); }
.bg-acc dd { margin: 0; }
.bg-product .woocommerce-notices-wrapper { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 759px) {
	.bg-product__main { padding: 24px 20px 72px; }
	.bg-product__grid { grid-template-columns: 1fr; gap: 36px; }
	.bg-gallery { position: static; flex-direction: column-reverse; }
	.bg-gallery__thumbs { flex-direction: row; }
	.bg-gallery__thumbs button { width: 68px; }
	.bg-gallery__stage { cursor: default; }
	.bg-product__title { font-size: 52px; }
}

/* ==========================================================================
   WooCommerce-meldingen, winkelwagen, afrekenen, account
   ========================================================================== */
.bg-site .woocommerce-message, .bg-site .woocommerce-info, .bg-site .woocommerce-error {
	list-style: none; margin: 0 0 24px; padding: 16px 20px; border: 0; border-left: 3px solid var(--bg-terra); background: var(--bg-label); color: var(--bg-inkt); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.bg-site .woocommerce-message::before, .bg-site .woocommerce-info::before, .bg-site .woocommerce-error::before { display: none; }
.bg-site .woocommerce-message .button, .bg-site .woocommerce-info .button { order: 2; }
.bg-site .woocommerce-error { border-left-color: #A3201B; }

.woocommerce-cart .site-main, .woocommerce-checkout .site-main, .woocommerce-account .site-main,
.woocommerce-cart main#content, .woocommerce-checkout main#content, .woocommerce-account main#content {
	max-width: 1320px; margin: 0 auto; padding: clamp(40px, 5vw, 80px) var(--gutter) var(--secp);
}
.bg-wctitle { margin-bottom: 48px; }
.bg-site .woocommerce a.button, .bg-site .woocommerce button.button, .bg-site .woocommerce input.button, .bg-site .woocommerce #respond input#submit,
.bg-site .wc-block-components-button:not(.is-link), .bg-site .woocommerce .checkout-button, .bg-site #place_order {
	display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--bg-inkt); color: var(--bg-zand); font-family: var(--f-tekst); font-size: 15px; font-weight: 500; text-decoration: none; transition: background .3s;
}
.bg-site .woocommerce a.button:hover, .bg-site .woocommerce button.button:hover, .bg-site .woocommerce input.button:hover,
.bg-site .wc-block-components-button:not(.is-link):hover, .bg-site #place_order:hover { background: var(--bg-terra); color: var(--bg-zand); }
.bg-site .woocommerce a.button.alt, .bg-site .woocommerce button.button.alt { background: var(--bg-inkt); }
.bg-site .woocommerce table.shop_table { border: 0; border-collapse: collapse; border-radius: 0; }
.bg-site .woocommerce table.shop_table th { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--bg-tekst-2); }
.bg-site .woocommerce table.shop_table td, .bg-site .woocommerce table.shop_table th { border: 0; border-top: 1px solid var(--bg-lijn); padding: 18px 12px; background: transparent; }
.bg-site .woocommerce table.shop_table .product-name a { font-family: var(--f-it); font-style: italic; font-size: 21px; text-decoration: none; }
.bg-site .woocommerce table.cart img { width: 72px; }
.bg-site .woocommerce .cart_totals h2, .bg-site .woocommerce-checkout h3, .bg-site .woocommerce-account h2 { font-family: var(--f-kop); font-weight: 400; font-size: 32px; letter-spacing: -.01em; }
.bg-site .woocommerce form .form-row input.input-text, .bg-site .woocommerce form .form-row textarea, .bg-site .woocommerce form .form-row select,
.bg-site .woocommerce .quantity .qty, .bg-site .select2-container .select2-selection--single,
.bg-site .wc-block-components-text-input input, .bg-site .wc-block-components-combobox .wc-block-components-combobox-control input {
	min-height: 52px; padding: 0 16px; border: 1px solid var(--bg-lijn); border-radius: 14px; background: #fff; color: var(--bg-inkt); font-size: 16px;
}
.bg-site .select2-container .select2-selection--single .select2-selection__rendered { line-height: 50px; padding: 0; }
.bg-site .select2-container .select2-selection--single .select2-selection__arrow { height: 50px; }
.bg-site .woocommerce form .form-row label { font-size: 14px; font-weight: 500; }
.bg-site .woocommerce-checkout #payment { background: var(--bg-label); border-radius: 0; }
.bg-site .woocommerce-checkout #payment div.payment_box { background: var(--bg-papier); color: var(--bg-inkt); }
.bg-site .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--bg-papier); }
.bg-site .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--bg-lijn); }
.bg-site .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--bg-lijn); }
.bg-site .woocommerce-MyAccount-navigation a { display: block; padding: 14px 0; text-decoration: none; }
.bg-site .woocommerce-MyAccount-navigation .is-active a { color: var(--bg-terra); }

/* Privacy-vinkje in formulieren */
.bg-form label.bg-check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; color: var(--bg-tekst-3); }
.bg-form .bg-check .wpcf7-form-control-wrap, .bg-form .bg-check .wpcf7-list-item { display: inline; margin: 0; }
.bg-form .bg-check input[type=checkbox] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--bg-inkt); }
.bg-site .bg-form .bg-check a { color: var(--bg-terra); text-decoration: underline; }
.bg-form .bg-drop .wpcf7-form-control-wrap { position: static; }
.bg-form-missing { margin: 0; color: var(--bg-tekst-2); }

/* Categorieknoppen: op desktop doorlopen naar een volgende regel i.p.v. afsnijden */
@media (min-width: 760px) {
	.bg-filters__in { align-items: flex-start; }
	.bg-pills { flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 759px) {
	.bg-pills { margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
}
@media (min-width: 760px) {
	.bg-pills { gap: 6px; }
	.bg-site .bg-pill { padding: 0 14px; gap: 6px; }
	.bg-filters__in { gap: 12px 16px; }
	.bg-select { padding-left: 14px; }
}

/* ==========================================================================
   Tekstpagina's (algemene voorwaarden, privacybeleid) – blok "bg-legal"
   ========================================================================== */
.bg-legal { max-width: 780px; margin: 0 auto; padding: clamp(48px, 6vw, 96px) var(--gutter) var(--secp); font-size: 17px; line-height: 1.7; color: var(--bg-inkt); }
.bg-legal > * + * { margin-top: 18px; }
.bg-legal__kicker { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--bg-terra); }
.bg-legal h1 { margin: 14px 0 28px; font-family: var(--f-kop); font-weight: 400; font-size: clamp(52px, 6vw, 92px); line-height: .95; letter-spacing: -.03em; }
.bg-legal__lead { font-size: 19px; max-width: 34em; }
.bg-legal h2 { margin: 56px 0 14px; padding-top: 22px; border-top: 1px solid var(--bg-lijn); font-family: var(--f-kop); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.01em; }
.bg-legal h3 { margin: 28px 0 8px; font-family: var(--f-it); font-style: italic; font-weight: 400; font-size: 23px; line-height: 1.25; }
.bg-legal ul, .bg-legal ol { padding-left: 1.2em; }
.bg-legal li + li { margin-top: 8px; }
.bg-legal li::marker { color: var(--bg-terra); }
.bg-site .bg-legal a { color: var(--bg-terra); text-decoration: underline; text-underline-offset: 3px; }
.bg-legal strong { font-weight: 600; }
.bg-legal__table { margin: 20px 0 0; overflow-x: auto; }
.bg-legal__table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.bg-legal__table th { text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--bg-tekst-2); padding: 0 12px 10px 0; border-bottom: 1px solid var(--bg-inkt); }
.bg-legal__table td { vertical-align: top; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--bg-lijn); }
.bg-legal__form { margin-top: 18px; padding: 24px 26px; background: var(--bg-label); box-shadow: 0 1px 0 #D6CBB8; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-x: auto; color: var(--bg-inkt); border: 0; }
@media (max-width: 759px) {
	.bg-legal { padding-top: 40px; font-size: 16px; }
	.bg-legal__table table, .bg-legal__table thead, .bg-legal__table tbody, .bg-legal__table tr, .bg-legal__table td { display: block; }
	.bg-legal__table thead { display: none; }
	.bg-legal__table tr { padding: 14px 0; border-bottom: 1px solid var(--bg-lijn); }
	.bg-legal__table td { padding: 2px 0; border: 0; }
	.bg-legal__table td:first-child { font-weight: 600; }
}

/* ==========================================================================
   Werken altijd volledig tonen (geen bijsnijden), in de eigen verhouding
   ========================================================================== */
/* Shop- en gerelateerde kaarten */
.bg-card__img img, .bg-card__img img.is-sq { width: auto; height: auto; max-width: 74%; max-height: 82%; aspect-ratio: auto; object-fit: contain; }

/* Productpagina: grote foto */
.bg-gallery__art, .bg-gallery__art.is-sq { display: contents; }
.bg-gallery__art img { width: auto; height: auto; max-width: 82%; max-height: 86%; aspect-ratio: auto; object-fit: contain; box-shadow: 0 40px 60px -30px rgba(43,38,32,.6); }
/* Productpagina: miniaturen */
.bg-gallery__thumbs img { object-fit: contain; padding: 6px; }

/* Homepage: collectiewand – lijst volgt de verhouding van het werk */
.bg-work .bg-fr img { aspect-ratio: auto; height: auto; object-fit: contain; }

/* ==========================================================================
   Tekstblok (artikel) en productraster
   ========================================================================== */
.bg-art { padding-left: var(--gutter); padding-right: var(--gutter); }
.bg-art--papier { background: var(--bg-papier); }
.bg-art--donker { background: var(--bg-donker); color: var(--bg-zand); }
.bg-art--donker .bg-it { color: var(--bg-perzik); }
.bg-art__grid { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.bg-art--met-beeld .bg-art__grid { max-width: 1320px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.bg-art--links .bg-art__media { order: -1; }
.bg-art__text { display: flex; flex-direction: column; gap: 26px; }
.bg-art__body { font-size: 18px; line-height: 1.7; max-width: 38em; }
.bg-art__body > * { margin: 0; }
.bg-art__body > * + * { margin-top: 18px; }
.bg-art__body h3 { margin-top: 36px; font-family: var(--f-it); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.2; }
.bg-art__body ul { padding-left: 1.2em; }
.bg-art__body li + li { margin-top: 8px; }
.bg-art__body li::marker { color: var(--bg-terra); }
.bg-art--donker .bg-art__body li::marker { color: var(--bg-perzik); }
.bg-art__body strong { font-weight: 600; }
.bg-art__media img { display: block; width: 100%; height: auto; }
.bg-art__arch { padding: clamp(14px, 1.5vw, 22px); background: linear-gradient(135deg, #5A3E2B, #3A2819); border-radius: 999px 999px 6px 6px; box-shadow: 0 50px 70px -36px rgba(43,38,32,.7); }
.bg-art__arch img { border-radius: 999px 999px 0 0; aspect-ratio: 4 / 5; object-fit: cover; }
.bg-art__media .bg-woodbox img { aspect-ratio: auto; }
.bg-art__plain img { box-shadow: 0 40px 60px -30px rgba(43,38,32,.5); }
@media (max-width: 759px) {
	.bg-art--met-beeld .bg-art__grid { grid-template-columns: 1fr; }
	.bg-art--links .bg-art__media, .bg-art__media { order: -1; }
	.bg-art__body { font-size: 17px; }
}
.bg-prodsec { padding-left: var(--gutter); padding-right: var(--gutter); }
