:root{
  --bg-1: #0f1724;
  --bg-2: #0b1220;
  --accent: #7c3aed;
  --accent-2: #06b6d4;
  --muted: #9aa4b2;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Rajdhani, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
}
.container{width:95%;max-width:1100px;margin:0 auto;padding:2rem 0}
.site-header{background:linear-gradient(90deg, rgba(124,58,237,0.12), rgba(6,182,212,0.08));border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.logo{font-family:Orbitron, Rajdhani, sans-serif;margin:0;font-size:1.6rem;letter-spacing:1px}
.logo .accent{color:var(--accent);text-shadow:0 4px 30px rgba(124,58,237,0.25)}
.nav a{color:var(--muted);margin-left:1rem;text-decoration:none}
.hero{text-align:center;padding:2rem 0}
.hero-title{font-size:2rem;margin:0;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,0.6)}
.hero-sub{color:var(--muted);margin-top:.5rem}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem;margin-top:1.5rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;overflow:hidden;box-shadow:0 6px 30px rgba(2,6,23,0.6);transition:transform .18s ease,box-shadow .18s ease;border:1px solid rgba(255,255,255,0.03)}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(2,6,23,0.75)}
.card-media{height:140px;display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg, rgba(124,58,237,0.06), rgba(6,182,212,0.04))}
.card-media img{max-width:100%;max-height:100%;object-fit:cover}
.placeholder{color:var(--muted);padding:1rem}
.card-body{padding:1rem}
.product-name{margin:0 0 .4rem 0;font-weight:700}
.product-price{color:var(--accent-2);font-weight:700;margin:0 0 .6rem 0}
.product-desc{display:none}
.card-actions{display:flex;gap:.5rem}
.btn{border:0;padding:.55rem .8rem;border-radius:10px;cursor:pointer;font-weight:700}
.btn.buy{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#06121a;box-shadow:0 8px 30px rgba(6,182,212,0.08)}
.btn.details{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.site-footer{padding:1.2rem 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02);margin-top:2rem}

@media (max-width:560px){.hero-title{font-size:1.4rem}.card-media{height:120px}}

/* Modal styles */
.media-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:200;pointer-events:none;opacity:0;transition:opacity .18s ease}
.media-modal.open{pointer-events:auto;opacity:1}
.media-modal-backdrop{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,6,12,0.6),rgba(1,6,12,0.85));backdrop-filter:blur(6px)}
.media-modal-panel{position:relative;z-index:20;width:90%;max-width:960px;background:transparent;border-radius:12px;padding:1rem}
.media-modal .modal-close{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.45);border:0;color:#fff;font-size:22px;padding:6px 10px;border-radius:8px;cursor:pointer}
.media-slideshow{display:flex;align-items:center;gap:12px}
.slide-prev,.slide-next{background:rgba(255,255,255,0.05);border:0;color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer}
.slide-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:320px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:10px;overflow:hidden}
.media-full{max-width:100%;max-height:70vh;display:block}
.media-counter{margin-top:.6rem;color:var(--muted);text-align:center}

