/* ================================================================
   RESET & BASE
   ================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Fluid shell: clip sideways overflow on ALL phones (Samsung display-size /
   larger system fonts used to push grid tracks past the viewport so the
   right edge looked "cut off"). overflow-x:clip keeps position:sticky working. */
/* color-scheme:dark → Android/Chrome system scrollbars stay dark (light
   classic scrollbars look like a white strip on the right and make the page
   look right-shifted inside Device Lab iframes). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;max-width:100%;color-scheme:dark}
body{font-family:'Outfit',sans-serif;background:#09090b;color:#fff;min-height:100vh;line-height:1.5;font-size:18px;overflow-x:clip;max-width:100%;width:100%;min-width:0;padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0);color-scheme:dark}
::placeholder{color:rgba(255,255,255,.85);opacity:1}
/* Screen-reader only — visible to assistive tech, invisible to sighted users. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Focus rings for keyboard users. :focus-visible keeps them off for mouse users. */
*:focus-visible{outline:2px solid var(--fel);outline-offset:2px;border-radius:4px}
/* Contain every page root so marquee/hero tickers never widen the document. */
main{overflow-x:clip;max-width:100%;min-width:0;width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit;max-width:100%}
input,select{font-family:inherit;max-width:100%}
img{display:block;max-width:100%}
video,canvas{display:block;max-width:100%;height:auto}
::selection{background:rgba(74,222,128,.3);color:#fff}
/* Dark scrollbars (Firefox + WebKit). Avoid pure-white system tracks. */
html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
::-webkit-scrollbar{width:6px;height:6px;background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
::-webkit-scrollbar-corner{background:transparent}

/* ================================================================
   CSS VARIABLES
   ================================================================ */
:root{
  --mobile-nav-h:74px;
  --fel:#4ade80;--ooze:#a855f7;--rose:#c084fc;
  --zinc-950:#09090b;--zinc-900:#18181b;--zinc-800:#27272a;--zinc-700:#3f3f46;
  /* Gray chrome text → white site-wide. Keep --fel/--ooze/--rose + zinc-700 (empty stars / empty icons). */
  --zinc-600:#ffffff;--zinc-500:#ffffff;--zinc-400:#ffffff;--zinc-300:#ffffff;--zinc-200:#ffffff;--zinc-100:#ffffff;
  --gradient-primary:linear-gradient(135deg,var(--fel),var(--ooze));
  --gradient-brand:linear-gradient(125deg,#4ade80 0%,#22d3ee 22%,#a855f7 48%,#f472b6 72%,#fbbf24 100%);
  --gradient-brand-flow:linear-gradient(90deg,#4ade80,#22d3ee,#a855f7,#f472b6,#fbbf24,#4ade80);
  --glow-fel:rgba(74,222,128,.25);
  --glow-brand:0 4px 18px rgba(74,222,128,.35),0 2px 12px rgba(168,85,247,.3),0 0 20px rgba(244,114,182,.18);
}

/* ================================================================
   KEYFRAMES
   ================================================================ */
@keyframes float1{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-24px) rotate(3deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(-4deg)}}
@keyframes float3{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(2deg)}}
@keyframes orbFloat{0%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-40px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}100%{transform:translate(0,0) scale(1)}}
@keyframes orbFloat2{0%{transform:translate(0,0) scale(1)}33%{transform:translate(-40px,30px) scale(.95)}66%{transform:translate(25px,-25px) scale(1.05)}100%{transform:translate(0,0) scale(1)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes marquee-scroll{
  0%{margin-left:0}
  100%{margin-left:-50%}
}
@keyframes cardShine{0%{left:-100%}100%{left:200%}}
@keyframes chipPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.3)}50%{box-shadow:0 0 12px 4px rgba(74,222,128,.15)}}
@keyframes heroText{0%{opacity:0;transform:translateY(40px);filter:blur(8px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-10%)}30%{transform:translate(3%,5%)}50%{transform:translate(-8%,2%)}70%{transform:translate(6%,-6%)}90%{transform:translate(-3%,8%)}}
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes borderRotate{0%{--angle:0deg}100%{--angle:360deg}}
@keyframes toastIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{from{transform:translateX(0);opacity:1}to{transform:translateX(120%);opacity:0}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes stickySlide{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes logoFlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes logoIconPulse{0%,100%{box-shadow:var(--glow-brand);filter:saturate(1.05)}50%{box-shadow:0 4px 22px rgba(34,211,238,.45),0 2px 16px rgba(168,85,247,.4),0 0 24px rgba(251,191,36,.25);filter:saturate(1.2)}}
@keyframes cartBounce{0%{transform:scale(1)}30%{transform:scale(1.4)}60%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes holoShimmer{0%{opacity:.15}50%{opacity:.35}100%{opacity:.15}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Toast Notification ---- */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:60;display:flex;flex-direction:column;gap:8px;pointer-events:none}
@media(max-width:639px){.toast-container{bottom:80px;right:12px;left:12px}}
.toast{pointer-events:all;background:rgba(24,24,27,.95);backdrop-filter:blur(16px);border:1px solid rgba(74,222,128,.2);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 40px rgba(0,0,0,.4);animation:toastIn .4s cubic-bezier(.16,1,.3,1) forwards;max-width:380px}
.toast.out{animation:toastOut .3s ease forwards}
.toast-check{width:32px;height:32px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast-check svg{width:16px;height:16px;color:#000}
.toast-body{flex:1;min-width:0}
.toast-body p{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast-body span{font-size:15px;color:var(--zinc-500)}
.toast-actions{display:flex;gap:8px;margin-top:6px}
.toast-actions button{font-size:15px;font-weight:600;padding:4px 10px;border-radius:8px;transition:all .2s}
.toast-actions .toast-view{background:var(--gradient-primary);color:#000}
.toast-actions .toast-shop{color:var(--zinc-400)}
.toast-actions .toast-shop:hover{color:#fff}

/* ---- Quick Add Button ---- */
.quick-add-wrap{position:absolute;bottom:0;left:0;right:0;padding:8px;z-index:4;opacity:0;transform:translateY(8px);transition:all .25s cubic-bezier(.16,1,.3,1);pointer-events:none}
/* Hover-reveal ONLY on fine pointers — touch sticky :hover was making overlay
   Quick Add steal the card tap (aria "View …" → silent add-to-cart). */
@media (hover:hover) and (pointer:fine){
  .product-card:hover .quick-add-wrap{opacity:1;transform:translateY(0);pointer-events:auto}
}
.quick-add-inline{display:none;width:100%;margin-top:8px;padding:8px 0;border-radius:10px;font-size:14px;font-weight:700;background:rgba(9,9,11,.85);color:#fff;border:1px solid rgba(255,255,255,.15)}
@media (hover:none),(pointer:coarse){
  .quick-add-inline{display:block}
  .quick-add-wrap{display:none!important}
}
.quick-add{width:100%;padding:8px 0;border-radius:10px;font-size:16px;font-weight:700;background:rgba(9,9,11,.85);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.15);transition:all .2s;letter-spacing:.02em}
@media (hover:hover) and (pointer:fine){
  .quick-add:hover{background:rgba(74,222,128,.9);color:#000;border-color:rgba(74,222,128,.4)}
}

/* ---- Image Shimmer ---- */
.img-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,rgba(39,39,42,.4) 25%,rgba(63,63,70,.4) 50%,rgba(39,39,42,.4) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;z-index:1;border-radius:inherit}
.img-loaded .img-shimmer{display:none}

/* ---- Holo Foil Overlay ---- */
.holo-foil{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:color-dodge;transition:opacity .3s;border-radius:inherit;background:linear-gradient(var(--holo-angle,135deg),rgba(255,0,0,.15),rgba(255,127,0,.15),rgba(255,255,0,.15),rgba(0,255,0,.15),rgba(0,127,255,.15),rgba(127,0,255,.15),rgba(255,0,127,.15))}
.product-card:hover .holo-foil{opacity:1}
.detail-holo{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:color-dodge;border-radius:inherit;background:linear-gradient(var(--holo-angle,135deg),rgba(255,0,0,.12),rgba(255,127,0,.12),rgba(255,255,0,.12),rgba(0,255,0,.12),rgba(0,127,255,.12),rgba(127,0,255,.12),rgba(255,0,127,.12));opacity:var(--holo-opacity,0);transition:opacity .3s}

/* ---- Cart Bounce ---- */
.cart-count.bounce{animation:cartBounce .4s cubic-bezier(.16,1,.3,1)}

/* ---- Sticky Add-to-Cart Bar ---- */
/* Sit ABOVE .mobile-nav. Old translateY(-56px) at bottom:0 put the ATC under the
   ~74px nav (z-index 49) so the button was clipped. --mobile-nav-h is measured in JS. */
.sticky-atc{position:fixed;bottom:0;left:0;right:0;z-index:45;background:rgba(9,9,11,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.08);padding:12px 0;transform:translate3d(0,110%,0);transition:transform .3s cubic-bezier(.16,1,.3,1);box-shadow:0 -8px 32px rgba(0,0,0,.3);pointer-events:none;visibility:hidden}
.sticky-atc.visible{transform:translate3d(0,0,0);pointer-events:auto;visibility:visible}
@media(max-width:767px){
  .sticky-atc{
    /* nav already includes safe-area padding — don't double-add inset here */
    bottom:var(--mobile-nav-h);
    padding:10px 0;
    z-index:50; /* above .mobile-nav (49) so sub-pixel overlap never clips ATC */
  }
  .sticky-atc-inner{gap:10px}
  .sticky-atc .btn-primary{padding:12px 18px;font-size:14px;min-height:44px}
}
.sticky-atc-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.sticky-atc-info{display:flex;align-items:center;gap:12px;min-width:0;flex:1;overflow:hidden}
.sticky-atc-info .swatch{width:32px;height:22px;border-radius:6px;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.sticky-atc-info .name{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sticky-atc-info .price{font-size:16px;font-weight:700;color:var(--fel);margin-left:8px;flex-shrink:0}
.sticky-atc .btn-primary{padding:10px 24px;font-size:15px;flex-shrink:0}

@keyframes introRotate{0%{transform:rotateX(0) rotateY(0)}20%{transform:rotateX(-5deg) rotateY(15deg)}45%{transform:rotateX(3deg) rotateY(-10deg)}70%{transform:rotateX(-2deg) rotateY(5deg)}100%{transform:rotateX(0) rotateY(0)}}
@keyframes dragHandSlide{0%,100%{transform:translateX(-16px);opacity:.3}50%{transform:translateX(16px);opacity:1}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,0),0 25px 50px -12px rgba(0,0,0,.5)}50%{box-shadow:0 0 20px 3px rgba(74,222,128,.12),0 25px 50px -12px rgba(0,0,0,.5)}}

/* ---- 3D Card Container (Detail Page) ---- */
.card-3d-scene{perspective:1200px;cursor:grab;user-select:none;position:relative;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.card-3d-scene:active{cursor:grabbing}
.card-3d-body{position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.16,1,.3,1);will-change:transform}
.card-3d-body.dragging{transition:none}
.card-3d-body.intro-animate{animation:introRotate 2.2s cubic-bezier(.16,1,.3,1) forwards}
.card-3d-scene.glow-border .card-3d-front .detail-mockup{animation:glowPulse 2s ease-in-out infinite}
.card-3d-front,.card-3d-back{backface-visibility:hidden;border-radius:16px;overflow:hidden;position:relative}
.card-3d-front{z-index:2}
.card-3d-back{position:absolute;inset:0;transform:rotateY(180deg);background:linear-gradient(180deg,#1a1a2e 0%,#16213e 100%);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;z-index:1}
.card-back-stripe{width:100%;height:22%;background:#111;margin-top:12%}
.card-back-sig{margin:8% 10% 0;height:14%;background:linear-gradient(90deg,#e8e8e8,#d4d4d8);border-radius:4px;display:flex;align-items:center;justify-content:flex-end;padding-right:12px}
.card-back-cvc{background:rgba(255,255,255,.9);color:#000;font-size:clamp(10px,1.5vw,14px);font-weight:700;padding:2px 8px;border-radius:3px;font-family:monospace;letter-spacing:.1em}
.card-back-brand{margin-top:auto;padding:6% 10%;display:flex;align-items:center;justify-content:space-between}
.card-back-brand .logo{font-size:clamp(12px,2vw,18px);font-weight:900;letter-spacing:-.02em}
.card-back-brand .tagline{font-size:clamp(8px,1vw,10px);color:#fff;letter-spacing:.15em;text-transform:uppercase}
.drag-hint{position:absolute;bottom:-48px;left:50%;transform:translateX(-50%);font-size:15px;color:var(--zinc-500);display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .6s ease;white-space:nowrap}
.drag-hint.visible{opacity:1}
.drag-hint.hidden{opacity:0!important}
.drag-hand{display:inline-flex;animation:dragHandSlide 1.8s ease-in-out infinite}
.drag-hand svg{width:18px;height:18px;color:var(--fel)}

/* ---- Mobile Bottom Nav ---- */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:49;background:rgba(9,9,11,.97);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.06);padding:10px 0 env(safe-area-inset-bottom,10px)}
@media(max-width:767px){.mobile-nav{display:flex}}
.mobile-nav-inner{display:flex;align-items:center;justify-content:space-evenly;width:100%}
.mobile-nav-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;color:var(--zinc-600);transition:color .2s;position:relative;flex:1}
.mobile-nav-btn.active{color:var(--fel)}
.mobile-nav-btn svg{width:28px;height:28px}
.mobile-nav-btn span{font-size:12px;font-weight:600;letter-spacing:.02em}
.mobile-nav-btn .mobile-cart-dot{position:absolute;top:2px;right:25%;width:9px;height:9px;background:var(--fel);border-radius:50%;display:none}
.mobile-nav-btn .mobile-cart-dot.show{display:block}

/* ---- Install as app (A2HS) banner — above mobile bottom nav ---- */
#a2hs{position:fixed;left:14px;right:14px;bottom:14px;z-index:90;background:rgba(24,24,27,.98);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;display:none;align-items:center;gap:12px;box-shadow:0 12px 40px rgba(0,0,0,.45);max-width:560px;margin:0 auto;backdrop-filter:blur(12px)}
/* --mobile-nav-h already includes safe-area (nav padding) */
@media(max-width:767px){#a2hs{bottom:var(--mobile-nav-h)}}
#a2hs .a2hs-icon{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--gradient-brand);background-size:200% 200%;animation:logoFlow 5s linear infinite;display:flex;align-items:center;justify-content:center;box-shadow:var(--glow-brand)}
#a2hs .a2hs-icon svg{width:30px;height:30px}
#a2hs .a2hs-copy{flex:1;min-width:0;font-size:13.5px;line-height:1.35}
#a2hs .a2hs-copy b{display:block;font-weight:700;color:#fff;margin-bottom:2px}
#a2hs .a2hs-copy span{color:var(--zinc-500);font-size:12.5px}
#a2hs .a2hs-install{flex:0 0 auto;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:700;background:var(--gradient-primary);color:#000;white-space:nowrap}
#a2hs .a2hs-install:active{transform:scale(.97)}
#a2hs .a2hs-dismiss{flex:0 0 auto;padding:8px 10px;border-radius:10px;color:var(--zinc-500);font-size:16px;line-height:1}
#a2hs .a2hs-dismiss:hover{background:rgba(255,255,255,.06);color:#fff}
#a2hs-ios{position:fixed;left:14px;right:14px;bottom:var(--mobile-nav-h);z-index:90;background:rgba(24,24,27,.98);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;display:none;flex-direction:column;gap:10px;box-shadow:0 12px 40px rgba(0,0,0,.45);max-width:560px;margin:0 auto;backdrop-filter:blur(12px)}
#a2hs-ios .a2hs-ios-row{display:flex;align-items:flex-start;gap:12px}
#a2hs-ios .a2hs-ios-steps{font-size:13px;color:var(--zinc-400);line-height:1.45}
#a2hs-ios .a2hs-ios-steps b{color:#fff}
#a2hs-ios .a2hs-ios-steps kbd{display:inline-block;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-size:12px;color:var(--fel)}

/* ---- Mobile padding for bottom nav ---- */
@media(max-width:767px){
  footer{padding-bottom:var(--mobile-nav-h)!important}
  .cart-drawer{padding-bottom:var(--mobile-nav-h)}
}

/* ---- Wishlist Heart ---- */
.wishlist-btn{position:absolute;top:10px;right:10px;z-index:5;width:32px;height:32px;border-radius:50%;background:rgba(9,9,11,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;transition:all .2s;border:1px solid rgba(255,255,255,.1)}
.wishlist-btn:hover{background:rgba(9,9,11,.8);transform:scale(1.1)}
.wishlist-btn svg{width:16px;height:16px;color:var(--zinc-400);transition:all .2s}
.wishlist-btn.active svg{color:#f43f5e;fill:#f43f5e}
.wishlist-btn:not(.active):hover svg{color:#f43f5e}

/* ---- Bundle Banner ---- */
.bundle-banner{background:linear-gradient(135deg,rgba(74,222,128,.08),rgba(168,85,247,.08));border:1px solid rgba(74,222,128,.15);border-radius:12px;padding:12px 16px;margin-bottom:24px;display:flex;align-items:center;gap:12px;font-size:15px;animation:fadeInUp .5s ease}
.bundle-banner .bundle-icon{width:36px;height:36px;border-radius:10px;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bundle-banner .bundle-icon svg{width:16px;height:16px;color:#000}
.bundle-banner strong{color:var(--fel)}
.bundle-banner p{color:var(--zinc-400);line-height:1.4}


/* ---- Wishlist Page Section ---- */
.wishlist-empty{text-align:center;padding:60px 20px}
.wishlist-empty svg{width:48px;height:48px;color:var(--zinc-700);margin:0 auto 16px}
.wishlist-empty p{color:var(--zinc-500);margin-bottom:16px}

/* ---- Auth Modal ---- */
.auth-modal{position:fixed;z-index:52;background:var(--zinc-900);border-radius:20px;padding:36px 28px 32px;border:1px solid rgba(255,255,255,.1);display:none;animation:fadeInScale .25s ease;width:92%;max-width:440px;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 24px 64px rgba(0,0,0,.55)}
.auth-modal.open{display:block}
.auth-modal h2{font-size:26px;font-weight:800;text-align:center;margin-bottom:8px;letter-spacing:-.02em}
.auth-modal .subtitle{font-size:16px;color:var(--zinc-500);text-align:center;margin-bottom:24px;line-height:1.45;padding:0 4px}
.auth-modal .modal-header button{padding:8px;border-radius:10px}
.auth-modal .modal-header button svg{width:22px;height:22px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:15px;color:var(--zinc-600)}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}
.auth-input{width:100%;padding:11px 14px;background:rgba(39,39,42,.8);border:1px solid rgba(255,255,255,.1);border-radius:10px;font-size:16px;color:#fff;outline:none;transition:border-color .2s;margin-bottom:10px}
.auth-input:focus{border-color:rgba(74,222,128,.4)}
.auth-input::placeholder{color:var(--zinc-600)}
.google-btn{width:100%;padding:14px;border-radius:12px;font-size:17px;font-weight:600;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;min-height:52px}
.google-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
#gsiButton{width:100%;min-height:56px;padding:4px 0 8px;display:flex;justify-content:center;align-items:center}
#gsiButton iframe{margin:0 auto!important;transform:scale(1.08);transform-origin:center center}
.auth-switch{font-size:16px;color:var(--zinc-500);text-align:center;margin-top:14px}
.auth-switch button{color:var(--fel);font-weight:600}
.auth-switch button:hover{text-decoration:underline}
.auth-error{font-size:16px;color:#f87171;text-align:center;margin-bottom:8px;display:none}
.user-menu-btn{display:none;align-items:center;gap:8px;padding:6px 12px;border-radius:10px;font-size:15px;font-weight:600;transition:all .2s;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
@media(min-width:768px){.user-menu-btn{display:flex}}
.user-menu-btn:hover{background:rgba(255,255,255,.1)}
.user-menu-btn .avatar{width:24px;height:24px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#000}

/* ---- Contact Page ---- */
.contact-grid{display:grid;gap:24px;margin-top:32px;width:100%;max-width:100%;min-width:0}
@media(min-width:640px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.contact-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.contact-card{background:rgba(24,24,27,.4);border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:24px;transition:border-color .3s;text-align:center}
.contact-card:hover{border-color:rgba(74,222,128,.15)}
.contact-card .c-icon{width:48px;height:48px;border-radius:14px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:24px}
.contact-card h3{font-size:15px;font-weight:700;margin-bottom:4px}
.contact-card p{font-size:16px;color:var(--zinc-500);margin-bottom:12px;line-height:1.5}
.contact-card a{font-size:15px;color:var(--fel);font-weight:600}
.contact-card a:hover{text-decoration:underline}
.contact-form{display:flex;flex-direction:column;gap:10px;margin-top:32px;max-width:600px}
.contact-form input,.contact-form textarea{width:100%;padding:11px 14px;background:rgba(39,39,42,.8);border:1px solid rgba(255,255,255,.1);border-radius:10px;font-size:16px;color:#fff;outline:none;transition:border-color .2s;font-family:inherit}
.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(74,222,128,.4)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--zinc-600)}
.contact-form textarea{min-height:120px;resize:vertical}

/* ---- Account Page ---- */
.account-header{display:flex;align-items:center;gap:16px;margin-bottom:32px;flex-wrap:wrap}
.account-avatar{width:56px;height:56px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#000;flex-shrink:0}
.order-card{background:rgba(24,24,27,.4);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:16px;margin-bottom:12px;transition:border-color .3s}
.order-card:hover{border-color:rgba(255,255,255,.1)}
.order-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap;gap:8px}
.order-status{font-size:10px;font-weight:700;padding:3px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em}
.order-status.paid{background:rgba(74,222,128,.15);color:var(--fel)}
.order-status.printed{background:rgba(251,191,36,.18);color:#fbbf24}
.order-status.shipped{background:rgba(59,130,246,.15);color:#3b82f6}
.order-status.delivered{background:rgba(74,222,128,.25);color:#4ade80}
.order-status.pending{background:rgba(251,191,36,.15);color:#fbbf24}
.order-status-msg{font-size:15px;color:var(--zinc-400);margin-top:6px;line-height:1.4}
.order-status-msg.printed{color:#fbbf24}
.order-status-msg.shipped{color:#60a5fa;font-weight:600}

/* ================================================================
   UTILITY CLASSES
   ================================================================ */
.container{max-width:1280px;margin:0 auto;padding:0 16px;width:100%;min-width:0;box-sizing:border-box}
@media(min-width:640px){.container{padding:0 24px}}
.section-pad{padding:64px 0}
@media(min-width:640px){.section-pad{padding:80px 0}}
.hide{display:none!important}
.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.animated-gradient-text{background:linear-gradient(135deg,#4ade80,#a855f7,#c084fc);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 6s ease infinite}

/* ---- Grain overlay ----
   Was desktop-only (hidden ≤767px) with mix-blend-mode:overlay + z-index 9999 —
   that washed the whole viewport so UI looked semi-transparent / bg "leaking".
   Disabled everywhere; mobile was already off. */
.grain-overlay{display:none!important}

/* ---- Scroll reveal ---- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ---- Orbs ---- */
.orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.orb-float{animation:orbFloat 12s ease-in-out infinite}
.orb-float2{animation:orbFloat2 15s ease-in-out infinite}
@media(max-width:767px){
  .orb{display:none!important}
  .hero-aurora{display:none!important}
  .hero-grid{display:none!important}
  .card-float{animation:none!important}
  main{overflow-x:clip}
}
/* Desktop: keep soft orbs but clip them so blur doesn't wash neighboring sections */
@media(min-width:768px){
  #page-home > section.section-pad,
  #page-home > section.cta-section,
  .footer{
    overflow:hidden;
  }
}

/* ---- Shimmer button ---- */
.btn-primary{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 32px;background:var(--gradient-primary);color:#000;font-weight:700;border-radius:12px;font-size:16px;transition:all .2s;white-space:nowrap;max-width:100%;box-sizing:border-box}
.btn-primary:hover{box-shadow:0 12px 40px -8px var(--glow-fel)}
.btn-primary:active{transform:scale(.97)}
.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}
.btn-primary:hover::after{animation:cardShine .6s ease forwards}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 32px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-weight:600;border-radius:12px;font-size:16px;transition:all .2s;white-space:nowrap;max-width:100%;box-sizing:border-box}
.btn-secondary:hover{background:rgba(255,255,255,.1);border-color:rgba(74,222,128,.2)}
@media(max-width:380px){
  .btn-primary,.btn-secondary{padding:12px 18px;font-size:15px}
}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .3s}
.navbar.scrolled{background:rgba(9,9,11,.97);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.05);box-shadow:0 4px 20px rgba(0,0,0,.2)}
@media(max-width:767px){.navbar.scrolled{backdrop-filter:none}}
/* Desktop: always solid top bar — un-scrolled was fully transparent so hero/orbs
   bled through the whole header (mobile still uses transparent→scrolled pattern). */
@media(min-width:768px){
  .navbar{
    background:rgba(9,9,11,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .navbar.scrolled{
    background:rgba(9,9,11,.98);
    box-shadow:0 4px 20px rgba(0,0,0,.25);
  }
}
.navbar-inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;max-width:100%;width:100%}
.navbar-inner > *{min-width:0}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-icon{width:40px;height:40px;border-radius:12px;background:var(--gradient-brand);background-size:200% 200%;animation:logoFlow 5s linear infinite,logoIconPulse 3.2s ease-in-out infinite;display:flex;align-items:center;justify-content:center;box-shadow:var(--glow-brand);position:relative;overflow:hidden;flex-shrink:0}
.nav-logo-icon::before{content:'';position:absolute;inset:-40%;background:conic-gradient(from var(--angle,0deg),#4ade80,#22d3ee,#a855f7,#f472b6,#fbbf24,#4ade80);animation:borderRotate 6s linear infinite;opacity:.55;pointer-events:none}
.nav-logo-icon::after{content:'';position:absolute;inset:2px;border-radius:10px;background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.04) 42%,transparent 70%);pointer-events:none;z-index:1}
.nav-logo-icon svg{width:30px;height:30px;position:relative;z-index:2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.nav-logo-text{font-size:18px;font-weight:800;letter-spacing:-.02em;background:var(--gradient-brand-flow);background-size:200% auto;animation:logoFlow 4.5s linear infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 12px rgba(168,85,247,.25))}
.nav-logo-text .cozy{background:inherit;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* full wordmark is colorful; keep .cozy class for markup compatibility */
.card-back-brand .logo{background:var(--gradient-brand-flow);background-size:200% auto;animation:logoFlow 5s linear infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.card-back-brand .logo .cozy-g{background:inherit;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:none;align-items:center;gap:24px}.nav-links a.nav-link{display:inline-flex;align-items:center}
@media(min-width:768px){.nav-links{display:flex}}
.nav-link{font-size:16px;font-weight:500;color:var(--zinc-400);transition:color .2s;letter-spacing:.02em}
.nav-link:hover,.nav-link.active{color:#fff}
.nav-link.active{color:var(--fel)}
.new-badge{font-size:9px;background:var(--gradient-primary);color:#000;padding:2px 8px;border-radius:99px;font-weight:700;margin-left:6px;vertical-align:middle}
.cart-btn{position:relative;padding:10px;border-radius:12px;transition:background .2s}
.cart-btn:hover{background:rgba(255,255,255,.05)}
.cart-btn svg{width:20px;height:20px;transition:transform .2s}
.cart-btn:hover svg{transform:scale(1.1)}
.nav-search-btn{position:relative;padding:10px;border-radius:12px;transition:background .2s}
.nav-search-btn:hover{background:rgba(255,255,255,.05)}
.nav-search-btn svg{width:20px;height:20px;transition:transform .2s;color:var(--zinc-300)}
.nav-search-btn:hover svg{transform:scale(1.1);color:#fff}
.search-modal-overlay{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:none}
.search-modal-overlay.open{display:block}
.search-modal{position:fixed;z-index:56;top:12%;left:50%;transform:translateX(-50%);width:min(560px,92vw);background:var(--zinc-900);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.55);display:none;animation:fadeInScale .2s ease;max-height:76vh;overflow:hidden}
.search-modal.open{display:flex;flex-direction:column}
.search-modal-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.search-modal-head .search-box{flex:1}
.search-modal-head .search-box input{font-size:16px;padding:12px 16px 12px 40px}
.search-modal-close{padding:8px;border-radius:10px;color:var(--zinc-500);transition:all .15s}
.search-modal-close:hover{background:rgba(255,255,255,.06);color:#fff}
.search-modal-hint{padding:8px 16px;font-size:12px;color:var(--zinc-600);border-bottom:1px solid rgba(255,255,255,.05)}
.search-modal-hint kbd{display:inline-block;padding:1px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-size:11px;margin:0 2px}
.search-modal-results{overflow-y:auto;max-height:min(52vh,420px);padding:8px}
.search-result{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid transparent;transition:all .15s;cursor:pointer}
.search-result:hover,.search-result:focus{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.2);outline:none}
.search-result-thumb{width:44px;height:28px;border-radius:6px;flex-shrink:0;background:linear-gradient(135deg,#333,#111);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.search-result-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.search-result-meta{flex:1;min-width:0}
.search-result-meta .name{font-size:15px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result-meta .sub{font-size:12px;color:var(--zinc-500);margin-top:2px}
.search-result-price{font-size:13px;font-weight:700;color:var(--fel);flex-shrink:0}
.search-empty{text-align:center;padding:36px 16px;color:var(--zinc-500);font-size:14px}
.search-empty svg{display:block;margin:0 auto 10px;color:var(--zinc-700)}
.cart-count{position:absolute;top:-2px;right:-2px;width:20px;height:20px;background:var(--gradient-primary);color:#000;font-size:10px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(74,222,128,.3)}
.mobile-toggle{display:flex;padding:8px;border-radius:12px;transition:background .2s}
.mobile-toggle:hover{background:rgba(255,255,255,.05)}
@media(min-width:768px){.mobile-toggle{display:none}}
.mobile-menu{display:none;background:rgba(24,24,27,.95);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.05);padding:8px 16px 16px}
.mobile-menu.open{display:block;animation:fadeInUp .3s ease}
.mobile-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;font-size:16px;font-weight:500;color:var(--zinc-300);transition:all .2s}
.mobile-menu button:hover{color:#fff;background:rgba(255,255,255,.05)}
@media(min-width:768px){.mobile-menu{display:none!important}}

/* ================================================================
   HERO
   ================================================================ */
/* max-width:100% not 100vw — 100vw includes scrollbar/gutter and can clip the right edge on some Android browsers */
.hero{position:relative;min-height:min(92vh,900px);display:flex;align-items:center;overflow:hidden;padding-top:64px;width:100%;max-width:100%}
@media(max-width:767px){.hero{min-height:auto;padding-top:56px}}
.hero-container{padding-top:48px;padding-bottom:56px;position:relative;z-index:10;width:100%}
@media(max-width:767px){.hero-container{padding-top:12px;padding-bottom:28px}}
.hero-layout{display:grid;gap:28px;align-items:center;width:100%;max-width:100%;min-width:0}
@media(min-width:1024px){.hero-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px}}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 85% 20%,rgba(168,85,247,.22),transparent 55%),radial-gradient(ellipse 70% 50% at 10% 80%,rgba(74,222,128,.14),transparent 50%),radial-gradient(ellipse 50% 40% at 50% 0%,rgba(34,211,238,.1),transparent 45%),linear-gradient(165deg,#050506 0%,#0c0c10 40%,#12121a 100%)}
/* Desktop-only wash (hidden ≤767px). Kept subtle so it doesn't fog hero copy. */
.hero-aurora{position:absolute;inset:0;opacity:.22;background:linear-gradient(120deg,rgba(74,222,128,.08),rgba(168,85,247,.06),rgba(34,211,238,.04),rgba(74,222,128,.06));background-size:300% 300%;animation:gradientShift 7s ease infinite;pointer-events:none}
.hero-grid{position:absolute;inset:0;opacity:.025;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%);pointer-events:none}
/* Solid page sections — no frosted/blur wash bleeding through */
main{position:relative;z-index:1;background:#09090b;isolation:isolate}
#page-home{background:#09090b}
#page-home > section.section-pad,
#page-home > div.container.reveal{background:#09090b}
#page-home > section.cta-section{background:#09090b}
#page-home > section.marquee-bar{background:#0c0c10}

.hero-content{position:relative;z-index:10;max-width:640px}
@media(max-width:767px){.hero-content{text-align:center;margin:0 auto}.hero-badge{margin-left:auto;margin-right:auto}.hero-desc{margin-left:auto;margin-right:auto}.hero-features{justify-content:center}.hero-buttons{justify-content:center}.hero-season-chip{margin-left:auto;margin-right:auto}}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(135deg,rgba(74,222,128,.18),rgba(168,85,247,.14));border:1px solid rgba(74,222,128,.35);border-radius:99px;color:#bbf7d0;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:18px;backdrop-filter:blur(10px);box-shadow:0 0 24px rgba(74,222,128,.12);animation:heroText .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.1s;opacity:0}
.hero-badge svg{width:14px;height:14px;color:var(--fel)}
.hero-title{font-size:clamp(2.6rem,9vw,4.75rem);font-weight:900;line-height:.9;letter-spacing:-.04em;margin-bottom:16px;animation:heroText .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.25s;opacity:0}
.hero-desc{font-size:clamp(1.05rem,2.6vw,1.28rem);color:#fff;line-height:1.55;margin-bottom:26px;max-width:520px;animation:heroText .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.4s;opacity:0}
.hero-buttons{display:flex;flex-direction:column;gap:12px;animation:heroText .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.55s;opacity:0;width:100%;max-width:100%;min-width:0}
/* Keep stacked on phone widths even when font-scale / mid-size tablets make two nowrap buttons overflow */
@media(min-width:768px){.hero-buttons{flex-direction:row;flex-wrap:wrap}}
.hero-buttons .btn-primary,.hero-buttons .btn-secondary{max-width:100%}
@media(max-width:767px){.hero-buttons .btn-primary,.hero-buttons .btn-secondary{width:100%}}
.hero-features{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;animation:heroText .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.7s;opacity:0}
.hero-features span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px)}
.hero-features .check{color:#4ade80;width:15px;height:15px;flex-shrink:0}
.hero-stats{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap;animation:heroText .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.8s;opacity:0}
@media(max-width:767px){.hero-stats{justify-content:center}}
.hero-stat{display:flex;flex-direction:column;gap:2px}
.hero-stat strong{font-size:1.35rem;font-weight:900;background:linear-gradient(135deg,#4ade80,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-stat span{font-size:12px;color:#fff;font-weight:500}
/* Auto-scrolling Pokemon strip (mobile + desktop) */
/* Auto-scrolling Pokemon strip — constrained viewport + transform ticker */
.hero-stage{position:relative;width:100%;max-width:100%;min-width:0;min-height:0;overflow:hidden;display:block!important}
@media(min-width:1024px){.hero-stage{min-height:380px;display:flex!important;align-items:center}}
.hero-scroll-wrap{position:relative;overflow:hidden;width:100%;max-width:100%;min-width:0;margin:8px 0 4px;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
@media(min-width:1024px){.hero-scroll-wrap{margin:0}}
.hero-scroll-inner{display:flex;width:max-content;will-change:transform;padding:10px 0;transform:translate3d(0,0,0)}
.hero-scroll-track{display:flex;gap:14px;flex-shrink:0;padding-right:14px}
.hero-scroll-card{flex:0 0 200px;width:200px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);aspect-ratio:3.375/2.125;box-shadow:0 14px 36px -10px rgba(0,0,0,.55);position:relative;background:#18181b;cursor:pointer;padding:0;transition:border-color .25s}
@media(min-width:640px){.hero-scroll-card{flex:0 0 230px;width:230px}}
@media(min-width:1024px){.hero-scroll-card{flex:0 0 250px;width:250px}}
.hero-scroll-card:hover{border-color:rgba(74,222,128,.4)}
.hero-scroll-card img{width:100%;height:100%;object-fit:cover;display:block}
.hero-scroll-card img.rotated{position:absolute;inset:auto;top:50%;left:50%;width:62.96%;height:158.82%;max-width:none;object-fit:fill;object-position:center;transform:translate(-50%,-50%) rotate(90deg)}
.hero-scroll-card .hsc-label{position:absolute;left:10px;bottom:10px;z-index:4;padding:4px 10px;border-radius:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);font-size:12px;font-weight:700;color:#fff;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-scroll-card .chip-cutout{border-radius:3px}
.hero-cards,.card-float,.hero-mobile-strip,.hero-mobile-card,.hero-scroll-mobile{display:none!important}

/* Card mockup */
.card-mockup{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);aspect-ratio:3.375/2.125}
.card-mockup img{width:100%;height:100%;object-fit:cover}
/* Portrait TCG art (Charizard, Blastoise, etc.) — rotate 90° so full card shows in landscape skin frame */
.card-mockup img.rotated{position:absolute;inset:auto;top:50%;left:50%;width:62.96%;height:158.82%;max-width:none;object-fit:fill;object-position:center;transform:translate(-50%,-50%) rotate(90deg)}
.hero-mobile-card img.rotated{position:absolute;inset:auto;top:50%;left:50%;width:62.96%;height:158.82%;max-width:none;object-fit:fill;object-position:center;transform:translate(-50%,-50%) rotate(90deg)}
.card-mockup-glow{position:absolute;inset:-16px;z-index:-1;border-radius:24px;filter:blur(30px);opacity:.4}

/* ================================================================
   MARQUEE
   ================================================================ */
.marquee-bar{border-top:1px solid rgba(74,222,128,.12);border-bottom:1px solid rgba(168,85,247,.12);background:linear-gradient(90deg,rgba(74,222,128,.1),#0c0c10,rgba(168,85,247,.1));overflow:hidden;padding:14px 0;position:relative;width:100%}
.marquee-bar::before,.marquee-bar::after{content:'';position:absolute;top:0;bottom:0;width:24px;z-index:2;pointer-events:none}
.marquee-bar::before{left:0;background:linear-gradient(90deg,#0c0c10,transparent)}
.marquee-bar::after{right:0;background:linear-gradient(270deg,#0c0c10,transparent)}
/* Classic margin-left ticker (works where transform animations stall) */
.marquee-inner{
  display:flex;
  width:max-content;
  margin-left:0;
  animation:marquee-scroll 20s linear infinite;
}
.marquee-track{display:flex;align-items:center;gap:36px;white-space:nowrap;flex-shrink:0;padding-right:36px}
.marquee-item{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:#f4f4f5;font-weight:700;flex-shrink:0;letter-spacing:.01em}
.marquee-item .mi-icon{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(74,222,128,.25),rgba(168,85,247,.2));border:1px solid rgba(74,222,128,.25);flex-shrink:0}
.marquee-item .mi-icon svg{width:14px;height:14px;color:var(--fel)}
.marquee-dot{color:rgba(74,222,128,.55);flex-shrink:0;font-size:10px}

/* ================================================================
   SECTION HEADERS
   ================================================================ */
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px}
.section-title{font-size:clamp(1.5rem,4vw,2.25rem);font-weight:900;letter-spacing:-.02em}
.section-subtitle{color:var(--zinc-500);margin-top:4px;font-size:16px}
.section-link{display:none;align-items:center;gap:4px;font-size:16px;color:var(--fel);font-weight:600;transition:gap .2s}
.section-link:hover{gap:8px;text-decoration:underline}
@media(min-width:640px){.section-link{display:flex}}

/* ================================================================
   PRODUCT GRID
   ================================================================ */
/* minmax(0,1fr) — default 1fr min-size is "auto", so long product names / large
   Samsung system fonts expand columns past the viewport and clip the right edge. */
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;max-width:100%;min-width:0}
@media(min-width:640px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media(min-width:1024px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.product-grid > *{min-width:0;max-width:100%}

/* Product Card */
.product-card{text-align:left;border-radius:12px;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;position:relative;will-change:transform;min-width:0;max-width:100%;width:100%}
.product-card:hover{box-shadow:0 20px 50px -12px rgba(0,0,0,.5)}
@media(prefers-reduced-motion:reduce){
  .product-card,.reveal,.orb,.card-float,.grain-overlay,.hero-aurora,.hero-badge,.hero-title,.hero-desc,.hero-buttons,.hero-features,.hero-stats{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  /* marquee-inner intentionally still animates */
  .reveal{opacity:1;transform:none}
  .cta-copy .btn-primary,.cta-demo-blank .cta-demo-upload-icon,.cta-design-demo::before{animation:none!important}
  /* Step loop still advances via JS — only kill decorative infinite bob/glow */
}
.product-card-inner{position:relative;overflow:hidden;border-radius:12px;border:1px solid rgba(255,255,255,.05)}
.product-card:hover .product-card-inner{border-color:rgba(255,255,255,.1)}
.product-card-img{position:relative;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
.product-card-img img.rotated{position:absolute;inset:auto;top:50%;left:50%;width:62.96%;height:158.82%;max-width:none;object-fit:fill;object-position:initial;transform:translate(-50%,-50%) rotate(90deg)}
.product-card-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;background:rgba(0,0,0,.15)}
.product-card-stripe{position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--fel),var(--ooze),#22d3ee);opacity:.5}
.product-card .card-shine{position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);pointer-events:none}
.product-card:hover .card-shine{animation:cardShine .7s ease forwards}
.product-card .card-glow{position:absolute;inset:-1px;border-radius:inherit;opacity:0;transition:opacity .35s ease;pointer-events:none;filter:blur(20px)}
.product-card:hover .card-glow{opacity:1}
.product-badge{position:absolute;top:10px;left:10px;font-size:9px;font-weight:700;padding:2px 8px;border-radius:99px;z-index:2}
.badge-new{background:linear-gradient(135deg,#4ade80,#22d3ee);color:#000;box-shadow:0 4px 12px rgba(74,222,128,.2)}
.badge-hot{background:linear-gradient(135deg,#a855f7,#c084fc);color:#fff;box-shadow:0 4px 12px rgba(168,85,247,.2)}
.product-card-info{margin-top:10px;padding:0 2px}
.product-card-name{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}
.product-card-rating{display:flex;align-items:center;gap:8px;margin-top:2px}
.product-card-rating .stars{display:flex;gap:2px}
.product-card-rating .stars svg{width:10px;height:10px}
.star-filled{fill:var(--fel);color:var(--fel)}
.star-empty{color:var(--zinc-700)}
.product-card-rating .count{font-size:10px;color:var(--zinc-600)}
.product-card-price{font-size:16px;font-weight:700;margin-top:4px}

/* ================================================================
   HOW IT WORKS (home section)
   ================================================================ */
.hiw-section{background:#121214;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden}
.hiw-grid{display:grid;gap:32px;max-width:900px;margin:0 auto;width:100%;min-width:0}
@media(min-width:640px){.hiw-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}}
.hiw-step{text-align:center}
.hiw-icon{width:80px;height:80px;margin:0 auto 20px;border-radius:16px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.05);transition:all .3s;position:relative}
.hiw-step:hover .hiw-icon{transform:scale(1.1);border-color:rgba(74,222,128,.2)}
.hiw-icon svg{width:28px;height:28px;color:var(--fel)}
.hiw-label{font-size:10px;font-weight:700;color:rgba(74,222,128,.5);letter-spacing:.2em}
.hiw-name{font-size:18px;font-weight:700;margin-top:4px}
.hiw-desc{font-size:16px;color:var(--zinc-500);margin-top:8px;line-height:1.6}
.hiw-line{display:none;position:absolute;top:55%;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(74,222,128,.1),transparent)}
@media(min-width:640px){.hiw-line{display:block}}

/* ================================================================
   SHOP BY THEME
   ================================================================ */
.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:100%;min-width:0}
@media(min-width:640px){.theme-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1024px){.theme-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.theme-grid > *{min-width:0;max-width:100%}
.theme-btn{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:1.65/1;display:flex;align-items:flex-end;justify-content:flex-start;padding:14px;border:1px solid rgba(255,255,255,.08);transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;background-size:cover;background-position:center}
.theme-btn:hover{border-color:rgba(74,222,128,.35);transform:translateY(-3px);box-shadow:0 16px 40px -16px rgba(0,0,0,.6)}
.theme-btn .theme-meta{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.theme-btn .theme-name{font-size:15px;font-weight:800;letter-spacing:.01em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.85)}
.theme-btn .theme-count{font-size:11px;font-weight:600;color:#fff;padding:2px 8px;border-radius:99px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.theme-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.78) 100%);z-index:1;transition:opacity .3s}
.theme-btn:hover::after{opacity:.9}
.theme-btn-glow{position:absolute;inset:0;opacity:0;transition:opacity .3s;z-index:0}
.theme-btn:hover .theme-btn-glow{opacity:1}

/* ================================================================
   CTA SECTION — animated "someone designing a card" demo
   ================================================================ */
.cta-section{border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden}
.cta-aurora{position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(168,85,247,.12),transparent 55%),radial-gradient(ellipse 50% 40% at 80% 80%,rgba(74,222,128,.1),transparent 50%),linear-gradient(90deg,rgba(74,222,128,.03),rgba(168,85,247,.05),rgba(34,211,238,.03));background-size:200% 200%,100% 100%,200% 200%;animation:gradientShift 8s ease infinite}
.cta-inner{display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center;max-width:720px;margin:0 auto}
@media(min-width:1024px){.cta-inner{max-width:960px;flex-direction:row;gap:56px;text-align:center;align-items:center}}
.cta-copy{display:flex;flex-direction:column;align-items:center;flex:1;width:100%;max-width:520px;text-align:center;margin:0 auto}
.cta-copy .section-title{width:100%}
.cta-copy p{margin-left:auto;margin-right:auto;text-align:center}
.cta-copy .btn-primary{
  align-self:center;margin:0 auto;
  padding:16px 36px;font-size:16px;border-radius:14px;
  box-shadow:0 0 0 0 rgba(74,222,128,.35),0 12px 40px -12px rgba(168,85,247,.45);
  animation:ctaBtnGlow 2.8s ease-in-out infinite;
}
.cta-copy .btn-primary:hover{box-shadow:0 0 28px 4px rgba(74,222,128,.35),0 16px 48px -10px rgba(168,85,247,.55)}
@keyframes ctaBtnGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.25),0 12px 36px -12px rgba(168,85,247,.4)}
  50%{box-shadow:0 0 22px 2px rgba(74,222,128,.4),0 16px 44px -10px rgba(168,85,247,.55)}
}

.cta-upload{width:min(100%,340px);max-width:100%;flex-shrink:1;min-width:0;margin:0 auto}
@media(min-width:640px){.cta-upload{width:min(100%,380px)}}
.cta-design-demo{position:relative;width:100%;perspective:900px}
/* Soft glow pad under the card */
.cta-design-demo::before{
  content:'';position:absolute;left:10%;right:10%;bottom:-18px;height:40px;
  background:radial-gradient(ellipse at center,rgba(168,85,247,.45),rgba(74,222,128,.2) 45%,transparent 70%);
  filter:blur(12px);z-index:0;pointer-events:none;animation:ctaGlowPulse 3.2s ease-in-out infinite;
}
@keyframes ctaGlowPulse{0%,100%{opacity:.55;transform:scaleX(1)}50%{opacity:.9;transform:scaleX(1.06)}}

/* Mini design-tool chrome */
.cta-demo-chrome{
  position:relative;z-index:1;border-radius:18px;padding:10px 10px 12px;
  background:linear-gradient(160deg,rgba(39,39,42,.92),rgba(24,24,27,.96));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 28px 60px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(12px);
}
.cta-demo-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:2px 4px 10px;user-select:none;
}
.cta-demo-toolbar .dots{display:flex;gap:5px}
.cta-demo-toolbar .dots span{width:8px;height:8px;border-radius:50%}
.cta-demo-toolbar .dots span:nth-child(1){background:#ff5f57}
.cta-demo-toolbar .dots span:nth-child(2){background:#febc2e}
.cta-demo-toolbar .dots span:nth-child(3){background:#28c840}
.cta-demo-toolbar .label{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:999px;padding:4px 10px;
}
.cta-demo-toolbar .tools{display:flex;gap:4px}
.cta-demo-toolbar .tools b{
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.cta-demo-toolbar .tools b.on{
  color:#fff;border-color:rgba(255,255,255,.06);
  background:rgba(255,255,255,.04);
}
/* Active tool highlight driven by JS step classes */
.cta-design-demo[data-step="0"] .cta-demo-toolbar .tools b:nth-child(1),
.cta-design-demo[data-step="1"] .cta-demo-toolbar .tools b:nth-child(1),
.cta-design-demo[data-step="2"] .cta-demo-toolbar .tools b:nth-child(1){
  color:#09090b;border-color:transparent;background:linear-gradient(135deg,#4ade80,#a855f7);
}
.cta-design-demo[data-step="3"] .cta-demo-toolbar .tools b:nth-child(2),
.cta-design-demo[data-step="4"] .cta-demo-toolbar .tools b:nth-child(2){
  color:#09090b;border-color:transparent;background:linear-gradient(135deg,#4ade80,#a855f7);
}
.cta-design-demo[data-step="5"] .cta-demo-toolbar .tools b:nth-child(3),
.cta-design-demo[data-step="6"] .cta-demo-toolbar .tools b:nth-child(3){
  color:#09090b;border-color:transparent;background:linear-gradient(135deg,#4ade80,#a855f7);
}

.cta-upload-box{
  position:relative;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#0c0c10;
  aspect-ratio:3.375/2.125;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.7);
  transform:rotateY(-4deg) rotateX(3deg);
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease;
}
.cta-design-demo[data-step="1"] .cta-upload-box,
.cta-design-demo[data-step="2"] .cta-upload-box,
.cta-design-demo[data-step="3"] .cta-upload-box,
.cta-design-demo[data-step="4"] .cta-upload-box,
.cta-design-demo[data-step="5"] .cta-upload-box,
.cta-design-demo[data-step="6"] .cta-upload-box{
  transform:rotateY(3deg) rotateX(-2deg) translateY(-4px);
  box-shadow:0 22px 48px -12px rgba(168,85,247,.35),0 16px 40px -14px rgba(0,0,0,.7);
}
.cta-demo-stage{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
/* Blank canvas */
.cta-demo-blank{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:
    radial-gradient(circle at 50% 40%,rgba(74,222,128,.08),transparent 55%),
    repeating-linear-gradient(0deg,transparent,transparent 11px,rgba(255,255,255,.03) 11px,rgba(255,255,255,.03) 12px),
    repeating-linear-gradient(90deg,transparent,transparent 11px,rgba(255,255,255,.03) 11px,rgba(255,255,255,.03) 12px),
    #141418;
  z-index:1;opacity:1;transition:opacity .4s ease;
}
.cta-design-demo:not([data-step="0"]) .cta-demo-blank{opacity:0;pointer-events:none}
.cta-demo-blank span{font-size:12px;color:#fff;font-weight:600;letter-spacing:.04em}
.cta-demo-blank .cta-demo-upload-icon{
  width:44px;height:44px;border-radius:12px;
  border:1.5px dashed rgba(74,222,128,.45);
  display:flex;align-items:center;justify-content:center;color:rgba(74,222,128,.55);
  background:rgba(74,222,128,.06);animation:ctaUploadBob 1.6s ease-in-out infinite;
}
@keyframes ctaUploadBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* Layers — JS steps toggle visibility with short transitions */
.cta-demo-bg{
  position:absolute;inset:0;background-size:cover;background-position:55% 32%;z-index:2;
  opacity:0;transform:scale(1.12);transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1);
}
.cta-design-demo[data-step="1"] .cta-demo-bg,
.cta-design-demo[data-step="2"] .cta-demo-bg,
.cta-design-demo[data-step="3"] .cta-demo-bg,
.cta-design-demo[data-step="4"] .cta-demo-bg,
.cta-design-demo[data-step="5"] .cta-demo-bg,
.cta-design-demo[data-step="6"] .cta-demo-bg{opacity:1;transform:scale(1)}
.cta-demo-shine{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 62%);
  transform:translateX(-130%);opacity:0;
}
.cta-design-demo[data-step="2"] .cta-demo-shine,
.cta-design-demo[data-step="6"] .cta-demo-shine{
  opacity:1;animation:ctaShineSweep .7s ease-out forwards;
}
@keyframes ctaShineSweep{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.cta-demo-stage .chip-cutout{
  z-index:4;opacity:0;transform:scale(.55);
  transition:opacity .35s ease,transform .4s cubic-bezier(.34,1.4,.64,1);
}
.cta-design-demo[data-step="2"] .chip-cutout,
.cta-design-demo[data-step="3"] .chip-cutout,
.cta-design-demo[data-step="4"] .chip-cutout,
.cta-design-demo[data-step="5"] .chip-cutout,
.cta-design-demo[data-step="6"] .chip-cutout{opacity:1;transform:scale(1)}
.cta-demo-text{
  position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);z-index:5;
  font-weight:900;font-size:clamp(15px,4.4vw,22px);letter-spacing:.08em;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.6),0 0 24px rgba(168,85,247,.35);
  white-space:nowrap;opacity:0;clip-path:inset(0 100% 0 0);
  transition:opacity .25s ease,clip-path .55s steps(8,end);pointer-events:none;
}
.cta-design-demo[data-step="3"] .cta-demo-text,
.cta-design-demo[data-step="4"] .cta-demo-text,
.cta-design-demo[data-step="5"] .cta-demo-text,
.cta-design-demo[data-step="6"] .cta-demo-text{opacity:1;clip-path:inset(0 0 0 0)}
.cta-demo-text::after{
  content:'';display:inline-block;width:2px;height:.9em;background:#4ade80;
  margin-left:3px;vertical-align:-2px;opacity:0;box-shadow:0 0 8px #4ade80;
}
.cta-design-demo[data-step="3"] .cta-demo-text::after{opacity:1;animation:ctaCaretBlink .5s steps(1,end) infinite}
@keyframes ctaCaretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.cta-demo-emoji{
  position:absolute;right:11%;bottom:13%;z-index:6;
  font-size:clamp(24px,6.5vw,32px);opacity:0;
  transform:translateY(-22px) scale(.35) rotate(-22deg);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
  transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.4,.64,1);pointer-events:none;
}
.cta-design-demo[data-step="5"] .cta-demo-emoji,
.cta-design-demo[data-step="6"] .cta-demo-emoji{opacity:1;transform:translateY(0) scale(1) rotate(0)}
.cta-demo-select{
  position:absolute;left:26%;right:26%;top:46%;bottom:26%;
  border:1.5px dashed rgba(74,222,128,.65);border-radius:4px;z-index:7;opacity:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 16px rgba(74,222,128,.15);
  transition:opacity .25s ease;pointer-events:none;
}
.cta-design-demo[data-step="4"] .cta-demo-select{opacity:1}
.cta-demo-select i{position:absolute;width:9px;height:9px;background:#4ade80;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 8px rgba(74,222,128,.5)}
.cta-demo-select i:nth-child(1){top:-4px;left:-4px}
.cta-demo-select i:nth-child(2){top:-4px;right:-4px}
.cta-demo-select i:nth-child(3){bottom:-4px;left:-4px}
.cta-demo-select i:nth-child(4){bottom:-4px;right:-4px}
/* Cursor follows steps */
.cta-demo-cursor{
  position:absolute;z-index:12;width:24px;height:24px;pointer-events:none;opacity:0;
  top:70%;left:70%;transition:top .45s cubic-bezier(.16,1,.3,1),left .45s cubic-bezier(.16,1,.3,1),opacity .2s ease;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
.cta-demo-cursor svg{width:100%;height:100%;display:block}
.cta-design-demo[data-step="0"] .cta-demo-cursor{opacity:1;top:48%;left:48%}
.cta-design-demo[data-step="1"] .cta-demo-cursor{opacity:1;top:42%;left:46%}
.cta-design-demo[data-step="2"] .cta-demo-cursor{opacity:1;top:34%;left:18%}
.cta-design-demo[data-step="3"] .cta-demo-cursor{opacity:1;top:58%;left:52%}
.cta-design-demo[data-step="4"] .cta-demo-cursor{opacity:1;top:52%;left:50%}
.cta-design-demo[data-step="5"] .cta-demo-cursor{opacity:1;top:72%;left:80%}
.cta-design-demo[data-step="6"] .cta-demo-cursor{opacity:.6;top:50%;left:50%}
/* Step chips */
.cta-demo-steps{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px;position:relative;z-index:2}
.cta-demo-step{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);color:#fff;transition:all .3s ease;
}
.cta-design-demo[data-step="0"] .cta-demo-step:nth-child(1),
.cta-design-demo[data-step="1"] .cta-demo-step:nth-child(1),
.cta-design-demo[data-step="2"] .cta-demo-step:nth-child(1),
.cta-design-demo[data-step="3"] .cta-demo-step:nth-child(2),
.cta-design-demo[data-step="4"] .cta-demo-step:nth-child(2),
.cta-design-demo[data-step="5"] .cta-demo-step:nth-child(3),
.cta-design-demo[data-step="6"] .cta-demo-step:nth-child(3){
  color:#09090b;background:linear-gradient(135deg,#4ade80,#a855f7);border-color:transparent;
}

/* ================================================================
   REVIEWS
   ================================================================ */
.reviews-grid{display:grid;gap:16px;width:100%;max-width:100%;min-width:0}
@media(min-width:640px){.reviews-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.reviews-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.reviews-grid > *{min-width:0;max-width:100%}
.review-card{background:rgba(24,24,27,.4);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:20px;transition:all .3s}
.review-card:hover{border-color:rgba(74,222,128,.15)}
.review-text{font-size:16px;color:var(--zinc-300);margin-top:12px;line-height:1.6}
.review-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.review-author{font-size:16px;font-weight:600;color:var(--zinc-400)}
.review-date{font-size:16px;color:var(--zinc-600)}
.review-product{font-size:10px;color:rgba(74,222,128,.4);margin-top:4px;transition:color .3s}
.review-card:hover .review-product{color:rgba(74,222,128,.6)}

/* ================================================================
   FAQ
   ================================================================ */
.faq-list{display:flex;flex-direction:column;gap:8px;max-width:768px;margin:0 auto}
.faq-item{border:1px solid rgba(255,255,255,.05);border-radius:12px;overflow:hidden;transition:border-color .3s}
.faq-item:hover{border-color:rgba(255,255,255,.1)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;text-align:left;font-size:16px;font-weight:600;transition:background .2s}
.faq-q:hover{background:rgba(255,255,255,.02)}
.faq-q svg{flex-shrink:0;color:var(--zinc-500);transition:transform .3s,color .3s;width:16px;height:16px}
.faq-item.open .faq-q svg{transform:rotate(180deg);color:var(--fel)}
.faq-a{max-height:0;opacity:0;overflow:hidden;transition:all .3s}
.faq-item.open .faq-a{max-height:160px;opacity:1}
.faq-a-inner{padding:0 20px 16px;font-size:16px;color:var(--zinc-400);line-height:1.6}

/* ================================================================
   SHOP PAGE
   ================================================================ */
.shop-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
@media(min-width:640px){.shop-controls{flex-direction:row;align-items:center}}
.search-box{position:relative;flex:1}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--zinc-600);transition:color .2s}
.search-box:focus-within svg{color:var(--fel)}
.search-box input{width:100%;padding:10px 16px 10px 36px;background:rgba(24,24,27,.8);border:1px solid rgba(255,255,255,.1);border-radius:12px;font-size:16px;color:#fff;outline:none;transition:all .2s}
.search-box input:focus{border-color:rgba(74,222,128,.4)}
.search-box input::placeholder{color:var(--zinc-600)}
.sort-select{padding:10px 12px;background:rgba(24,24,27,.8);border:1px solid rgba(255,255,255,.1);border-radius:12px;font-size:16px;color:var(--zinc-300);outline:none;cursor:pointer;transition:border-color .2s;-webkit-appearance:none;width:100%}
@media(min-width:640px){.sort-select{width:auto}}
.sort-select:hover{border-color:rgba(255,255,255,.2)}
.category-pills{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:8px}
.category-pills::-webkit-scrollbar{display:none}
.pill.sub-pill{font-size:13px;padding:6px 14px;background:rgba(39,39,42,.4);border:1px solid rgba(255,255,255,.06)}
.pill.sub-pill.active{background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.3);color:var(--fel)}
.pill{padding:8px 16px;border-radius:99px;font-size:16px;font-weight:600;transition:all .2s;white-space:nowrap;flex-shrink:0}
.pill.active{background:var(--gradient-primary);color:#000;box-shadow:0 4px 12px rgba(74,222,128,.2)}
.pill:not(.active){background:rgba(39,39,42,.6);color:var(--zinc-400);border:1px solid rgba(255,255,255,.05)}
.pill:not(.active):hover{color:#fff;background:var(--zinc-800);border-color:rgba(255,255,255,.1)}
.shop-empty{text-align:center;padding:80px 0;max-width:520px;margin:0 auto}
.shop-empty svg{margin:0 auto 16px;color:var(--zinc-700)}
.shop-empty p{color:var(--zinc-500);line-height:1.55}
.shop-empty .shop-empty-nudge{color:var(--zinc-400);font-size:14px;margin-top:8px}
.shop-empty-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.hero-season-chip{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;color:#fdba74;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.28);cursor:pointer;transition:background .2s,border-color .2s}
.hero-season-chip:hover{background:rgba(249,115,22,.18);border-color:rgba(249,115,22,.45);color:#ffedd5}
.halloween-strip{position:relative;padding:48px 0;background:linear-gradient(180deg,rgba(249,115,22,.06),transparent 70%)}
.halloween-strip .section-title{letter-spacing:-.02em}
.halloween-strip .hw-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.halloween-custom-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:220px;border-radius:16px;border:1px dashed rgba(249,115,22,.35);background:linear-gradient(160deg,rgba(249,115,22,.12),rgba(168,85,247,.1));cursor:pointer;padding:20px;text-align:center;transition:border-color .2s,transform .2s}
.halloween-custom-tile:hover{border-color:rgba(249,115,22,.6);transform:translateY(-2px)}
.halloween-custom-tile strong{font-size:16px;color:#fff}
.halloween-custom-tile span{font-size:13px;color:var(--zinc-400);line-height:1.4}


/* ================================================================
   PRODUCT DETAIL PAGE
   ================================================================ */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--zinc-600);margin-bottom:24px;flex-wrap:wrap}
.breadcrumb button{transition:color .2s}
.breadcrumb button:hover{color:var(--fel)}
.breadcrumb svg{width:10px;height:10px}
.detail-grid{display:grid;gap:32px;width:100%;max-width:100%;min-width:0}
@media(min-width:1024px){.detail-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.detail-mockup{border-radius:16px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);aspect-ratio:3.375/2.125;position:relative}
.detail-mockup img{width:100%;height:100%;object-fit:cover;object-position:center center}
.detail-mockup img.rotated{position:absolute;inset:auto;top:50%;left:50%;width:62.96%;height:158.82%;max-width:none;object-fit:fill;object-position:initial;transform:translate(-50%,-50%) rotate(90deg)}
.detail-mockup-glow{position:absolute;inset:-16px;z-index:-1;border-radius:24px;filter:blur(30px);opacity:.3}
.detail-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.detail-thumb{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.05);aspect-ratio:3/2;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .3s}
.detail-thumb:hover{border-color:rgba(255,255,255,.1)}
.detail-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:.5;transition:opacity .3s}
.detail-thumb img.rotated{inset:auto;top:50%;left:50%;width:62.96%;height:158.82%;max-width:none;object-fit:fill;object-position:initial;transform:translate(-50%,-50%) rotate(90deg)}
.detail-thumb:hover img{opacity:.75}
.detail-thumb span{position:relative;z-index:1;font-size:10px;color:#fff;font-weight:500;background:rgba(0,0,0,.3);padding:2px 6px;border-radius:4px}
.detail-artist{font-size:16px;color:rgba(74,222,128,.8);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.detail-title{font-size:clamp(1.5rem,4vw,2.25rem);font-weight:900;letter-spacing:-.02em;margin-top:4px}
.detail-rating{display:flex;align-items:center;gap:12px;margin-top:8px}
.detail-rating .stars{display:flex;gap:2px}
.detail-rating .stars svg{width:14px;height:14px}
.detail-rating .count{font-size:16px;color:var(--zinc-500)}
.detail-price{font-size:2rem;font-weight:900;margin-top:16px}
.variant-label{font-size:16px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.variant-label button{font-size:16px;color:var(--fel);font-weight:400}
.variant-label button:hover{text-decoration:underline}
.variant-row{display:flex;flex-wrap:wrap;gap:8px}
.variant-btn{padding:10px 16px;border-radius:12px;font-size:16px;font-weight:600;transition:all .2s}
.variant-btn.active{background:var(--gradient-primary);color:#000;box-shadow:0 4px 12px rgba(74,222,128,.15)}
.variant-btn:not(.active){background:rgba(39,39,42,.8);color:var(--zinc-400);border:1px solid rgba(255,255,255,.05)}
.variant-btn:not(.active):hover{border-color:rgba(74,222,128,.2);color:#fff}
.qty-row{display:flex;flex-direction:column;gap:12px;margin-top:32px}
@media(min-width:640px){.qty-row{flex-direction:row;align-items:center}}
.qty-box{display:flex;align-items:center;gap:12px;background:rgba(39,39,42,.8);border-radius:12px;padding:8px 12px;border:1px solid rgba(255,255,255,.05);align-self:flex-start}
.qty-box button{padding:4px;transition:color .2s}
.qty-box button:hover{color:var(--fel)}
.qty-box button svg{width:14px;height:14px}
.qty-box span{font-size:16px;font-weight:700;width:24px;text-align:center}
.add-to-cart-btn{flex:1}
.detail-features{margin-top:32px;display:flex;flex-direction:column;gap:10px}
.detail-features div{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--zinc-400)}
.detail-features .check{color:#34d399;flex-shrink:0;width:13px;height:13px}
.detail-desc{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.05);font-size:16px;color:var(--zinc-500);line-height:1.6}
.detail-desc strong{color:var(--zinc-300)}

/* ================================================================
   SIZE GUIDE MODAL
   ================================================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:50;display:none}
.modal-overlay.open{display:block}
.modal{position:fixed;z-index:51;background:var(--zinc-900);border-radius:16px;padding:24px;border:1px solid rgba(255,255,255,.1);overflow-y:auto;display:none;animation:fadeInScale .25s ease}
.modal.open{display:block}
.modal-size{inset:16px}
@media(min-width:640px){.modal-size{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:560px;max-height:90vh}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-header h3{font-size:18px;font-weight:700}
.modal-header button{padding:4px;border-radius:8px;transition:background .2s}
.modal-header button:hover{background:rgba(255,255,255,.05)}
.modal-header button svg{width:18px;height:18px}
/* Size guide content */
.sg-intro{font-size:14px;color:var(--zinc-400);line-height:1.55;margin-bottom:4px}
.sg-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}
.sg-pill{font-size:12px;font-weight:600;color:var(--zinc-300);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:5px 10px}
.sg-pill strong{color:var(--fel);font-weight:700}
.sg-section{padding-top:18px;border-top:1px solid rgba(255,255,255,.06);margin-top:4px}
.sg-section h4{font-size:15px;font-weight:700;margin-bottom:6px;letter-spacing:.01em}
.sg-section>p,.sg-note{font-size:13px;color:var(--zinc-500);line-height:1.55;margin-bottom:14px}
.sg-cover-list{display:flex;flex-direction:column;gap:16px}
.sg-cover-row{display:flex;gap:14px;align-items:flex-start}
.sg-cover-copy h5{font-size:15px;font-weight:700;margin-bottom:4px}
.sg-cover-copy p{font-size:13px;color:var(--zinc-500);line-height:1.5}
.sg-cover-copy ul{margin:6px 0 0;padding:0 0 0 16px;font-size:12px;color:var(--zinc-400);line-height:1.55}
.sg-cover-copy ul li{margin-bottom:2px}
.sg-cover-copy .sg-best{display:inline-block;margin-top:6px;font-size:11px;font-weight:600;color:var(--fel);background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.18);border-radius:6px;padding:3px 8px}
/* Mini card mockups */
.sg-mini{position:relative;width:104px;height:66px;border-radius:8px;flex-shrink:0;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 14px rgba(0,0,0,.35);background:linear-gradient(135deg,#27272a,#18181b)}
.sg-mini-art{position:absolute;inset:0;background:linear-gradient(135deg,#065f46 0%,#166534 40%,#14532d 100%);opacity:.95}
.sg-mini-art::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(74,222,128,.35),transparent 55%)}
.sg-mini-chip{position:absolute;border-radius:2px;background:linear-gradient(145deg,#c9a84c,#f0d878,#b8973f);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);z-index:2}
.sg-mini-chip.lg{left:10%;top:28%;width:16%;height:22%}
.sg-mini-chip.sm{left:11%;top:31%;width:13%;height:17%}
.sg-mini-window{position:absolute;bottom:10%;left:7%;width:86%;height:18%;border-radius:3px;background:rgba(9,9,11,.75);border:1px dashed rgba(34,211,238,.45);z-index:2;display:flex;align-items:center;justify-content:center}
.sg-mini-window span{font-size:7px;color:rgba(34,211,238,.7);font-weight:600;letter-spacing:.04em}
.sg-mini-half{position:absolute;bottom:0;left:0;right:0;height:50%;background:repeating-linear-gradient(135deg,rgba(9,9,11,.82) 0,rgba(9,9,11,.82) 6px,rgba(24,24,27,.75) 6px,rgba(24,24,27,.75) 12px);border-top:1.5px dashed rgba(255,255,255,.25);z-index:2;display:flex;align-items:center;justify-content:center}
.sg-mini-half span{font-size:7px;color:#fff;font-weight:700;letter-spacing:.06em}
.sg-mini-label{position:absolute;top:5px;right:6px;font-size:7px;font-weight:700;color:#fff;z-index:3;letter-spacing:.04em}
/* Chip option cards */
.sg-chip-grid{display:grid;gap:10px;width:100%;min-width:0}
@media(min-width:420px){.sg-chip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sg-chip-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
.sg-chip-card h5{font-size:13px;font-weight:700}
.sg-chip-card p{font-size:11px;color:var(--zinc-500);line-height:1.45}
.sg-chip-viz{height:44px;border-radius:6px;background:linear-gradient(135deg,#3f3f46,#27272a);position:relative;border:1px solid rgba(255,255,255,.08);overflow:hidden}
.sg-chip-viz .sg-mini-chip{/* reuse */;}
.sg-chip-viz.none::after{content:'No gold pad';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--zinc-500);font-weight:600}
.sg-tip{display:flex;gap:10px;align-items:flex-start;background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.15);border-radius:10px;padding:12px 14px;margin-top:12px}
.sg-tip-icon{flex-shrink:0;width:18px;height:18px;color:var(--fel);margin-top:1px}
.sg-tip p{font-size:12px;color:var(--zinc-300);line-height:1.5}
.sg-tip strong{color:#fff}
.sg-fit-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.sg-fit-item{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:10px 12px}
.sg-fit-item strong{display:block;font-size:12px;font-weight:700;color:var(--zinc-200);margin-bottom:2px}
.sg-fit-item span{font-size:11px;color:var(--zinc-500);line-height:1.4}

/* ================================================================
   DESIGNER PAGE
   ================================================================ */
/* Single-col minmax(0,1fr) — bare auto tracks grow to panel min-content (~398px)
   and overflow right on S26 Ultra / 360–412 CSS viewports (looks off-center). */
.designer-grid{display:grid;gap:32px;margin-top:32px;width:100%;max-width:100%;min-width:0;grid-template-columns:minmax(0,1fr)}
.designer-grid>*{min-width:0;max-width:100%}
@media(min-width:1024px){.designer-grid{grid-template-columns:minmax(0,1fr) minmax(0,340px)}}
.designer-canvas{position:relative;width:100%;max-width:100%;min-width:0;border-radius:16px;overflow:hidden;border:2px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px rgba(0,0,0,.5);cursor:crosshair;user-select:none;aspect-ratio:3.375/2.125;transition:border-color .3s;box-sizing:border-box}
.designer-canvas:hover{border-color:rgba(74,222,128,.15)}
.designer-canvas.has-bg{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.designer-canvas.has-bg.panning{cursor:grabbing}
/* When a photo is on the card, the 3D scene must not steal Samsung/Android pan gestures */
.card-3d-scene.has-photo{touch-action:none;-webkit-user-select:none}
.designer-bg-img{position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;user-select:none;-webkit-user-drag:none;max-width:none;max-height:none;will-change:transform}
/* Pass-through so photo pan hits the canvas (not an empty full-size div). Text/emoji re-enable hits. */
#designerTexts{position:absolute;inset:0;z-index:3;pointer-events:none}
#designerTexts .designer-text-el{pointer-events:auto}
.bg-crop-hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:6;pointer-events:none;font-size:10px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.75);background:rgba(0,0,0,.55);padding:4px 10px;border-radius:99px;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
@media(pointer:coarse){
  .bg-crop-hint{font-size:11px;padding:5px 10px}
}
.bg-fit-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bg-fit-btn{flex:1 1 auto;min-width:0;padding:8px 6px;border-radius:10px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;border:1px solid rgba(255,255,255,.08);background:rgba(39,39,42,.5);color:#fff;transition:all .15s;line-height:1.25}
.bg-fit-btn.active{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.12);color:var(--fel)}
.bg-fit-btn:hover{border-color:rgba(255,255,255,.15);color:#fff}
.bg-rot-row{display:flex;gap:8px;margin-top:10px}
.bg-rot-row button{flex:1;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;border:1px solid rgba(255,255,255,.08);background:rgba(39,39,42,.5);color:#fff}
.bg-rot-row button:hover{border-color:rgba(74,222,128,.3);color:var(--fel)}
.bg-nudge-row{display:grid;grid-template-columns:repeat(3,40px);gap:6px;justify-content:center;margin-top:8px}
.bg-nudge-row button{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(39,39,42,.5);color:#fff;font-size:15px;cursor:pointer;font-family:inherit;touch-action:manipulation}
.bg-nudge-row button:hover{border-color:rgba(74,222,128,.3);color:var(--fel)}
.bg-nudge-row .spacer{visibility:hidden}
.designer-chip{position:absolute;border-radius:6px;border:2px dashed rgba(250,204,20,.4);background:rgba(250,204,20,.1);pointer-events:none;animation:chipPulse 3s ease-in-out infinite}
.designer-half{position:absolute;bottom:0;left:0;right:0;height:50%;background:rgba(39,39,42,.7);border-top:2px dashed var(--zinc-600);display:flex;align-items:center;justify-content:center;pointer-events:none;backdrop-filter:blur(4px)}

/* ---- Cover Size Overlays (Detail Page) ---- */
.cover-overlay-half{position:absolute;bottom:0;left:0;right:0;height:50%;z-index:4;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(9,9,11,.75) 0px,rgba(9,9,11,.75) 8px,rgba(9,9,11,.6) 8px,rgba(9,9,11,.6) 16px);border-top:2px dashed rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.cover-overlay-half span{font-size:15px;color:#fff;font-weight:600;background:rgba(0,0,0,.4);padding:4px 12px;border-radius:6px;letter-spacing:.05em}
.cover-overlay-window{position:absolute;bottom:8%;left:6%;right:6%;height:16%;z-index:4;pointer-events:none;border:2px dashed rgba(34,211,238,.3);border-radius:6px;background:rgba(9,9,11,.4);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(1px)}
.cover-overlay-window span{font-size:10px;color:rgba(34,211,238,.5);font-weight:600}
.designer-window{position:absolute;bottom:10%;left:7%;right:7%;height:20%;border:2px dashed rgba(34,211,238,.3);background:rgba(34,211,238,.05);border-radius:6px;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* Discord-style color picker */
.custom-cp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9999;display:flex;align-items:flex-end;justify-content:center;padding:0;backdrop-filter:blur(4px)}
@media(min-width:520px){.custom-cp-overlay{align-items:center;padding:20px}}
.custom-cp{background:#1e1f22;border:1px solid rgba(255,255,255,.08);border-radius:16px 16px 0 0;padding:16px 18px 20px;width:100%;max-width:380px;box-shadow:0 -8px 40px rgba(0,0,0,.45)}
@media(min-width:520px){.custom-cp{border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.5)}}
.custom-cp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.custom-cp-head h3{font-size:16px;font-weight:700;margin:0;flex:1;text-align:center;color:#f2f3f5}
.custom-cp-head .cp-select{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;transition:background .15s}
.custom-cp-head .cp-select:hover{background:rgba(255,255,255,.14)}
.custom-cp-grab{width:36px;height:4px;border-radius:99px;background:rgba(255,255,255,.15);margin:0 auto 12px}
@media(min-width:520px){.custom-cp-grab{display:none}}
.custom-cp-hex-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px 12px;background:#111214;border:1px solid rgba(255,255,255,.08);border-radius:10px}
.custom-cp-swatch{width:28px;height:28px;border-radius:6px;border:2px solid rgba(255,255,255,.15);flex-shrink:0}
.custom-cp-hex{flex:1;background:transparent;border:0;outline:none;font-size:16px;font-weight:600;color:#f2f3f5;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;min-width:0}
.custom-cp-hex::placeholder{color:rgba(255,255,255,.75)}
.custom-cp-canvas-wrap{position:relative;width:100%;aspect-ratio:1;max-height:min(52vh,280px);margin:0 auto 14px;border-radius:10px;overflow:hidden;touch-action:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.custom-cp canvas#cpCanvas{width:100%;height:100%;display:block;cursor:crosshair;border-radius:10px}
.custom-cp-hue-wrap{position:relative;margin-bottom:4px;padding:0 2px}
.custom-cp input[type=range]#cpHue{width:100%;-webkit-appearance:none;appearance:none;height:18px;border-radius:9px;background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);outline:none;margin:0}
.custom-cp input[type=range]#cpHue::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:6px;background:#fff;border:3px solid #1e1f22;box-shadow:0 1px 6px rgba(0,0,0,.45);cursor:pointer}
.custom-cp input[type=range]#cpHue::-moz-range-thumb{width:22px;height:22px;border-radius:6px;background:#fff;border:3px solid #1e1f22;box-shadow:0 1px 6px rgba(0,0,0,.45);cursor:pointer}
.custom-cp-hint{font-size:12px;color:#fff;text-align:center;margin-top:10px}
.custom-cp-preview{display:none}
.custom-cp-btns{display:none}
.bg-color-pick{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:12px;background:rgba(39,39,42,.55);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:border-color .15s,background .15s;text-align:left}
.bg-color-pick:hover{border-color:rgba(74,222,128,.35);background:rgba(39,39,42,.75)}
.bg-color-pick .sw{width:36px;height:36px;border-radius:8px;border:2px solid rgba(255,255,255,.15);flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.bg-color-pick .meta{flex:1;min-width:0}
.bg-color-pick .meta b{display:block;font-size:14px;font-weight:600;color:#fff}
.bg-color-pick .meta code{font-size:13px;color:#fff;font-family:ui-monospace,Menlo,monospace;letter-spacing:.03em}
.bg-color-pick .chev{color:#fff;font-size:18px}
.designer-text-el{position:absolute;cursor:move;user-select:none;-webkit-user-select:none;touch-action:none;font-family:'Outfit',sans-serif;font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.6);white-space:nowrap;padding:6px 10px;border-radius:6px;z-index:5;line-height:1.15}
.designer-text-el.active{outline:2px solid var(--fel);outline-offset:3px;z-index:12;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.designer-text-el .el-delete{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid #fff;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:14;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.45);line-height:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.designer-text-el.active .el-delete{display:flex}
.designer-text-el .el-delete svg{width:12px;height:12px;stroke:#fff;pointer-events:none}
.designer-text-el .el-scale{position:absolute;bottom:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--fel);border:2px solid #fff;display:none;align-items:center;justify-content:center;cursor:nwse-resize;z-index:14;box-shadow:0 2px 6px rgba(0,0,0,.4);touch-action:none;padding:0;color:#052e16}
.designer-text-el.active .el-scale{display:flex}
.designer-text-el .el-scale svg{width:12px;height:12px;stroke:currentColor;pointer-events:none}
.designer-text-el .el-rotate{position:absolute;bottom:-6px;left:-6px;width:22px;height:22px;border-radius:50%;background:#3b82f6;border:2px solid #fff;display:none;align-items:center;justify-content:center;cursor:grab;z-index:14;box-shadow:0 2px 6px rgba(0,0,0,.4);touch-action:none;padding:0;color:#fff}
.designer-text-el.active .el-rotate{display:flex}
.designer-text-el .el-rotate:active{cursor:grabbing}
.designer-text-el .el-rotate svg{width:12px;height:12px;stroke:currentColor;pointer-events:none}
.designer-text-el .el-label{display:block;pointer-events:none}
.designer-panel{display:flex;flex-direction:column;gap:16px;width:100%;max-width:100%;min-width:0}
.panel-card{background:rgba(24,24,27,.4);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:16px;transition:border-color .3s,box-shadow .3s;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.panel-card:hover{border-color:rgba(255,255,255,.1)}
.panel-card h3{font-size:16px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.panel-card h3 svg{width:14px;height:14px;color:var(--fel)}
/* Designer panel sections — colored borders so cards don't blend into the page */
.designer-panel .panel-card{border-width:1.5px}
.designer-panel .panel-card.pc-options{border-color:rgba(59,130,246,.5);box-shadow:inset 0 0 0 1px rgba(59,130,246,.08),0 0 20px -8px rgba(59,130,246,.2)}
.designer-panel .panel-card.pc-options:hover{border-color:rgba(59,130,246,.7)}
.designer-panel .panel-card.pc-bg{border-color:rgba(168,85,247,.5);box-shadow:inset 0 0 0 1px rgba(168,85,247,.08),0 0 20px -8px rgba(168,85,247,.2)}
.designer-panel .panel-card.pc-bg:hover{border-color:rgba(168,85,247,.7)}
.designer-panel .panel-card.pc-text{border-color:rgba(74,222,128,.5);box-shadow:inset 0 0 0 1px rgba(74,222,128,.08),0 0 20px -8px rgba(74,222,128,.2)}
.designer-panel .panel-card.pc-text:hover{border-color:rgba(74,222,128,.7)}
.designer-panel .panel-card.pc-emoji{border-color:rgba(251,191,36,.5);box-shadow:inset 0 0 0 1px rgba(251,191,36,.08),0 0 20px -8px rgba(251,191,36,.2)}
.designer-panel .panel-card.pc-emoji:hover{border-color:rgba(251,191,36,.7)}
.designer-panel .panel-card.pc-ai{border-color:rgba(244,114,182,.5);background:linear-gradient(135deg,rgba(74,222,128,.04),rgba(168,85,247,.05));box-shadow:inset 0 0 0 1px rgba(244,114,182,.08),0 0 20px -8px rgba(244,114,182,.25)}
.designer-panel .panel-card.pc-ai:hover{border-color:rgba(244,114,182,.7)}
.designer-panel .panel-card.pc-cart{border-color:rgba(74,222,128,.45);box-shadow:inset 0 0 0 1px rgba(74,222,128,.06),0 0 20px -8px rgba(74,222,128,.18)}
.designer-panel .panel-card.pc-cart:hover{border-color:rgba(74,222,128,.65)}
.upload-zone{display:block;width:100%;padding:16px 14px;border:2px dashed rgba(255,255,255,.35);border-radius:12px;text-align:center;cursor:pointer;transition:border-color .3s,background .3s,color .3s;font-size:17px;font-weight:700;color:#fff;letter-spacing:.01em;background:rgba(255,255,255,.04)}
.upload-zone:hover{border-color:rgba(74,222,128,.65);background:rgba(74,222,128,.08);color:#fff}
.upload-zone input{display:none}
.designer-panel .upload-zone{border-color:rgba(255,255,255,.45);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.designer-panel .upload-zone:hover{border-color:rgba(74,222,128,.7);box-shadow:0 0 16px -4px rgba(74,222,128,.35)}
.text-input-row{display:flex;gap:8px;margin-bottom:12px;width:100%;min-width:0;max-width:100%}
.text-input-row input{flex:1;min-width:0;padding:8px 12px;background:rgba(39,39,42,.8);border:1px solid rgba(255,255,255,.1);border-radius:8px;font-size:16px;color:#fff;outline:none;transition:all .2s}
.text-input-row input:focus{border-color:rgba(74,222,128,.4)}
.text-input-row input::placeholder{color:rgba(255,255,255,.75)}
.text-input-row button{padding:8px 12px;background:var(--gradient-primary);color:#000;border-radius:8px;font-size:16px;font-weight:700;white-space:nowrap}
.text-controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.text-controls label{font-size:16px;color:#fff}
.text-controls input[type="color"]{width:24px;height:24px;border:0;cursor:pointer;background:transparent;border-radius:4px}
.text-controls input[type="range"]{width:80px;accent-color:var(--fel)}
.text-list{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.text-list-item{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:8px;font-size:16px;transition:all .2s}
.text-list-item.active{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2)}
.text-list-item:not(.active){background:rgba(39,39,42,.4);border:1px solid transparent}
.text-list-item button{color:#fff;transition:color .2s;padding:4px}
.text-list-item button svg{width:18px;height:18px}
.text-list-item button:hover{color:#f87171}
.text-list-item button svg{width:12px;height:12px}
.designer-var-row{display:flex;flex-wrap:wrap;gap:6px}
.designer-var-btn{padding:6px 12px;border-radius:8px;font-size:15px;font-weight:600;transition:all .2s}
.designer-var-btn.active{background:var(--gradient-primary);color:#000;box-shadow:0 4px 12px rgba(74,222,128,.15)}
.designer-var-btn:not(.active){background:rgba(39,39,42,.8);color:#fff;border:1px solid rgba(255,255,255,.05)}
.designer-var-btn:not(.active):hover{color:#fff}
.designer-price{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.designer-price span{font-size:16px;color:#fff}
.designer-price strong{font-size:1.5rem;font-weight:900}
/* Site-wide: muted chrome text is white via zinc token remap. Designer already matches Card Options. */
#page-designer .section-subtitle,
#page-designer .drag-hint{color:#fff}
/* Sticky cart CTA on mobile designer so users don't scroll past emoji/options forever */
@media(max-width:767px){
  .designer-cart-card{
    position:sticky;bottom:var(--mobile-nav-h);z-index:30;
    background:rgba(9,9,11,.94)!important;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-color:rgba(74,222,128,.25)!important;
    box-shadow:0 -10px 36px rgba(0,0,0,.45);
  }
}

/* ================================================================
   HOW IT WORKS PAGE
   ================================================================ */
.hiw-page-steps{display:flex;flex-direction:column;gap:64px}
.hiw-page-step{display:flex;flex-direction:column;align-items:center;gap:32px}
@media(min-width:640px){.hiw-page-step{flex-direction:row}}
.hiw-page-num{width:96px;height:96px;flex-shrink:0;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.05);transition:all .3s;position:relative}
@media(min-width:640px){.hiw-page-num{width:128px;height:128px;border-radius:24px}}
.hiw-page-step:hover .hiw-page-num{border-color:rgba(255,255,255,.1)}
.hiw-page-num .label{font-size:10px;font-weight:700;color:var(--zinc-500);letter-spacing:.2em}
.hiw-page-num .num{font-size:clamp(1.5rem,4vw,2.25rem);font-weight:900}
.hiw-page-info h2{font-size:1.5rem;font-weight:900;margin-bottom:8px}
.hiw-page-info p{color:var(--zinc-400);line-height:1.6}

/* ================================================================
   CART DRAWER
   ================================================================ */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:100;display:none}
.cart-overlay.open{display:block}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:420px;background:rgba(24,24,27,.95);backdrop-filter:blur(16px);z-index:101;display:none;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.3);border-left:1px solid rgba(255,255,255,.05)}
.cart-drawer.open{display:flex;animation:slideInRight .3s cubic-bezier(.16,1,.3,1)}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid rgba(255,255,255,.05)}
.cart-header h2{font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px}
.cart-header h2 svg{width:18px;height:18px;color:var(--fel)}
.cart-close{padding:6px;border-radius:8px;transition:all .3s}
.cart-close:hover{background:rgba(255,255,255,.05);transform:rotate(90deg)}
.cart-close svg{width:20px;height:20px}
.cart-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px}
.cart-empty{text-align:center;padding:64px 0}
.cart-empty svg{margin:0 auto 16px;color:var(--zinc-700)}
.cart-empty p{color:var(--zinc-500);margin-bottom:16px}
.cart-empty button{color:var(--fel);font-weight:600;font-size:16px}
.cart-empty button:hover{text-decoration:underline}
.cart-item{display:flex;align-items:flex-start;gap:12px;background:rgba(39,39,42,.4);border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,.05);transition:border-color .3s;overflow:hidden;min-width:0}
.cart-item:hover{border-color:rgba(74,222,128,.1)}
.cart-item-img{width:80px;height:56px;border-radius:8px;overflow:hidden;flex:0 0 80px;position:relative;box-sizing:border-box}
.cart-item-img img{width:100%;height:100%;object-fit:cover;object-position:center center}
.cart-item-img img.rotated{position:absolute;inset:auto;top:50%;left:50%;width:62.96%;height:158.82%;max-width:none;object-fit:fill;object-position:initial;transform:translate(-50%,-50%) rotate(90deg)}
.cart-item-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.2)}
.cart-item-img-placeholder span{color:#fff;font-size:9px;font-weight:600;text-align:center;line-height:1.2;padding:0 4px}
.cart-item-info{flex:1;min-width:0;overflow:hidden}
.cart-item-name{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* name/thumb share .cart-item-link — do NOT set width:100% on the base class or the thumb expands full-row and clips title/qty */
.cart-item-link{cursor:pointer;border:0;background:none;padding:0;margin:0;text-align:left;color:inherit;font:inherit;display:block;max-width:100%}
.cart-item-name-link.cart-item-link,.cart-item-info .cart-item-link{width:100%}
.cart-item-link:hover .cart-item-name,.cart-item-name-link:hover{color:var(--fel)}
/* thumb is a div[role=link], not always a button — pin size so .cart-item-link cannot blow it out */
.cart-item-img.cart-item-link{width:80px;height:56px;max-width:80px;flex:0 0 80px}
.cart-item-name-link{cursor:pointer;transition:color .2s}
.cart-item-name-link:focus-visible,.cart-item-link:focus-visible{outline:2px solid var(--fel);outline-offset:2px;border-radius:4px}
.cart-item-variant{font-size:15px;color:var(--zinc-500);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-item-edit{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:0;border:0;background:none;color:var(--fel);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.cart-item-edit:hover{text-decoration:underline}
.cart-item-edit:focus-visible{outline:2px solid var(--fel);outline-offset:2px;border-radius:4px}
.cart-item-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.cart-item-qty{display:flex;align-items:center;gap:8px;background:var(--zinc-800);border-radius:8px;border:1px solid rgba(255,255,255,.05)}
.cart-item-qty button{padding:4px;transition:color .2s}
.cart-item-qty button:hover{color:var(--fel)}
.cart-item-qty button svg{width:12px;height:12px}
.cart-item-qty span{font-size:16px;font-weight:700;width:16px;text-align:center}
.cart-item-price{font-size:16px;font-weight:700;color:var(--fel)}
.cart-item-remove{align-self:flex-start;padding:4px;color:var(--zinc-600);transition:color .2s;flex-shrink:0}
.cart-item-remove:hover{color:#f87171}
.cart-item-remove svg{width:14px;height:14px}
.cart-footer{padding:20px;border-top:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:12px}
.cart-subtotal{display:flex;justify-content:space-between;font-size:16px}
.cart-subtotal span{color:var(--zinc-400)}
.cart-subtotal strong{font-size:1.25rem;font-weight:900;color:var(--fel)}
.cart-shipping{font-size:15px;color:var(--zinc-500);text-align:center}

/* ================================================================
   FOOTER
   ================================================================ */
.footer{border-top:1px solid rgba(255,255,255,.05);background:var(--zinc-950);position:relative;overflow-x:clip;max-width:100%;min-width:0;width:100%}
.footer-grid{display:grid;gap:32px;width:100%;max-width:100%;min-width:0}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.footer-brand p{font-size:16px;color:var(--zinc-600);line-height:1.6;margin-top:16px}
.footer-col h4{font-size:16px;font-weight:700;letter-spacing:.1em;color:var(--zinc-400);margin-bottom:12px}
.footer-col button,.footer-col span{display:block;font-size:16px;color:var(--zinc-600);margin-top:8px;transition:color .2s}
.footer-col button:hover{color:var(--fel)}
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;gap:16px}
@media(min-width:640px){.footer-bottom{flex-direction:row;justify-content:space-between}}
.footer-copyright{font-size:16px;color:#fff}
.footer-payments{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;color:var(--zinc-600)}
@media(min-width:640px){.footer-payments{justify-content:flex-end}}
.footer-payments .label{font-size:10px}
.footer-payments span:not(.label){font-size:16px;font-weight:600;transition:color .2s;cursor:default}
.footer-payments span:not(.label):hover{color:var(--fel)}

/* ================================================================
   SVG ICONS (inline)
   ================================================================ */
.icon{display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Card overlay - chip cutout & window */
.card-overlay{position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit}
.chip-cutout{position:absolute;border-radius:4px;background:linear-gradient(145deg,#c9a84c,#f0d878,#b8973f,#e8cf6a,#a8872f);box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.4);overflow:hidden}
.chip-cutout::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 30%,rgba(0,0,0,.08) 30%,rgba(0,0,0,.08) 33%,transparent 33%,transparent 63%,rgba(0,0,0,.08) 63%,rgba(0,0,0,.08) 66%);opacity:.6}
.chip-cutout::after{content:'';position:absolute;inset:15% 0;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12)}
.chip-large{left:10%;top:28%;width:16%;height:22%}
.chip-small{left:11%;top:31%;width:13%;height:17%}
.window-cutout{position:absolute;bottom:10%;left:7%;width:86%;height:18%;border-radius:4px;background:rgba(24,24,27,.85);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;padding:0 6%;gap:6%}
.window-dots{display:flex;gap:4%;align-items:center}
.window-dots span{color:rgba(255,255,255,.15);font-size:min(1.2vw,10px);font-family:monospace;letter-spacing:.15em}
/* Smaller card overlay sizes */
.product-card .chip-cutout{border-radius:3px}
.product-card .window-cutout{border-radius:3px}
.cart-item-img .chip-cutout{border-radius:2px}
.cart-item-img .window-cutout{border-radius:2px;display:none}
.detail-thumb .chip-cutout{border-radius:2px}