/* ============================================
   THE SHINY CARD SHOP — Complete Stylesheet
   ============================================ */

:root {
  --gold: #f5b840; --gold-light: #fcd978; --gold-glow: rgba(245,184,64,.15);
  --coral: #d95f46; --coral-light: #e8765f;
  --cyan: #36e1ff; --cyan-muted: #2bc4de;
  --cream: #f2ece3; --cream-light: #f7f3ed; --cream-white: #faf8f4;
  --cream-border: #e2dbd0; --cream-card: #fff;
  --text-dark: #1a1a1f; --text-mid: #555560; --text-light: #8a8a96;
  --black: #0b0b0f;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Lexend', sans-serif;
  --font-mono: 'Space Mono', monospace;
}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--cream);color:var(--text-dark)}
::selection{background:var(--gold);color:var(--black)}img{max-width:100%;height:auto}

/* === HEADER === */
header{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(247,243,237,.92);border-bottom:1px solid var(--cream-border)}
nav{max-width:1140px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.nav-logo img{width:126px;height:126px}
.nav-logo-text{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:3px;text-transform:uppercase;line-height:1.1;color:var(--text-dark)}
.nav-logo-text small{display:block;font-family:var(--font-mono);font-size:9px;font-weight:400;color:var(--text-light);letter-spacing:4px;margin-top:2px}
.nav-links{display:flex;gap:28px;align-items:center;list-style:none}
.nav-links a{font-family:var(--font-body);font-size:13px;font-weight:400;color:var(--text-mid);text-decoration:none;letter-spacing:2px;text-transform:uppercase;transition:color .3s}
.nav-links a:hover{color:var(--gold)}
.nav-cta{padding:10px 22px;font-size:11px!important;letter-spacing:3px;border:1px solid var(--gold);color:var(--gold)!important;transition:all .3s}
.nav-cta:hover{background:var(--gold)!important;color:var(--black)!important}
.mobile-toggle{display:none;background:none;border:1px solid var(--gold);color:var(--gold);width:40px;height:40px;font-size:18px;cursor:pointer}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 36px;font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:3px;text-transform:uppercase;text-decoration:none;border:none;cursor:pointer;transition:all .35s}
.btn-gold{background:var(--gold);color:var(--black)}.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 8px 30px rgba(245,184,64,.25)}
.btn-coral{background:var(--coral);color:#fff}.btn-coral:hover{background:var(--coral-light);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--text-mid);border:1px solid var(--cream-border)}.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:10px 20px;font-size:10px;letter-spacing:2px}

/* === HERO === */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:160px 32px 100px;overflow:hidden;background:var(--cream-light)}
.hero::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);width:800px;height:800px;background:radial-gradient(circle,rgba(245,184,64,.1) 0%,rgba(217,95,70,.04) 35%,transparent 65%);pointer-events:none}
.hero-logo-wrapper{position:relative;margin-bottom:40px}
.hero-logo{width:540px;height:540px;animation:gentle-float 6s ease-in-out infinite;filter:drop-shadow(0 8px 40px rgba(245,184,64,.18));position:relative;z-index:2}
.logo-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;border-radius:50%;border:1px solid rgba(245,184,64,.15);animation:ring-pulse 5s ease-in-out infinite}
.logo-ring:nth-child(2){width:720px;height:720px;animation-delay:1.5s;border-color:rgba(245,184,64,.08)}
@keyframes gentle-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ring-pulse{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.03)}}
.hero h1{font-family:var(--font-display);font-size:clamp(36px,6vw,64px);font-weight:700;color:var(--text-dark);letter-spacing:8px;text-transform:uppercase;line-height:1.1;margin-bottom:16px}
.hero-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto 20px}
.hero-tagline{font-family:var(--font-body);font-size:clamp(13px,2vw,17px);font-weight:300;color:var(--text-light);letter-spacing:5px;text-transform:uppercase;margin-bottom:48px}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* === MARQUEE === */
.marquee{padding:18px 0;overflow:hidden;white-space:nowrap;border-top:1px solid var(--cream-border);border-bottom:1px solid var(--cream-border);background:var(--cream-white)}
.marquee-inner{display:inline-flex;animation:scroll-marquee 30s linear infinite}
.marquee span{font-family:var(--font-mono);font-size:11px;color:var(--text-light);letter-spacing:4px;text-transform:uppercase;padding:0 48px}
.marquee .gold{color:var(--gold)}.marquee .coral-text{color:var(--coral)}.marquee .cyan-text{color:var(--cyan-muted)}
@keyframes scroll-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* === HOME SECTIONS === */
.home-section{max-width:1140px;margin:0 auto;padding:100px 32px}
.section-label{font-family:var(--font-mono);font-size:10px;color:var(--coral);letter-spacing:5px;text-transform:uppercase;text-align:center;margin-bottom:12px}
.section-title{font-family:var(--font-display);font-size:clamp(28px,4vw,44px);font-weight:700;color:var(--text-dark);text-align:center;letter-spacing:4px;text-transform:uppercase;margin-bottom:12px}
.section-title em{color:var(--gold);font-style:italic}
.section-line{width:40px;height:1px;background:var(--gold);margin:0 auto 16px}
.section-sub{font-family:var(--font-body);font-size:15px;font-weight:300;color:var(--text-light);text-align:center;margin-bottom:60px;letter-spacing:1px}

