.loyalty-program-section{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:0;margin-top:0;margin-bottom:0}.loyalty-program-page{min-height:100vh;width:100%;background:linear-gradient(to bottom,#ffffff var(--header-height, 80px),#000000 var(--header-height, 80px));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin:0;position:relative;overflow:hidden}.back-to-store-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border-radius:999px;background:linear-gradient(135deg,#ffffff1f,#ffffff0f);color:#fff;text-decoration:none;letter-spacing:.12em;font-weight:700;font-size:.9rem;border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 30px #00000073,inset 0 1px #ffffff26;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.back-to-store-btn:hover{transform:translateY(-2px);background:linear-gradient(135deg,#ffffff29,#ffffff14);box-shadow:0 14px 36px #0000008c,inset 0 1px #fff3}.back-to-store-btn:active{transform:translateY(0)}.loyalty-header{text-align:center;margin-bottom:4rem;z-index:10}@media (max-width: 480px){.loyalty-header{margin-bottom:1.5rem}}.loyalty-title{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:300;color:#fff;margin:0 0 1rem;letter-spacing:.1em;text-transform:uppercase;opacity:.9}.loyalty-subtitle{font-size:clamp(2rem,6vw,4rem);font-weight:700;color:#fff;margin:0 0 1.5rem;letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(135deg,#fff,silver);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tier-indicator{display:flex;align-items:center;gap:.75rem;justify-content:center;margin-top:.75rem;color:#cfcfcf;font-size:.85rem;letter-spacing:.08em}.octagon-card-container{perspective:1000px;z-index:5;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));overflow:visible}.card-stack{position:relative;width:500px;height:320px;perspective:1000px;touch-action:pan-y;overscroll-behavior:contain;isolation:isolate;overflow:visible}.card-stack.slider{overflow:hidden}.card-stack.slider .octagon-card{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;transform:translate(110%)!important}.card-stack.slider .octagon-card.state-active{opacity:1;pointer-events:auto;transform:translate(0)!important;z-index:2}.card-stack.slider .octagon-card.state-left{opacity:0;transform:translate(-110%)!important;z-index:1}.card-stack.slider .octagon-card.state-right{opacity:0;transform:translate(110%)!important;z-index:1}.card-stack .octagon-card{position:absolute;top:0;left:0;transform-style:preserve-3d;transition:all .4s cubic-bezier(.25,.46,.45,.94);transform-origin:center center;will-change:transform,opacity}.card-stack .octagon-card[data-position="0"]{z-index:3;transform:translateZ(80px) scale(1) rotateY(0) rotate(0);opacity:1}.card-stack .octagon-card[data-position="1"]{z-index:2;transform:translate3d(220px,0,-80px) scale(.9) rotateY(-20deg) rotate(2deg);opacity:.75}.card-stack .octagon-card[data-position="2"]{z-index:1;transform:translate3d(-220px,0,-80px) scale(.9) rotateY(20deg) rotate(-2deg);opacity:.75}.card-stack .octagon-card.active{z-index:10!important}.card-stack .octagon-card.transitioning{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s cubic-bezier(.22,1,.36,1)}.card-stack .octagon-card.dragging{transition:none!important}@keyframes slideCardUp{0%{transform:translateY(0) scale(1) rotateY(0);z-index:10;opacity:1}40%{transform:translateY(-100%) scale(1.2) rotateY(30deg);z-index:10;opacity:1}70%{transform:translateY(-120%) scale(.7) rotateY(90deg);z-index:0;opacity:0}to{transform:translateY(30px) scale(.9) rotateY(-10deg);z-index:1;opacity:1}}@keyframes slideCardToTop{0%{transform:translateY(15px) scale(.95) rotateY(-5deg);z-index:2;opacity:1}30%{transform:translateY(-30px) scale(1.05) rotateY(10deg);z-index:10;opacity:1}70%{transform:translateY(-10px) scale(1.02) rotateY(5deg);z-index:10;opacity:1}to{transform:translateY(0) scale(1) rotateY(0);z-index:10;opacity:1}}@keyframes slideCardFromBottom{0%{transform:translateY(30px) scale(.9) rotateY(-10deg);z-index:1;opacity:1}40%{transform:translateY(20px) scale(.93) rotateY(-7deg);z-index:2;opacity:1}to{transform:translateY(15px) scale(.95) rotateY(-5deg);z-index:2;opacity:1}}@keyframes hideCard{0%{transform:translateY(0) scale(1) rotateY(0);z-index:10;opacity:1}40%{transform:translateY(-100%) scale(1.2) rotateY(30deg);z-index:10;opacity:1}70%{transform:translateY(-120%) scale(.7) rotateY(90deg);z-index:0;opacity:0}to{transform:translateY(30px) scale(.9) rotateY(-10deg);z-index:1;opacity:1}}.card-stack .octagon-card.slide-up{animation:slideCardUp .8s cubic-bezier(.25,.46,.45,.94) forwards}.card-stack .octagon-card.slide-to-top{animation:slideCardToTop .8s cubic-bezier(.25,.46,.45,.94) forwards}.card-stack .octagon-card.slide-from-bottom{animation:slideCardFromBottom .8s cubic-bezier(.25,.46,.45,.94) forwards}.card-stack .octagon-card.hide-card{animation:hideCard .8s cubic-bezier(.25,.46,.45,.94) forwards}.octagon-card{width:500px;height:320px;background:linear-gradient(135deg,#0a0a0a,#1a1a1a,#2a2a2a,#1a1a1a,#0a0a0a);border-radius:20px;position:relative;transform-style:preserve-3d;transition:transform .05s ease-out;cursor:pointer;box-shadow:0 20px 40px #000c,0 0 0 1px #ffffff1a,inset 0 1px #fff3,inset 0 -1px #0006;overflow:hidden}.octagon-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#ffffff1f,#c8dcff14,#ffffff08,#ffc8dc14,#ffffff1f);border-radius:20px;pointer-events:none}.card-shine{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none;transform:rotate(45deg)}.octagon-card:hover .card-shine{opacity:1}.card-content{position:relative;z-index:2;padding:1.5rem;height:100%;display:flex;flex-direction:column;justify-content:space-between}.card-top{display:flex;justify-content:space-between;align-items:flex-start}.card-logo{position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-start}.card-type{position:relative;z-index:2;font-size:.9rem;font-weight:700;color:#ccc;text-transform:uppercase;letter-spacing:.1em;text-shadow:0 1px 2px rgba(0,0,0,.5);align-self:flex-start}.card-middle{display:flex;justify-content:center;align-items:center;flex:1}.card-bottom{display:flex;justify-content:space-between;align-items:flex-end}.card-edge{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:20px;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 0 0 2px #ffffff08,inset 0 8px 20px #ffffff0d,inset 0 -8px 20px #00000080;mix-blend-mode:overlay;z-index:6}.card-glow{position:absolute;top:-10%;right:-10%;bottom:-10%;left:-10%;border-radius:28px;filter:blur(24px) saturate(1.2);opacity:.35;z-index:1}.metal-card .card-glow{background:radial-gradient(60% 60% at 50% 40%,rgba(180,200,220,.25),transparent 60%),radial-gradient(40% 40% at 70% 80%,rgba(255,255,255,.15),transparent 60%)}.gold-card .card-glow{background:radial-gradient(60% 60% at 50% 40%,rgba(251,191,36,.3),transparent 60%),radial-gradient(40% 40% at 70% 80%,rgba(245,158,11,.2),transparent 60%)}.emerald-card .card-glow{background:radial-gradient(60% 60% at 50% 40%,rgba(34,197,94,.3),transparent 60%),radial-gradient(40% 40% at 70% 80%,rgba(16,185,129,.2),transparent 60%)}.card-noise{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:20px;pointer-events:none;opacity:.07;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.45) 0px,rgba(255,255,255,.45) 1px,transparent 1px,transparent 2px),repeating-linear-gradient(90deg,rgba(0,0,0,.45) 0px,rgba(0,0,0,.45) 1px,transparent 1px,transparent 2px);mix-blend-mode:soft-light;z-index:4}.logo-image{max-width:120px;max-height:60px;object-fit:contain;filter:brightness(.6) contrast(1.4) saturate(.3) opacity(.9);mix-blend-mode:multiply;text-shadow:0 1px 0 rgba(255,255,255,.1),0 -1px 0 rgba(0,0,0,.3),inset 0 1px 2px rgba(0,0,0,.5)}.logo-text{font-size:1.2rem;font-weight:900;color:#646464e6;text-transform:uppercase;letter-spacing:.2em;text-shadow:0 1px 0 rgba(255,255,255,.1),0 -1px 0 rgba(0,0,0,.4),inset 0 1px 2px rgba(0,0,0,.6);mix-blend-mode:multiply}.card-holder{display:flex;flex-direction:column;align-items:flex-start}.card-valid{display:flex;flex-direction:column;align-items:flex-end;text-align:right}.card-label{position:relative;z-index:2;font-size:.7rem;font-weight:500;color:#999;text-transform:uppercase;letter-spacing:.1em;text-shadow:0 1px 1px rgba(0,0,0,.5);margin-bottom:.2rem}.card-customer-name{position:relative;z-index:2;font-size:1rem;font-weight:600;color:#dcdcdce6;text-transform:uppercase;letter-spacing:.05em;text-shadow:0 1px 0 rgba(255,255,255,.1),0 -1px 0 rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.5);mix-blend-mode:multiply}.card-date{position:relative;z-index:2;font-size:1rem;font-weight:600;color:#dcdcdce6;letter-spacing:.1em;text-shadow:0 1px 0 rgba(255,255,255,.1),0 -1px 0 rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.5);mix-blend-mode:multiply}.card-number{position:relative;z-index:2;font-family:Courier New,Monaco,monospace;font-size:1.4rem;font-weight:600;color:#ffffffe6;letter-spacing:.2em;text-shadow:0 1px 0 rgba(255,255,255,.1),0 -1px 0 rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.5);mix-blend-mode:multiply;text-align:center}.metallic-overlay{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:20px;pointer-events:none;z-index:5;mix-blend-mode:soft-light;opacity:.6;transition:background .2s cubic-bezier(.25,.46,.45,.94)}.metal-card .metallic-overlay{background:linear-gradient(45deg,#ffffff0a,#b4c8dc14,#dce6f00d 40%,#ffffff1a,#f0dce60d 60%,#c8b4dc14,#ffffff0a)}.gold-card .metallic-overlay{background:linear-gradient(45deg,#b8860b26,#f59e0b40,#fbbf2433 40%,#ffeb3b59,#fbbf2433 60%,#f59e0b40,#b8860b26)}.emerald-card .metallic-overlay{background:linear-gradient(45deg,#05966926,#10b98140,#22c55e33 40%,#4ade8059,#22c55e33 60%,#10b98140,#05966926)}.octagon-card:hover{box-shadow:0 30px 60px #000c,0 0 0 1px #fff3,inset 0 1px #ffffff4d,0 0 50px #ffffff1a}.tier-dots{display:inline-flex;align-items:center;gap:10px}.tier-dots .dot{width:12px;height:12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:#ffffff14;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;outline:none}.tier-dots .dot:hover{transform:scale(1.15);box-shadow:0 0 0 6px #ffffff0f}.tier-dots .dot:focus-visible{box-shadow:0 0 0 4px #fff3}.tier-dots .dot.active[data-tier=metal]{background:linear-gradient(135deg,#c8d2dce6,#78828ce6)}.tier-dots .dot.active[data-tier=gold]{background:linear-gradient(135deg,#fbbf24f2,#f59e0bf2)}.tier-dots .dot.active[data-tier=emerald]{background:linear-gradient(135deg,#22c55ef2,#10b981f2)}@media (max-width: 480px){.card-stack{width:90vw;height:220px;touch-action:none;overscroll-behavior:none}.octagon-card{width:90vw;height:220px;will-change:transform}.card-glow{filter:blur(16px);opacity:.3}.tier-indicator{gap:.5rem;font-size:.8rem}.tier-dots .dot{width:10px;height:10px}.card-stack .octagon-card[data-position="1"]{transform:translate3d(120px,0,-60px) scale(.9) rotateY(-16deg) rotate(1.5deg)}.card-stack .octagon-card[data-position="2"]{transform:translate3d(-120px,0,-60px) scale(.9) rotateY(16deg) rotate(-1.5deg)}@keyframes slideCardUp{0%{transform:translateY(0) scale(1) rotateY(0);z-index:10;opacity:1}40%{transform:translateY(-100%) scale(1.1) rotateY(25deg);z-index:10;opacity:1}70%{transform:translateY(-120%) scale(.8) rotateY(80deg);z-index:0;opacity:0}to{transform:translate(20px,16px) scale(.93) rotateY(-4deg) rotate(-3deg);z-index:1;opacity:1}}@keyframes hideCard{0%{transform:translateY(0) scale(1) rotateY(0);z-index:10;opacity:1}40%{transform:translateY(-100%) scale(1.1) rotateY(25deg);z-index:10;opacity:1}70%{transform:translateY(-120%) scale(.8) rotateY(80deg);z-index:0;opacity:0}to{transform:translate(20px,16px) scale(.93) rotateY(-4deg) rotate(-3deg);z-index:1;opacity:1}}}.card-content{padding:1.2rem}.logo-image{max-width:80px;max-height:40px}.logo-text{font-size:.9rem}.card-type{font-size:.8rem}.card-number{font-size:1.1rem;letter-spacing:.12em}.card-customer-name,.card-date{font-size:.85rem}.card-label{font-size:.55rem}
/*# sourceMappingURL=/cdn/shop/t/20/assets/loyalty-program.css.map */