/* Netlab_PreAccess — header bar, banners, popup, product badge and sign-up page.
   Follows the sketches in the plan artifact; colours per shop via .npa-theme-<store code>. */
.npa-theme-mostert_juweliers_nl, .npa-theme-trendjuwelier_nl { --npa-ink: #22303b; --npa-ink-text: #fff; --npa-soft: #eef1f3; --npa-muted: #5d5a6b; --npa-accent: #6a2d5c; --npa-line: #dedce6; }
.npa-theme-trendjuwelier_nl { --npa-ink: #1a1a1a; --npa-soft: #f1ece5; }

/* Header bar: takes the place of the header notification block */
.npa-bar { background: var(--npa-ink, #22303b); color: var(--npa-ink-text, #fff); font-size: 15px; line-height: 1.4; }
.npa-bar__inner { max-width: 1280px; margin: 0 auto; padding: 10px 16px; text-align: center; }
.npa-bar strong { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.npa-bar a { margin-left: 8px; color: inherit !important; font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* Banners (category + account): text left, buttons right */
.npa-banner { margin: 0 0 20px; padding: 18px 20px; border-radius: 8px; background: var(--npa-soft); color: #1d1b26; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.npa-banner__text { flex: 1 1 320px; min-width: 0; }
.npa-banner h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; font-weight: 700; color: #1d1b26; }
.npa-banner p { margin: 0; font-size: 15px; color: var(--npa-muted); }
.npa-banner__actions, .npa-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.npa-btn { display: inline-block; padding: 9px 16px; border: 1px solid var(--npa-ink, #22303b); border-radius: 6px; background: var(--npa-ink, #22303b); color: var(--npa-ink-text, #fff) !important; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none !important; white-space: nowrap; cursor: pointer; }
.npa-btn--ghost { background: transparent; color: var(--npa-ink, #22303b) !important; }
.npa-btn:hover, .npa-btn:focus-visible { opacity: .85; }
.npa-eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--npa-accent, #6a2d5c); }
.npa-small { margin: 0; font-size: 12px; color: var(--npa-muted, #5d5a6b); }

/* Popup */
.npa-popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 18, 28, .55); }
.npa-popup[hidden] { display: none; }
.npa-popup__dialog { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow: auto; padding: 26px; border-radius: 12px; background: #fff; color: #1d1b26; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
#npa-popup-content { display: grid; gap: 14px; }
#npa-popup-content > * { margin: 0; }
.npa-popup__dialog h3 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: #1d1b26; }
.npa-popup__dialog p { font-size: 15px; }
.npa-popup__close { position: absolute; top: 8px; right: 12px; border: 0; background: none; color: var(--npa-muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px; }

/* Product badge on tiles */
.product-card__image-container, .product-image-area { position: relative; }
.npa-chip--inline, .npa-discount, .npa-sale { background: #6a2d5c !important; color: #fff !important; border-color: #6a2d5c !important; }
.discount-percent.npa-discount { display: inline-block; width: auto; justify-self: start; align-self: start; padding: 2px 8px; border-radius: 4px; }
.npa-chip.npa-chip--inline { position: static; display: inline-block; margin: 0 0 8px; font-size: 13px; padding: 4px 10px; }
.npa-chip { position: absolute; left: 8px; bottom: 8px; z-index: 3; padding: 3px 8px; border-radius: 4px; background: #6a2d5c; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3; pointer-events: none; }

/* Sign-up page: the three steps side by side, the current one active */
.npa-signup { max-width: 1080px; margin: 24px auto 56px; color: #1d1b26; }
.npa-signup__intro { max-width: 640px; margin-bottom: 22px; }
.npa-signup__intro h1 { margin: 4px 0 10px; font-size: 30px; line-height: 1.2; }
.npa-signup__intro p { margin: 0 0 10px; color: var(--npa-muted); }
.npa-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.npa-panel { border: 1px solid var(--npa-line); border-radius: 10px; padding: 18px; background: #fff; display: grid; gap: 12px; align-content: start; }
.npa-panel p { margin: 0; }
.npa-panel h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.npa-panel__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--npa-accent); }
.npa-panel.is-active { border: 2px solid var(--npa-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.npa-panel.is-next { opacity: .55; background: var(--npa-soft); }
.npa-panel.is-done { background: var(--npa-soft); }
.npa-panel__summary { color: var(--npa-muted); }
.npa-panel__eyebrow { display: flex; align-items: center; gap: 6px; }
.npa-check { flex: none; color: var(--npa-ok, #2f7a4f); }
.npa-summary { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 14px; }
.npa-summary dt { color: var(--npa-muted); }
.npa-summary dd { margin: 0; overflow-wrap: anywhere; }
.npa-form { display: grid; gap: 6px; }
.npa-form label { font-weight: 600; font-size: 14px; margin-top: 4px; }
.npa-form .input-text { width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px; font-size: 16px; }
.npa-form .npa-btn { justify-self: start; margin-top: 10px; padding: 12px 20px; font-size: 16px; }
.npa-code { max-width: 220px; letter-spacing: .35em; font-size: 22px !important; text-align: center; }
.npa-code-preview { display: flex; gap: 6px; }
.npa-code-preview span { width: 34px; height: 42px; border: 1px solid var(--npa-line); border-radius: 6px; background: #fff; }
.npa-signup__secondary { margin-top: 16px; font-size: 14px; color: var(--npa-muted); }
.npa-link { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.npa-hp, .npa-sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Login page hint for people who signed up without a password */
.npa-loginhint { margin: 20px 0; padding: 16px 18px; border-radius: 8px; background: var(--npa-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.npa-loginhint p { margin: 0; color: #1d1b26; }
@media (max-width: 600px) {
    .npa-banner__actions, .npa-actions { width: 100%; flex-direction: column; }
    .npa-banner__actions .npa-btn, .npa-actions .npa-btn, .npa-loginhint .npa-btn { width: 100%; box-sizing: border-box; text-align: center; }
}
@media (max-width: 820px) {
    .npa-steps { grid-template-columns: 1fr; }
    .npa-panel.is-next > :not(.npa-panel__eyebrow) { display: none; }
    .npa-banner { padding: 16px; }
}