/* === CATEGORIES === */
.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat-card{background:var(--cream-card);border:1px solid var(--cream-border);padding:44px 24px 36px;text-align:center;position:relative;overflow:hidden;transition:all .4s;cursor:pointer}
.cat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--coral));opacity:0;transition:opacity .4s}
.cat-card:hover::before{opacity:1}
.cat-card:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.06)}
.cat-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 20px;border:1px solid var(--cream-border);transition:all .4s}
.cat-card:hover .cat-icon{border-color:var(--gold)}
.cat-card h3{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text-dark);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.cat-card p{font-size:13px;font-weight:300;color:var(--text-light);line-height:1.7}

/* === PLATFORMS === */
.platforms-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.platform-card{padding:52px 40px;border:1px solid var(--cream-border);transition:all .4s}
.platform-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.06)}
.platform-whatnot{background:linear-gradient(160deg,rgba(217,95,70,.05) 0%,var(--cream-card) 50%)}
.platform-ebay{background:linear-gradient(160deg,rgba(54,225,255,.04) 0%,var(--cream-card) 50%)}
.platform-badge{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:4px;text-transform:uppercase;margin-bottom:24px;padding:6px 16px}
.badge-whatnot{background:var(--coral);color:#fff}.badge-ebay{background:var(--cyan);color:var(--black)}
.platform-card h3{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--text-dark);letter-spacing:2px;margin-bottom:14px}
.platform-card p{font-size:14px;font-weight:300;color:var(--text-light);line-height:1.8;margin-bottom:32px;max-width:380px}

/* === FEATURES === */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.feature-item{text-align:center;padding:40px 20px;border:1px solid transparent;transition:all .3s}
.feature-item:hover{border-color:var(--cream-border);background:var(--cream-card)}
.feature-num{font-family:var(--font-display);font-size:48px;font-weight:700;color:var(--gold);line-height:1;margin-bottom:16px;font-style:italic}
.feature-item h3{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text-dark);letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.feature-item p{font-size:13px;font-weight:300;color:var(--text-light);line-height:1.7}