/* Buy modal styles */
.buy-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:210;pointer-events:none;opacity:0;transition:opacity .18s ease}
.buy-modal.open{pointer-events:auto;opacity:1}
.buy-modal-backdrop{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,6,12,0.6),rgba(1,6,12,0.85));backdrop-filter:blur(4px)}
.buy-modal-panel{position:relative;z-index:20;width:92%;max-width:420px;background:linear-gradient(180deg, rgba(12,16,25,0.9), rgba(6,10,16,0.9));border-radius:12px;padding:1rem;border:1px solid rgba(255,255,255,0.04)}
.buy-modal .buy-close{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.45);border:0;color:#fff;font-size:22px;padding:6px 10px;border-radius:8px;cursor:pointer}
.buy-modal h3{margin:0 0 .6rem 0}
.buy-modal input[type="email"]{width:100%;padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted)}
.buy-summary{display:flex;justify-content:space-between;align-items:center;padding:.6rem;border-radius:8px;background:linear-gradient(90deg,rgba(124,58,237,0.06),rgba(6,182,212,0.04));margin-bottom:.6rem}
.buy-summary-name{font-weight:700;color:#fff}
.buy-summary-price{font-weight:800;color:var(--accent-2)}

/* Improved buy form layout */
.buy-form{display:flex;flex-direction:column;gap:0.75rem}
.buy-title{margin:0 0 .25rem 0;font-size:1.1rem}
.buy-summary{padding:.75rem}
.buy-summary-left{flex:1}
.buy-summary-right{text-align:right;min-width:130px}
.buy-summary-price{font-size:1.05rem}
.buy-summary-discount{font-size:.85rem;color:var(--muted);margin-top:6px}
.buy-summary-final{font-size:1.05rem;margin-top:6px;color:var(--accent-2)}

.form-row{display:flex;flex-direction:column;gap:.35rem}
.form-label{color:var(--muted);font-size:.86rem}
.form-controls{display:flex;gap:.5rem}
.form-input{padding:.6rem;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#e6eef8;width:100%}
.coupon-input{min-width:0}
.coupon-apply{padding:.55rem .9rem}

.actions-row{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.4rem}
.buy-submit{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#06121a;padding:.6rem 1rem;border-radius:10px}
.buy-cancel{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:.55rem .9rem;border-radius:10px}
.buy-message{margin-top:.5rem;color:var(--accent-2);min-height:1.2em}

@media (max-width:520px){
  .buy-summary{flex-direction:column;align-items:flex-start}
  .buy-summary-right{text-align:left}
  .actions-row{justify-content:stretch;flex-direction:column}
  .coupon-apply{min-width:110px}
}
.buy-message{margin-top:.6rem;color:var(--accent-2)}

/* CodePen-style slideshow (scoped to modal) */
.media-modal .slideshow-container{
  position:relative;width:100%;height:100%;max-height:70vh;border-radius:12px;overflow:hidden}
.media-modal .slideshow-container .slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 1.2s ease}
.media-modal .slideshow-container .slide.active{opacity:1;pointer-events:auto;z-index:1}
.media-modal .slideshow-container img,.media-modal .slideshow-container video{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 7s ease,opacity 0.6s ease}
.media-modal .slideshow-container .slide.active img,.media-modal .slideshow-container .slide.active video{transform:scale(1);opacity:1}
.media-modal .slideshow-container .overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.05));z-index:1}
.media-modal .slideshow-container .caption{position:absolute;bottom:28px;left:28px;z-index:2;color:#fff;font-size:clamp(1rem,2.6vw,1.4rem);opacity:0;transform:translateY(8px);transition:all .9s ease .4s}
.media-modal .slideshow-container .slide.active .caption{opacity:1;transform:translateY(0)}
.media-modal .slideshow-container .prev,.media-modal .slideshow-container .next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.06);color:#fff;padding:12px;border-radius:50%;cursor:pointer;z-index:3;opacity:0.6}
.media-modal .slideshow-container .prev{left:14px}
.media-modal .slideshow-container .next{right:14px}
.media-modal .slideshow-container .dots-container{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:3}
.media-modal .slideshow-container .dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.28);cursor:pointer;transition:transform .2s ease}
.media-modal .slideshow-container .dot.active{background:rgba(255,255,255,0.9);transform:scale(1.25)}


/* Fixes: ensure the generated slideshow fills the slide-stage and images are visible */
.media-modal .slide-stage .slideshow-container{height:100%;min-height:320px}
.media-modal .slideshow-container{height:100%}
.media-modal .slideshow-container .slide{position:absolute;inset:0;display:block}
.media-modal .slideshow-container img,.media-modal .slideshow-container video{display:block;opacity:1}
.media-modal .slideshow-container .overlay{pointer-events:none}