.namebadge-page [hidden] { display:none!important; }
.namebadge-page .lanyard-intro h1 { font-size:clamp(38px,5.1vw,70px); }
.namebadge-page .flyer-layout { align-items:start; }
.nb-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.nb-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.nb-options .choice-surface { flex-direction:column; text-align:center; align-items:center; justify-content:center; padding:18px 12px; gap:8px; height:100%; }
.nb-options strong { font-size:14px; line-height:1.3; font-weight:800; }
.nb-options small { font-size:11px; line-height:1.5; color:#536174; }
.nb-fasteners .choice-surface { padding:0 0 13px; gap:6px; overflow:hidden; justify-content:flex-start; }
.nb-fastener-image { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; margin-bottom:7px; }
.nb-fasteners strong,.nb-fasteners small { padding:0 9px; }
.nb-material { display:grid; place-items:center; width:100%; max-width:155px; height:65px; border-radius:5px; margin:5px 0 10px; background:#244f91; color:white; font-size:19px; font-weight:900; box-shadow:0 5px 7px #223b571b; }
.nb-material--metall { background:linear-gradient(115deg,#b8bfc3,#f0f2f3 45%,#b9c0c5); color:#223b57; }
.nb-colors { grid-template-columns:repeat(5,minmax(0,1fr)); }
.nb-colors .choice-surface { padding:13px 5px 10px; }
.nb-colors strong { font-size:10px; }
.nb-swatch { display:block; width:37px; height:37px; background:var(--swatch); border:1px solid #223b5730; border-radius:50%; box-shadow:inset 0 0 0 2px #ffffff30; }
.nb-brushed { background:repeating-linear-gradient(0deg,#ffffff20 0px,#00000009 1px,transparent 2px),linear-gradient(110deg,transparent,#ffffff70,transparent),var(--swatch); }
.nb-shape { display:block; width:85px; max-width:90%; aspect-ratio:var(--ratio); background:#cdd6df; border:1px solid #718192; border-radius:3px; margin:9px 0; }
.nb-shape--oval { border-radius:50%; }.nb-shape--tv { border-radius:13px; }
.nb-custom-icon { display:grid; place-items:center; width:85px; height:43px; font-size:30px; margin:9px 0; border:1px dashed #718192; border-radius:7px; }
.nb-custom { border-top:1px solid #dce0e5; margin-top:20px; padding-top:18px; }
.nb-custom>p { font-size:13px; line-height:1.65; }.nb-custom label,.nb-quantity-label { display:block; font-size:13px; font-weight:700; margin:12px 0; }
.nb-custom input,.nb-custom select,.nb-quantity-label input { display:block; width:100%; padding:12px; border:1px solid #acb7c1; border-radius:4px; color:#223b57; background:#fff; font-size:16px; margin-top:7px; }
.nb-quantity-label input { font-size:26px; font-weight:800; max-width:190px; }
.nb-quantity-buttons { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }.nb-quantity-buttons button { border:1px solid #c1c9d0; background:#fff; color:#223b57; padding:9px 13px; border-radius:4px; font-size:12px; font-weight:700; }.nb-quantity-buttons button:hover { background:#f5f2ed; }.nb-quantity-buttons button[aria-pressed=true] { border-color:#223b57; background:#223b57; color:white; }
.nb-price-rules { padding-left:18px; font-size:12px; line-height:1.8; margin:0; }
.nb-preview { background:#ede7de; border-radius:8px; margin:0 0 18px; overflow:hidden; }
.nb-preview-top { display:flex; justify-content:space-between; gap:12px; padding:20px 24px 0; font-size:11px; font-weight:700; color:#596675; }
#badge-preview { display:block; width:100%; max-height:380px; }
#badge-brand { font-size:23px; font-weight:900; letter-spacing:3px; }#badge-name { font-size:34px; font-weight:850; letter-spacing:-1px; }#badge-role { font-size:22px; }
.nb-preview figcaption { padding:0 24px 21px; font-size:11px; line-height:1.6; color:#596675; max-width:520px; }
.nb-costs { margin-top:20px; padding-top:18px; border-top:1px solid #ffffff30; display:grid; gap:10px; font-size:12px; }.nb-costs>div { display:flex; justify-content:space-between; gap:14px; }.nb-costs strong { white-space:nowrap; }
.nb-summary-note { font-size:11px; line-height:1.7; margin:16px 0 0; color:#d4dce3; }
.nb-information { padding-top:25px; padding-bottom:70px; }.nb-information>div:first-child { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; margin-bottom:35px; }.nb-information h2 { font-weight:900; font-size:clamp(30px,3vw,44px); letter-spacing:-.04em; }.nb-information p { font-size:14px; line-height:1.75; margin:0; }.nb-info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }.nb-info-grid article { padding-top:20px; border-top:2px solid #f29a79; }.nb-info-grid h3 { font-size:22px; font-weight:800; margin-bottom:14px; }
.namebadge-page .flyer-summary [aria-disabled=true] { opacity:.6; cursor:wait; }.namebadge-page .btn:disabled { opacity:.6; }
@media(max-width:1100px) { .nb-colors { grid-template-columns:repeat(4,minmax(0,1fr)); }.nb-formats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:850px) { .namebadge-page .flyer-layout { display:flex; flex-direction:column; }.namebadge-page .print-summary-column { display:contents; }.namebadge-page .flyer-steps,.namebadge-page .flyer-summary { width:100%; }.namebadge-page .nb-preview { order:-1; width:100%; max-width:600px; margin:0 auto; }.nb-information>div:first-child,.nb-info-grid { grid-template-columns:1fr; gap:25px; }.nb-colors { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:580px) { .nb-options strong { font-size:12px; }.nb-options .choice-surface { padding:14px 9px; }.nb-colors .choice-surface { padding:12px 4px; }.nb-colors strong { font-size:9px; }.nb-colors { grid-template-columns:repeat(4,minmax(0,1fr)); }.nb-preview-top { padding:16px 18px 0; font-size:10px; }.nb-preview figcaption { padding:0 18px 17px; }.nb-information { padding-bottom:45px; } }