/* === NEWSLETTER === */
.contact-wrapper{max-width:620px;margin:0 auto;text-align:center;padding:60px 40px;border:1px solid var(--cream-border);background:var(--cream-card);position:relative;overflow:hidden}
.contact-wrapper::before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:2px;background:linear-gradient(90deg,var(--coral),var(--gold),var(--cyan))}
.contact-wrapper h2{font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--text-dark);letter-spacing:4px;text-transform:uppercase;margin-bottom:12px}
.contact-wrapper p{font-size:14px;font-weight:300;color:var(--text-light);margin-bottom:32px;line-height:1.7}
.email-form{display:flex;gap:0;justify-content:center;margin-bottom:28px}
.email-form input{padding:16px 24px;font-family:var(--font-body);font-size:14px;font-weight:300;background:var(--cream-light);border:1px solid var(--cream-border);border-right:none;color:var(--text-dark);min-width:280px;outline:none;transition:border-color .3s}
.email-form input:focus{border-color:var(--gold)}.email-form input::placeholder{color:#b0a89e}
.email-form button{padding:16px 28px;background:var(--gold);color:var(--black);font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;border:1px solid var(--gold);cursor:pointer;transition:all .3s;white-space:nowrap}
.email-form button:hover{background:var(--gold-light)}
.contact-email{font-family:var(--font-mono);font-size:13px;color:var(--text-light);letter-spacing:2px}
.contact-email a{color:var(--coral);text-decoration:none}

/* === FOOTER === */
footer{border-top:1px solid var(--cream-border);padding:48px 32px 40px;background:var(--cream-light)}
.footer-inner{max-width:1140px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.footer-left{display:flex;align-items:center;gap:16px}
.footer-left img{width:108px;height:108px;opacity:.7}
.footer-left span{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text-dark);letter-spacing:3px;text-transform:uppercase}
.footer-center{display:flex;gap:28px}
.footer-center a{font-family:var(--font-body);font-size:12px;font-weight:400;color:var(--text-light);text-decoration:none;letter-spacing:2px;text-transform:uppercase;transition:color .3s}
.footer-center a:hover{color:var(--gold)}
.footer-right{font-family:var(--font-mono);font-size:10px;color:var(--text-light);letter-spacing:1px}
.footer-email{width:100%;text-align:center;margin-top:16px;font-family:var(--font-mono);font-size:12px;color:var(--text-light);letter-spacing:2px}
.footer-email a{color:var(--coral);text-decoration:none}

/* === SHOP PAGE === */
.shop-hero{padding:160px 32px 60px;text-align:center;background:var(--cream-light);border-bottom:1px solid var(--cream-border)}
.shop-hero h1{font-family:var(--font-display);font-size:clamp(32px,5vw,52px);font-weight:700;color:var(--text-dark);letter-spacing:6px;text-transform:uppercase;margin-bottom:12px}
.shop-hero h1 em{color:var(--gold);font-style:italic}
.shop-hero-line{width:40px;height:1px;background:var(--gold);margin:0 auto 16px}
.shop-hero p{font-size:15px;font-weight:300;color:var(--text-light);letter-spacing:2px}
.shop-toolbar{max-width:1140px;margin:0 auto;padding:32px 32px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.shop-filters{display:flex;gap:8px;flex-wrap:wrap}
.filter-btn{padding:8px 20px;font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;background:var(--cream-card);color:var(--text-mid);border:1px solid var(--cream-border);cursor:pointer;transition:all .3s}
.filter-btn:hover,.filter-btn.active{background:var(--gold);color:var(--black);border-color:var(--gold)}
.shop-count{font-family:var(--font-mono);font-size:11px;color:var(--text-light);letter-spacing:2px}
.product-grid{max-width:1140px;margin:0 auto;padding:32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.product-card{background:var(--cream-card);border:1px solid var(--cream-border);overflow:hidden;transition:all .4s;position:relative}
.product-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.08);border-color:var(--gold)}
.product-img{width:100%;aspect-ratio:1;background:var(--cream-light);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.product-card:hover .product-img img{transform:scale(1.05)}
.product-img .placeholder-icon{font-size:48px;opacity:.2}
.product-badge{position:absolute;top:12px;left:12px;font-family:var(--font-mono);font-size:9px;letter-spacing:3px;text-transform:uppercase;padding:4px 12px}
.badge-sealed{background:var(--gold);color:var(--black)}.badge-single{background:var(--coral);color:#fff}
.badge-graded{background:var(--cyan);color:var(--black)}.badge-sold{background:var(--text-dark);color:#fff}
.product-info{padding:20px}
.product-info h3{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text-dark);margin-bottom:6px;letter-spacing:1px}
.product-info .product-desc{font-size:13px;font-weight:300;color:var(--text-light);line-height:1.6;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-footer{display:flex;justify-content:space-between;align-items:center}
.product-price{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--gold);font-style:italic}
.product-buy-btn{padding:6px 16px;font-family:var(--font-mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;background:var(--gold);color:var(--black);text-decoration:none;transition:all .3s}
.product-buy-btn:hover{background:var(--gold-light);transform:translateY(-1px)}
.product-status-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-light);border:1px solid var(--cream-border);padding:4px 12px}
.shop-empty{text-align:center;padding:80px 32px;max-width:500px;margin:0 auto}
.shop-empty .empty-icon{font-size:64px;margin-bottom:20px;opacity:.3}
.shop-empty h2{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--text-dark);margin-bottom:12px;letter-spacing:2px}
.shop-empty p{font-size:14px;color:var(--text-light);line-height:1.7;margin-bottom:32px}

/* === ADMIN === */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--cream)}
.login-box{background:var(--cream-card);border:1px solid var(--cream-border);padding:48px 40px;max-width:400px;width:100%;text-align:center;position:relative}
.login-box::before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:linear-gradient(90deg,var(--coral),var(--gold),var(--cyan))}
.login-box img{width:80px;height:80px;margin-bottom:20px}
.login-box h1{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--text-dark);letter-spacing:3px;text-transform:uppercase;margin-bottom:4px}
.login-box .login-sub{font-family:var(--font-mono);font-size:10px;color:var(--coral);letter-spacing:4px;text-transform:uppercase;margin-bottom:32px}
.login-box input[type="password"]{width:100%;padding:14px 16px;font-family:var(--font-body);font-size:14px;background:var(--cream-light);border:1px solid var(--cream-border);color:var(--text-dark);outline:none;margin-bottom:16px;letter-spacing:4px;text-align:center;transition:border-color .3s}
.login-box input:focus{border-color:var(--gold)}
.login-error{display:none;font-family:var(--font-mono);font-size:11px;color:var(--coral);letter-spacing:1px;margin-bottom:12px}
.admin-header{display:flex;justify-content:space-between;align-items:center;padding:160px 32px 24px;max-width:1140px;margin:0 auto}
.admin-header h1{font-family:var(--font-display);font-size:clamp(24px,4vw,36px);font-weight:700;color:var(--text-dark);letter-spacing:4px;text-transform:uppercase}
.admin-header h1 em{color:var(--gold);font-style:italic}
.admin-bar{display:flex;gap:8px;align-items:center}
.logout-btn{padding:8px 16px;font-family:var(--font-mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;background:none;border:1px solid var(--cream-border);color:var(--text-light);cursor:pointer;transition:all .3s}
.logout-btn:hover{border-color:var(--coral);color:var(--coral)}
.admin-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--cream-border)}
.admin-btn{flex:1;padding:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;transition:all .2s;text-align:center}
.edit-btn{background:var(--gold);color:var(--black)}.edit-btn:hover{background:var(--gold-light)}
.delete-btn{background:none;border:1px solid var(--cream-border)!important;color:var(--text-light)}.delete-btn:hover{border-color:var(--coral)!important;color:var(--coral)}

