/* Registration presentation only. Shared header and form behaviour remain unchanged. */
body.account-register-page { background: #f5f7fa; }
body.account-register-page footer.home-footer { background: #07111f; }
.account-register-page .register-page {
  --register-heading: #102238;
  --register-text: #102238;
  --register-muted: #52677f;
  --register-border: #dce4ed;
  width: 100% !important;
  max-width: 1440px;
  padding: 24px 28px 48px;
  background: transparent;
}
.account-register-page .product-breadcrumb { margin-bottom: 24px; font-size: 13px; }
.account-register-page .register-progress { margin-bottom: 28px; }
.account-register-page .register-progress[hidden] { display: none !important; }
.account-register-page .register-progress ol { grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 48px; border: 0; border-radius: 8px; overflow: hidden; background: #eaf0f6; }
.account-register-page .register-progress li { justify-content: center; padding: 12px 8px; background: transparent; color: #52677f; font-size: 12px; font-weight: 600; text-align: center; }
.account-register-page .register-progress li + li { border: 0; }
.account-register-page .register-progress li.is-complete { color: #263d54; }
.account-register-page .register-progress li.is-active { color: #005ab3; background: #deedff; box-shadow: inset 0 -2px #006bd1; }
.account-register-page .register-progress li.is-active::after { display: none; }
.account-register-page .register-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 24px; }
.account-register-page .register-visual { position: sticky; top: 24px; isolation: isolate; overflow: hidden; min-height: 740px; display: flex; align-items: center; padding: clamp(24px, 3vw, 44px); border-radius: 14px; background: #0b1d2c; color: #fff; }
.account-register-page .register-visual picture,
.account-register-page .register-visual img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.account-register-page .register-visual img { object-fit: cover; object-position: 72% center; }
.account-register-page .register-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, #07111ff2, #07111f8a 85%), linear-gradient(0deg, #07111fba, transparent); }
.account-register-page .register-eyebrow { display: block; color: #006bd1; font-size: 11px; font-weight: 800; letter-spacing: .18em; line-height: 1.6; }
.account-register-page .register-visual .register-eyebrow { color: #97d3ff; }
.account-register-page #registerVisualTitle { margin: 18px 0; color: #fff; font-size: clamp(30px, 3.25vw, 46px); font-weight: 900; font-style: italic; letter-spacing: -.04em; line-height: 1.08; }
.account-register-page #registerVisualTitle span { color: #42aaff; }
.account-register-page .register-visual-copy > p { max-width: 310px; margin: 0; color: #e1eaf4; font-size: 16px; line-height: 1.65; }
.account-register-page .register-benefits { list-style: none; display: grid; gap: 24px; margin: 44px 0 0; padding: 0; }
.account-register-page .register-benefits li { display: flex; align-items: flex-start; gap: 16px; }
.account-register-page .register-benefits svg { flex-shrink: 0; width: 25px; height: 25px; margin-top: 3px; fill: none; stroke: #97d3ff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.account-register-page .register-benefits strong { display: block; margin-bottom: 5px; color: #fff; font-size: 15px; }
.account-register-page .register-benefits span { display: block; color: #d0deeb; font-size: 13px; line-height: 1.6; }
.account-register-page .register-benefits .register-coins-image { position: static; inset: auto; z-index: auto; flex: 0 0 36px; width: 36px; height: 40px; margin: 0 -6px 0 -5px; object-fit: contain; object-position: center; }
.account-register-page .register-coins-benefit small { display: block; margin-top: 6px; color: #b8d1e7; font-size: 11px; line-height: 1.6; }
.account-register-page .register-card { min-width: 0; padding: 32px; background: #fff; border: 1px solid var(--register-border); border-radius: 14px; }
.account-register-page .register-card-heading h1 { margin: 8px 0 12px; color: #102238; font-size: clamp(26px, 2.5vw, 34px); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; }
.account-register-page .register-card-heading p { color: var(--register-muted); font-size: 13px; line-height: 1.6; }
.account-register-page .register-card-heading .register-login-link { margin: 0 0 30px; text-align: right; }
.account-register-page .register-login-link a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: 6px; color: #006bd1; font-weight: 700; }
.account-register-page .register-login-link a:hover { text-decoration: underline; }
.account-register-page .register-guest-title { display: none; }
.account-register-page .register-card:has(.register-account-only[hidden]) .register-account-title { display: none; }
.account-register-page .register-card:has(.register-account-only[hidden]) .register-guest-title { display: inline; }
.account-register-page #registerForm { display: grid; gap: 26px; width: 100%; margin: 28px 0 0; padding: 0 !important; background: transparent; border: 0; }
.account-register-page .register-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px 16px; padding-top: 24px; border-top: 1px solid var(--register-border); }
.account-register-page .register-section h2 { grid-column: 1 / -1; margin: 0 0 2px; color: #102238; font-size: 17px; font-weight: 750; }
.account-register-page .register-radio-group,
.account-register-page .register-wide-field,
.account-register-page .register-newsletter,
.account-register-page .register-shipping-section p { grid-column: 1 / -1; }
.account-register-page .register-field { min-width: 0; gap: 8px; }
.account-register-page .register-field > span,
.account-register-page .register-radio-group legend,
.account-register-page .register-newsletter strong { color: #263d54; font-size: 13px; font-weight: 600; }
.account-register-page .register-field:has(input[required]) > span::after { content: " *"; color: #ba2534; }
.account-register-page .register-required { color: #ba2534; }
.account-register-page .register-field:has(input[name="middleName"]) > span::after,
.account-register-page .register-field:has(input[name="houseNumberAddition"]) > span::after { content: " (optioneel)"; color: var(--register-muted); font-weight: 400; }
.account-register-page #registerForm .register-field input,
.account-register-page #registerForm .register-field select { width: 100%; min-width: 0; height: 50px; min-height: 50px; padding: 0 13px; border: 1px solid var(--register-border); border-radius: 8px; background: #fff; color: #102238; font: inherit; font-size: 16px; color-scheme: light; box-shadow: none; }
.account-register-page #registerForm .register-field input::placeholder { color: #65778b; }
.account-register-page #registerForm .register-field input:user-invalid { border-color: #ba2534; }
.account-register-page #registerForm .register-field input:focus,
.account-register-page #registerForm .register-field select:focus { border-color: #006bd1; outline: 3px solid #006bd126; outline-offset: 1px; }
.account-register-page .register-field small,
.account-register-page .register-field input:invalid:not(:placeholder-shown) + small { color: var(--register-muted); font-size: 12px; line-height: 1.5; }
.account-register-page .register-radio-group { background: transparent; }
.account-register-page .register-radio-group label { min-height: 48px; padding: 10px 18px; border-radius: 8px; box-shadow: none; }
.account-register-page .register-radio-group label:has(input:checked) { box-shadow: none; }
.account-register-page .register-radio-group label span { font-size: 14px; }
.account-register-page .register-newsletter { gap: 8px; cursor: pointer; }
.account-register-page .register-newsletter > span { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; color: #425971; font-size: 13px; line-height: 1.65; }
.account-register-page .register-newsletter input { width: 20px; min-width: 20px; height: 20px; min-height: 20px !important; margin: 1px 0 0; accent-color: #006bd1; color-scheme: light; }
.account-register-page .register-shipping-section p { margin: 0; color: var(--register-muted); font-size: 12px; font-weight: 400; line-height: 1.65; }
.account-register-page .register-actions { display: flex; flex-direction: column; gap: 10px; }
.account-register-page .register-actions .cart-primary-action { order: -1; width: 100%; min-height: 52px; padding: 14px 18px; border: 1px solid #006bd1; border-radius: 8px; background: #006bd1; color: #fff; font-size: 15px; font-weight: 750; cursor: pointer; }
.account-register-page .register-actions .cart-primary-action:hover { background: #005ab3; }
.account-register-page .register-actions .cart-primary-action:disabled { opacity: .65; cursor: wait; }
.account-register-page .register-actions .cart-secondary-action { min-height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #52677f; font-size: 13px; font-weight: 600; }
.account-register-page .register-actions .cart-secondary-action:hover { color: #006bd1; text-decoration: underline; }
.account-register-page .register-status { min-height: 0; margin-top: -12px; font-size: 13px; font-weight: 600; line-height: 1.6; }
.account-register-page .register-status:empty { display: none; }
.account-register-page .register-status.error { padding: 12px 0 12px 14px; border-left: 3px solid #ba2534; color: #a91c2b; }
.account-register-page .register-card :is(a, button, input):focus-visible { outline: 3px solid #249aff; outline-offset: 3px; }
.account-register-page .register-account-only[hidden],
.account-register-page .register-password-section:has(.register-account-only[hidden]) { display: none !important; }
@media (min-width: 721px) and (max-width: 1000px) {
  .account-register-page .register-layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 16px; }
  .account-register-page .register-card { padding: 24px; }
  .account-register-page .register-section { grid-template-columns: minmax(0, 1fr); }
  .account-register-page .register-visual { padding: 24px; }
  .account-register-page #registerVisualTitle { font-size: 28px; }
}
@media (max-width: 720px) {
  .account-register-page .register-page { padding: 0 0 28px; }
  .account-register-page .register-page > .product-breadcrumb,
  .account-register-page .register-progress { display: none; }
  .account-register-page .register-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .account-register-page .register-visual { position: relative; top: auto; min-height: 250px; padding: 28px 24px; border-radius: 0; }
  .account-register-page .register-visual img { object-position: 78% 35%; }
  .account-register-page #registerVisualTitle { margin: 12px 0; font-size: 32px; }
  .account-register-page .register-visual-copy > p { max-width: 260px; font-size: 13px; }
  .account-register-page .register-benefits { display: grid; margin-top: 24px; }
  .account-register-page .register-benefits li:not(.register-coins-benefit) { display: none; }
  .account-register-page .register-card { padding: 24px 20px 30px; border: 0; border-radius: 0; }
  .account-register-page .register-card-heading .register-login-link { margin-bottom: 22px; text-align: left; }
  .account-register-page .register-card-heading h1 { font-size: 28px; }
  .account-register-page .register-section { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 22px; }
}