/* Jagerbombers - lay-out voor alle pagina's (Noord Digital). Laadt na Hello en Elementor (prioriteit 99). */

/* Hoogte van de vaste header (sjabloon 74), gemeten 12-10-2026: 111 / 96 / 84 px. */
:root { --jb-kop: 112px; --jb-oranje: var(--e-global-color-accent, #E87722); }
@media (max-width: 1024px) { :root { --jb-kop: 96px; } }
@media (max-width: 767px) { :root { --jb-kop: 84px; } }

/* Body was wit (Hello-standaard): zichtbaar op de WooCommerce- en 404-pagina's en onder korte pagina's. */
html, body { background-color: #0A0A0A; }
body { color: #C7C7C7; }

/* Hello reset.css: a #c36 (roze), a:hover #336 (donkerblauw). Elementor-widgets met een eigen kleur winnen nog steeds. */
a { color: var(--jb-oranje); }
a:hover, a:focus { color: #F59A4B; }

/* Het eerste blok van een pagina begint altijd onder de vaste header: de eigen padding, met als minimum de header
   plus 24 px. Alleen het buitenste Elementor-document (niet header, footer, popup of een document in een document). */
.elementor:not(.elementor .elementor):not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) > .e-con:first-child {
	padding-block-start: max(var(--padding-top, 0px), calc(var(--jb-kop) + 24px));
}

/* ------------------------------------------------------------------ Hello-standaardsjabloon: winkelwagen,
   afrekenen, mijn account (WooCommerce) en de 404. Die hebben geen Elementor-opbouw. */
/* #content: Hello zet zelf body:not([class*=elementor-page-]) .site-main { padding-inline: 10px } (0,2,1) */
main#content.site-main {
	box-sizing: border-box; width: 100%; max-width: 1240px; margin: 0 auto;
	padding: calc(var(--jb-kop) + 40px) 20px 96px;
}
.site-main .page-header, .site-main .page-content, .site-main .page-header .entry-title { padding-inline: 0; margin-inline: 0; }
.site-main .page-header { margin: 0 0 32px; padding: 0; }
.site-main .page-header .entry-title, .site-main > h1 {
	margin: 0; color: #fff; font-size: clamp(32px, 5vw, 48px); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em;
}
.site-main .page-content { color: #C7C7C7; font-size: 16px; line-height: 1.6; }
.error404 .site-main .page-content p { font-size: 18px; margin: 0 0 24px; }

/* klassieke WooCommerce-formulieren (mijn account) */
.site-main .woocommerce form.login, .site-main .woocommerce form.register, .site-main .woocommerce form.lost_reset_password {
	max-width: 480px; margin: 0; padding: 32px; border: 1px solid #2A2A2A; border-radius: 12px; background: #141414;
}
.site-main .woocommerce h2 { color: #fff; font-size: 24px; margin: 0 0 20px; }
.site-main .woocommerce label { color: #E5E5E5; font-size: 14px; font-weight: 600; }
.site-main .woocommerce .required { color: var(--jb-oranje); text-decoration: none; }
.site-main .woocommerce input.input-text, .site-main .woocommerce select, .site-main .woocommerce textarea {
	box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid #2A2A2A; border-radius: 8px;
	background: #0A0A0A; color: #fff; font-size: 16px;
}
.site-main .woocommerce input.input-text:focus { outline: 2px solid var(--jb-oranje); outline-offset: 1px; border-color: transparent; }
.site-main .woocommerce .show-password-input { color: #8A8A8A; }
.site-main .woocommerce button.button, .site-main .woocommerce a.button, .site-main .woocommerce input.button {
	padding: 12px 24px; border: 0; border-radius: 8px; background: var(--e-global-color-primary, #0B8F68); color: #fff;
	font-size: 15px; font-weight: 700; cursor: pointer;
}
.site-main .woocommerce button.button:hover, .site-main .woocommerce button.button:focus,
.site-main .woocommerce a.button:hover, .site-main .woocommerce input.button:hover { background: #0A7558; color: #fff; }
.site-main .woocommerce .woocommerce-form-login__rememberme { display: inline-flex; gap: 8px; align-items: center; margin-left: 12px; font-weight: 500; }
.site-main .woocommerce-info, .site-main .woocommerce-message, .site-main .woocommerce-error {
	position: relative; padding: 14px 18px 14px 48px; border: 1px solid #2A2A2A; border-left: 3px solid var(--jb-oranje); border-radius: 8px; background: #141414; color: #E5E5E5; list-style: none;
}
/* het icoon van WooCommerce staat absoluut links; met de eigen padding stond het over het eerste woord */
.site-main .woocommerce-info::before, .site-main .woocommerce-message::before, .site-main .woocommerce-error::before { left: 18px; top: 14px; color: var(--jb-oranje); }

/* klassieke winkelwagen en afrekenen ([woocommerce_cart], [woocommerce_checkout]; de blokken waren leeg, 12-10-2026) */
.site-main .woocommerce table.shop_table { width: 100%; border: 1px solid #2A2A2A; border-radius: 12px; border-collapse: separate; border-spacing: 0; background: #141414; color: #E5E5E5; }
.site-main .woocommerce table.shop_table th, .site-main .woocommerce table.shop_table td { padding: 14px 16px; border: 0; border-top: 1px solid #2A2A2A; background: transparent; }
.site-main .woocommerce table.shop_table thead th, .site-main .woocommerce table.shop_table tr:first-child > * { border-top: 0; }
.site-main .woocommerce table.shop_table a { color: #fff; }
.site-main .woocommerce .cart_totals h2, .site-main .woocommerce h3, .site-main #order_review_heading { color: #fff; }
.site-main .woocommerce .return-to-shop { margin-top: 20px; }
.site-main .woocommerce-checkout #payment, .site-main .woocommerce-checkout #payment div.payment_box { background: #141414; color: #E5E5E5; border-radius: 12px; }
.site-main .woocommerce-checkout #payment ul.payment_methods { border-bottom-color: #2A2A2A; }

/* WooCommerce-blokken (winkelwagen, afrekenen): donkere velden en vlakken */
.site-main .wc-block-components-text-input input, .site-main .wc-block-components-textarea,
.site-main .wc-block-components-combobox .wc-block-components-combobox-control input,
.site-main .wc-blocks-components-select .wc-blocks-components-select__select {
	background: #0A0A0A !important; color: #fff !important; border-color: #2A2A2A !important;
}
.site-main .wc-block-components-text-input label, .site-main .wc-blocks-components-select__label { color: #8A8A8A !important; }
.site-main .wc-block-components-button:not(.is-link), .site-main .wc-block-cart__submit-button {
	background: var(--e-global-color-primary, #0B8F68) !important; color: #fff !important; border-radius: 8px !important; border: 0 !important;
}
.site-main .wp-block-woocommerce-empty-cart-block h2, .site-main .wc-block-cart__empty-cart__title { color: #fff; }
.site-main .wc-block-components-panel, .site-main .wc-block-components-totals-wrapper,
.site-main .wc-block-components-sidebar, .site-main .wc-block-checkout__form .wc-block-components-checkout-step {
	border-color: #2A2A2A !important;
}

/* ------------------------------------------------------------------ teamlid: een lange vultekst zonder spaties
   ("BioBioBio...") liep op tablet en telefoon het scherm uit */
.single-team .elementor-widget-text-editor, .single-team .elementor-heading-title { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ productpagina (sjabloon 7356): de beschrijving
   met maattabellen en de prijstabel van de vlag (producten uit Discord, 12-10-2026) */
.elementor-widget-woocommerce-product-content h3 { margin: 24px 0 8px; color: #fff; font-size: 18px; line-height: 1.3; font-weight: 700; }
.elementor-widget-woocommerce-product-content ul { margin: 0 0 12px; padding-left: 20px; }
.jb-maattabel { width: 100%; margin: 8px 0 12px; border-collapse: collapse; font-size: 14px; color: #E5E5E5; }
.jb-maattabel th, .jb-maattabel td { padding: 8px 12px; border: 0; border-bottom: 1px solid #2A2A2A; text-align: left; background: transparent; }
.jb-maattabel th { color: #fff; font-weight: 600; background: #141414; }
/* de rand van het uitklapblok (nested accordion) was licht grijs: donker zoals de rest */
.elementor-widget-n-accordion .e-n-accordion-item > .e-con { border-color: #2A2A2A !important; padding: 16px 18px; }
@media (max-width: 767px) {
	/* een tabel met vijf kolommen (vlagprijzen) past niet: binnen de beschrijving scrollen, niet de hele pagina */
	.elementor-widget-woocommerce-product-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.jb-maattabel { font-size: 13px; }
	.jb-maattabel th, .jb-maattabel td { padding: 6px 8px; }
}