/* Homepage blocks on /main (home_blocks.py, 2026-10-03): hero prices, product card actions, trust block.
   Own classes (gs-hb-*) so nothing depends on Tailwind classes missing from the prebuilt app.css. */
.gs-hb-prices { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.gs-hb-prices ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.gs-hb-prices a { display: inline-flex; align-items: baseline; gap: .45rem; padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--gs-border, rgba(255,255,255,.15)); background: var(--gs-card, rgba(15,23,42,.6)); font-size: .85rem; text-decoration: none; color: inherit; transition: border-color .2s ease; }
.gs-hb-prices a:hover, .gs-hb-prices a:focus-visible { border-color: #3b82f6; }
.gs-hb-pname { color: #cbd5e1; }
.gs-hb-pprice { color: #60a5fa; font-weight: 600; }
.gs-hb-vat { font-size: .75rem; color: #94a3b8; margin: 0; }
html.light .gs-hb-pname { color: #334155; }
html.light .gs-hb-pprice { color: #1d4ed8; }
html.light .gs-hb-vat { color: #64748b; }

.gs-hb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: .25rem; }
.gs-hb-app { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: .6rem; background: linear-gradient(90deg, #3b82f6, #6366f1); color: #fff; font-weight: 600; font-size: .875rem; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.gs-hb-app:hover, .gs-hb-app:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(59,130,246,.55); }
.gs-hb-info { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .875rem; text-decoration: none; }
.gs-hb-info:hover, .gs-hb-info:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.gs-hb-card { scroll-margin-top: 6rem; }

.gs-hb-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.gs-hb-trust-grid > li { display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem; border-radius: 1rem; }
.gs-hb-trust-grid h3 { font-size: 1.1rem; font-weight: 700; color: #f1f5f9; margin: 0; }
.gs-hb-trust-grid p { color: #cbd5e1; font-size: .9rem; line-height: 1.5; margin: 0; }
.gs-hb-trust-grid .gs-hb-sub { color: #94a3b8; font-size: .78rem; }
.gs-hb-uptime { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; font-size: .85rem; }
.gs-hb-uptime li { display: contents; }
.gs-hb-uptime span { color: #cbd5e1; }
.gs-hb-uptime b { color: #34d399; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.gs-hb-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; color: #60a5fa; font-weight: 600; font-size: .875rem; text-decoration: none; }
.gs-hb-link:hover, .gs-hb-link:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
html.light .gs-hb-trust-grid h3 { color: #0f172a; }
html.light .gs-hb-trust-grid p, html.light .gs-hb-uptime span { color: #334155; }
html.light .gs-hb-trust-grid .gs-hb-sub { color: #64748b; }
html.light .gs-hb-uptime b { color: #047857; }
html.light .gs-hb-link { color: #1d4ed8; }
@media (max-width: 900px) { .gs-hb-trust-grid { grid-template-columns: 1fr; } }

/* Small gaps so the service cards clear the block above them, and the trust
   heading clears the contact form. Tailwind py-* is not in the prebuilt CSS. */
#diensten { padding-top: 6.5rem; }
#vertrouwen { padding-top: 2.5rem; padding-bottom: 5.5rem; }
#site-promo { padding-top: 4.5rem; }
/* Banner network off: logo band only, no slot height; balanced compact spacing. */
#site-promo.site-promo--compact { padding-top: 2.5rem; padding-bottom: 2.5rem; }
#site-promo.site-promo--compact > .container { gap: 0; }
#site-promo.site-promo--compact .gss-slot { display: none; margin: 0; min-height: 0; }
@media (max-width: 640px) {
  #site-promo.site-promo--compact { padding-top: 2rem; padding-bottom: 2rem; }
}

/* contact form loading dots (replaces inline style attributes; CSP style-src has no 'unsafe-inline') */
.gs-hb-d150 { animation-delay: 150ms; }
.gs-hb-d300 { animation-delay: 300ms; }

/* trust badges: internet.nl shield link */
.trust-badges a.secure-checkout-link { display: inline-block; border-radius: 10px; }
.trust-badges a.secure-checkout-link:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; }

/* Membership comparison on /shop: row explanation under the label */
.gs-sup-hint { display: block; font-weight: 400; font-size: .75rem; line-height: 1.35; color: #94a3b8; margin-top: .2rem; max-width: 28ch; }
html.light .gs-sup-hint { color: #64748b; }