.hp-side-shell{position:fixed;top:var(--hp-side-top,265px);transform:none;width:287px;box-sizing:border-box;z-index:90;max-height:calc(100vh - 290px);overflow-y:auto;overflow-x:hidden;padding:14px;border-radius:18px;background:radial-gradient(circle at 12% 18%,rgba(0,169,224,.18),transparent 42%),radial-gradient(circle at 88% 22%,rgba(236,0,140,.13),transparent 40%),radial-gradient(circle at 28% 84%,rgba(255,221,0,.16),transparent 42%),radial-gradient(circle at 92% 88%,rgba(34,34,34,.08),transparent 38%),#fafafa;box-shadow:0 5px 18px rgba(0,0,0,.10);backdrop-filter:blur(1px)}
.hp-side-shell-left{left:14px}.hp-side-shell-right{right:14px}
.hp-side-shell-intro{text-align:center;padding:2px 4px 12px}.hp-side-shell-intro h3{font-size:17px;margin:0 0 7px;font-weight:700}.hp-side-shell-intro p{font-size:12px;line-height:1.35;margin:0;color:#444}
.hp-side-stack{display:flex;flex-direction:column;gap:18px;align-items:center}.hp-side-card{position:relative;width:246px;box-sizing:border-box;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:11px;padding:15px;text-align:center;overflow:hidden;box-shadow:0 4px 13px rgba(0,0,0,.09)}
.hp-side-card-accent{height:5px;margin:-15px -15px 13px}.hp-accent-cyan{background:#00a9e0}.hp-accent-magenta{background:#ec008c}.hp-accent-yellow{background:#ffdd00}.hp-accent-black{background:#222}.hp-accent-light-cyan{background:#8edcf1}.hp-accent-light-magenta{background:#f3a6d2}
.hp-side-card-icon{font-size:31px;margin:1px 0 7px}.hp-side-card h4{font-size:16px;line-height:1.2;margin:0 0 8px;font-weight:700}.hp-side-card p{font-size:12.5px;line-height:1.4;margin:0 0 12px}.hp-side-card-button{display:inline-block;padding:7px 12px;border-radius:5px;background:#222;color:#fff!important;font-size:12.5px;font-weight:600;text-decoration:none}.hp-side-card-product-button{margin-left:6px}.hp-side-card-button:hover{background:#00a9e0;color:#fff!important;text-decoration:none}.hp-side-card-image{display:block;max-width:100%;height:auto;margin:0 auto 10px;border-radius:6px}
@media (max-width:1749px){.hp-side-shell{display:none!important}}



/* Side shell scrolling: only becomes active when content exceeds viewport */
.hp-side-shell{
    scrollbar-width:thin;
    scrollbar-color:rgba(0,0,0,.28) transparent;
    overscroll-behavior:contain;
}
.hp-side-shell::-webkit-scrollbar{width:7px}
.hp-side-shell::-webkit-scrollbar-track{background:transparent}
.hp-side-shell::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:8px}
.hp-side-shell::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.35)}

.hp-side-product-image{margin-bottom:10px}