@charset "UTF-8";
body {
  background-image: url("https://buyatjanssens.com/wp-content/uploads/2025/09/pexels-photo-1024975.jpeg\a");
  background-size: cover;
  /* always fills screen */
  background-attachment: fixed;
  /* stays in place on scroll */
  background-repeat: no-repeat;
  background-position: center;
}
/* --- Raised, shiny checkout button --- */
body.woocommerce-checkout .wp-block-woocommerce-checkout-actions-block button, body.woocommerce-checkout #place_order {
  background: linear-gradient(to bottom, #333 0%, #000 100%);
  /* subtle glossy gradient */
  color: #fff;
  /* white text */
  border-radius: 9999px;
  /* pill shape */
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  /* Raised look */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35), 0 3px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
/* --- Hover & focus effects --- */
body.woocommerce-checkout .wp-block-woocommerce-checkout-actions-block button:hover, body.woocommerce-checkout #place_order:hover, body.woocommerce-checkout .wp-block-woocommerce-checkout-actions-block button:focus, body.woocommerce-checkout #place_order:focus {
  background: linear-gradient(to bottom, #444 0%, #111 100%);
  /* slightly lighter shine */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 4px 4px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
  /* subtle lift on hover */
}
/* 1) Make all body text white */
body {
  color: #fff;
}
/* 2) Add a subtle dark overlay above the background image, behind content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  /* adjust 0.35–0.6 to taste */
  pointer-events: none;
  z-index: 0;
}
/* Ensure page content sits above the overlay */
body > * {
  position: relative;
  z-index: 1;
}
/* 3) Extra legibility */
body :where(h1, h2, h3, h4, h5, h6, p, li, a, span, label) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* Contain blending to the page */
html {
  isolation: isolate;
}
/* Auto-contrast for most text elements site-wide */
body :where(h1, h2, h3, h4, h5, h6, p, li, a, span, label, strong, em, small) {
  color: #fff !important;
  mix-blend-mode: difference;
  /* auto-contrast magic */
  text-shadow: none !important;
  /* let blending handle contrast */
}
/* If some components look strange, turn blending OFF inside them */
.wc-block-components-card, .site-header, .site-footer {
  mix-blend-mode: normal !important;
  color: inherit !important;
}