.hero-product-browser { --picker-card-width:120px; margin-top:14px; min-width:0; max-width:100%; }
.hero-product-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 4px; }
.hero-product-eyebrow { color:#e6f2f4; font-size:11px; font-weight:600; letter-spacing:.045em; }
.hero-product-toolbar p { margin:3px 0 0; color:#9cadb4; font-size:10px; line-height:1.4; }
.hero-product-navigation { display:flex; align-items:center; gap:6px; }
.hero-product-count { min-width:46px; color:#aebfc5; font-size:10px; font-variant-numeric:tabular-nums; }
.hero-product-arrow { display:grid; place-items:center; width:44px; height:44px; padding:10px; border:1px solid #455a63; border-radius:50%; background:#172329; color:#d9f4f6; cursor:pointer; }
.hero-product-arrow svg { width:20px; height:20px; }
#heroProductPrevious svg { transform:rotate(180deg); }
.hero-product-arrow:enabled:hover { border-color:#63dbe3; background:#1b3940; }
.hero-product-arrow:disabled { opacity:.3; cursor:default; }
.hero-product-arrow:focus-visible,.hero-product-option:focus-visible { outline:2px solid #9ff4f8; outline-offset:3px; }
.hero-product-picker { display:flex; gap:12px; width:100%; max-width:100%; overflow-x:auto; padding:14px max(4px,calc(50% - var(--picker-card-width) / 2)) 16px; scrollbar-width:none; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; touch-action:pan-x pan-y pinch-zoom; cursor:grab; }
.hero-product-picker::-webkit-scrollbar { display:none; }
.hero-product-picker.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.hero-product-option { position:relative; isolation:isolate; flex:0 0 var(--picker-card-width); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:151px; padding:12px 8px 14px; border:1px solid #3c505a; border-radius:13px; color:#b6c6ce; background:linear-gradient(145deg,#1c2a30,#101a1f); cursor:pointer; font:500 12px/1.3 'Inter Tight',Arial,sans-serif; scroll-snap-align:center; transition:border-color 180ms ease,background-color 180ms ease,box-shadow 180ms ease; }
.hero-product-option img { display:block; width:74px; height:85px; object-fit:contain; pointer-events:none; transform:scale(.94); transform-origin:center; transition:transform 220ms ease,filter 220ms ease; }
.hero-product-option[data-product-kind="pen"] img { width:80px; }
.hero-product-option-format { font-size:9px; color:#8eabb4; }
.hero-product-option::after { content:''; position:absolute; bottom:5px; width:20px; height:2px; background:#70f4fa; border-radius:2px; opacity:0; }
.hero-product-option:hover { border-color:#8ba8b3; color:#fff; }
.hero-product-option[aria-pressed="true"] { border-color:#4ee6ef; background:radial-gradient(ellipse at 50% 25%,#285b63,#132c34 75%); color:#fff; box-shadow:0 0 18px #00c6d51f,inset 0 1px 0 #beffff35; }
.hero-product-option[aria-pressed="true"] img { transform:scale(1.1); filter:drop-shadow(0 5px 9px #03101499); }
.hero-product-option[aria-pressed="true"]::after { opacity:1; }
.hero-product-option[aria-pressed="true"] .hero-product-option-format { color:#b1e2e5; }
.pen-showcase .pen-scene-viewport { touch-action:pan-y pinch-zoom; }
.pen-showcase .pen-scene-viewport::before { inset:2% -4% 0; background:radial-gradient(ellipse at 50% 46%,#314e58e0 0%,#142831d9 36%,#0c161ba6 53%,transparent 73%); }
.pen-showcase .pen-scene-viewport::after { content:''; position:absolute; z-index:-1; left:19%; right:19%; bottom:8%; height:7%; border-radius:50%; background:radial-gradient(ellipse,#59c6d426,#2565770b 55%,transparent 74%); pointer-events:none; }
.pen-showcase #penCanvas,.pen-showcase .pen-scene-poster { transform:translate3d(var(--viewer-swipe-x,0px),0,0); transition:opacity 220ms ease,transform 180ms ease; }
.pen-showcase .is-product-swiping #penCanvas,.pen-showcase .is-product-swiping .pen-scene-poster { transition:none; }
.pen-stage-arrow { position:absolute; top:50%; z-index:3; margin-top:-22px; background:#0e202bd9; border-color:#7cb8c05c; box-shadow:0 4px 18px #0003; }
.pen-stage-arrow--previous { left:4px; }
.pen-stage-arrow--next { right:4px; }
.pen-stage-arrow--previous svg { transform:rotate(180deg); }
.pen-stage-arrow:disabled { opacity:.18; }
.pen-view-modes { display:flex; justify-content:center; gap:4px; width:fit-content; max-width:100%; margin:10px auto 3px; padding:3px; background:#101e25e6; border:1px solid #47616b; border-radius:30px; }
.pen-view-modes button { min-height:44px; padding:9px 16px; color:#aabfc7; background:transparent; border:1px solid transparent; border-radius:24px; font:500 11px/1.35 'Inter Tight',Arial,sans-serif; cursor:pointer; }
.pen-view-modes button[aria-pressed="true"] { color:#e6ffff; border-color:#6be9ee61; background:#20434d; box-shadow:inset 0 1px 0 #b5f6fa24; }
.pen-view-modes button:disabled { opacity:.4; cursor:default; }
.pen-view-modes button:focus-visible { outline:2px solid #9ff4f8; outline-offset:3px; }
.pen-showcase .pen-interaction-hint { color:#b8cdd5; }
.hero-product-spec { color:#c8d4da; font-size:14px; line-height:1.5; margin:20px 0 10px; }
.hero-product-note { color:#94a6b0; font-size:12px; line-height:1.6; margin:0 0 24px; }
.pen-product-panel .onyx-stage-range { display:none; }
.pen-scene-loading { display:none; position:absolute; inset:0; align-items:center; justify-content:center; color:#a3b7c3; font-size:13px; letter-spacing:.01em; }
.pen-showcase[data-scene="loading"] .pen-scene-loading { display:flex; }
.pen-showcase[data-scene="loading"] .pen-scene-poster { visibility:visible; opacity:1; }
.pen-showcase[data-product-loading="true"] .pen-scene-loading { display:flex; }
.pen-showcase[data-product-loading="true"] #penCanvas { opacity:.3; }
.pen-showcase[data-product-fallback="true"] #penCanvas { opacity:0; pointer-events:none; visibility:hidden; }
.pen-showcase[data-product-fallback="true"] .pen-scene-poster { opacity:1; visibility:visible; }
/* Exact supplied artwork stays visible independently of WebGL initialization. */
.pen-showcase[data-product-presentation="image"] .pen-scene-poster { opacity:1; visibility:visible; filter:drop-shadow(0 18px 18px #0003); }
.pen-showcase[data-product-presentation="image"] #penCanvas { opacity:0; visibility:hidden; pointer-events:none; }
.pen-showcase[data-product-presentation="image"] .pen-scene-loading,
.pen-showcase[data-product-presentation="image"] .pen-ready-hint { display:none; }
.pen-showcase[data-product-presentation="image"] .pen-poster-hint { display:inline; }
/* Preserve the rail position while swiping between artwork and the pen. */
.pen-showcase[data-product-presentation="image"] .pen-scene-controls { visibility:hidden; }
.pen-scene-viewport:focus-visible { outline:2px solid #9ff4f8; outline-offset:3px; }
@media(max-width:1100px) { .hero-product-spec { margin:6px 0; } .hero-product-note { margin:0; } }
@media(min-width:761px) and (max-width:1100px) {
  .pen-product-panel { grid-template-columns:minmax(0,1fr) minmax(120px,160px); }
  .pen-product-heading { grid-column:1; grid-row:1; display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 14px; min-width:0; }
  .pen-product-heading .onyx-product-price { margin:0; }
  .pen-product-panel .hero-product-spec { grid-column:1; grid-row:2; margin:0; }
  .pen-product-panel .hero-product-note { grid-column:1; grid-row:3; margin:0; }
  .pen-product-panel .pen-product-link { grid-column:2; grid-row:1 / 4; }
}
@media(max-width:760px) {
  .hero-product-browser { --picker-card-width:104px; margin-top:8px; }
  .hero-product-picker { gap:10px; padding-top:12px; padding-bottom:14px; }
  .hero-product-option { min-height:140px; padding:10px 6px 13px; font-size:11px; }
  .hero-product-option img { height:76px; width:66px; }
  .pen-product-panel .hero-product-spec { grid-column:1; grid-row:2; margin:0; font-size:12px; }
  .pen-product-panel .hero-product-note { grid-column:1/-1; grid-row:3; font-size:10px; }
  .pen-product-heading { flex-wrap:wrap; grid-row:1; }
  .onyx-home .pen-product-heading h2 { font-size:23px; }
}
@media(max-width:420px) {
  .pen-view-modes { width:100%; flex-wrap:wrap; }
  .pen-view-modes button { flex:1 1 auto; padding-inline:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-product-option,.hero-product-option img,.pen-showcase #penCanvas,.pen-showcase .pen-scene-poster { transition:none; }
  .pen-showcase #penCanvas,.pen-showcase .pen-scene-poster { transform:none; }
}