/* === MODAL === */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);z-index:200;align-items:center;justify-content:center;padding:24px}
.modal-overlay.open{display:flex}
.modal{background:var(--cream-card);border:1px solid var(--cream-border);max-width:540px;width:100%;max-height:90vh;overflow-y:auto;padding:40px;position:relative}
.modal-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-light);transition:color .2s}.modal-close:hover{color:var(--coral)}
.modal h2{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--text-dark);letter-spacing:3px;text-transform:uppercase;margin-bottom:8px}
.modal .modal-sub{font-size:13px;color:var(--text-light);margin-bottom:32px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--text-mid);margin-bottom:8px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:14px 16px;font-family:var(--font-body);font-size:14px;font-weight:300;background:var(--cream-light);border:1px solid var(--cream-border);color:var(--text-dark);outline:none;transition:border-color .3s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--gold)}
.form-group textarea{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.img-upload-area{border:2px dashed var(--cream-border);padding:32px;text-align:center;cursor:pointer;transition:all .3s;background:var(--cream-light)}
.img-upload-area:hover{border-color:var(--gold);background:var(--cream-white)}
.img-upload-area .upload-icon{font-size:32px;margin-bottom:8px;opacity:.4}
.img-upload-area p{font-size:12px;color:var(--text-light)}.img-upload-area small{font-size:11px;color:var(--text-light);opacity:.6}
.img-preview{width:100%;max-height:200px;object-fit:contain;margin-top:12px;display:none}
.modal-actions{display:flex;gap:12px;margin-top:32px}.modal-actions .btn{flex:1;justify-content:center}

/* === SCROLL REVEAL === */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:translateY(0)}

/* === RESPONSIVE === */
@media(max-width:960px){.categories{grid-template-columns:repeat(2,1fr)}.platforms-grid{grid-template-columns:1fr}.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .nav-links{display:none}.mobile-toggle{display:flex;align-items:center;justify-content:center}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(247,243,237,.98);padding:28px 32px;gap:20px;border-bottom:1px solid var(--cream-border)}
  .hero{padding:140px 24px 80px}.hero-logo{width:280px;height:280px}
  .logo-ring{width:320px!important;height:320px!important}.logo-ring:nth-child(2){width:400px!important;height:400px!important}
  .categories{grid-template-columns:1fr}.features-grid{grid-template-columns:1fr 1fr}
  .hero-buttons{flex-direction:column;align-items:center}.hero-buttons .btn{width:280px;justify-content:center}
  .email-form{flex-direction:column;align-items:stretch}.email-form input{min-width:auto;border-right:1px solid var(--cream-border);border-bottom:none}
  .platform-card{padding:36px 24px}.product-grid{grid-template-columns:1fr 1fr;padding:24px;gap:16px}
  .modal{padding:28px 24px}.form-row{grid-template-columns:1fr}.shop-toolbar{padding:24px 24px 0}
  .nav-logo img{width:80px;height:80px}.footer-left img{width:64px;height:64px}
  .footer-inner{flex-direction:column;text-align:center}.footer-center{flex-wrap:wrap;justify-content:center}
  .admin-header{flex-direction:column;gap:16px;align-items:flex-start;padding-top:130px}
  .login-box{padding:36px 24px}
}
@media(max-width:480px){.product-grid{grid-template-columns:1fr}}