@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@300;400;600&display=swap');
:root{
  --gold:#b9925e;
  --bg1:linear-gradient(180deg,#0b0f12 0%,#0f1720 100%);
}
/* Global body and typography */
body{
  font-family:'Inter',sans-serif;
  background:var(--bg1);
  color:#e6e6e6;
}
h1,h2,h3{font-family:'Playfair Display',serif;color:#fff}

/* Hero and components */
.premium-hero{border-radius:28px;box-shadow:0 10px 30px rgba(0,0,0,.6);overflow:hidden}
.premium-badge{background:linear-gradient(90deg,var(--gold),#ffd88a);color:#111;padding:6px 10px;border-radius:999px;font-weight:600;font-size:12px}
.category-item{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);backdrop-filter:blur(6px)}
.melpa-cta{background:linear-gradient(90deg,var(--gold),#f5d88b);color:#111;font-weight:700}
.melpa-cta:hover{filter:brightness(.95);transform:translateY(-2px)}
.flash-sale-img{border-radius:12px}

/* Invoice specific */
.invoice-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.2));border:1px solid rgba(185,148,94,0.12);box-shadow:0 8px 24px rgba(0,0,0,.6);border-radius:14px;padding:18px}
.badge-premium{background:var(--gold);color:#111;padding:6px 10px;border-radius:999px;font-weight:700}
.status-pill{border-radius:999px;padding:6px 10px;font-weight:600;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06)}
.copy-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:6px 10px;border-radius:8px}

@media print{
  .invoice-card{box-shadow:none;border:none}
}

/* small utility tweaks */
.premium-small-muted{color:rgba(255,255,255,0.65);font-size:13px}

/* Skewed skeleton + 3D pop-out effect for product cards */
.category-item{position:relative;perspective:1200px;overflow:visible}
.category-item::before{
  /* skewed skeleton background */
  content:"";
  position:absolute;
  inset:8% 6%;
  background:linear-gradient(120deg, rgba(185,148,94,0.06), rgba(0,0,0,0.06));
  border-radius:12px;
  transform:skew(-8deg) rotate(-2deg) translateY(6px);
  z-index:0;
  transition:transform .45s cubic-bezier(.2,.9,.2,1), opacity .35s;
  opacity:0;
}
.category-item img{
  position:relative;z-index:1;display:block;transition:transform .55s cubic-bezier(.2,.9,.2,1),filter .4s,box-shadow .4s;transform-origin:center center;border-radius:10px}
.category-item:hover::before{opacity:1;transform:skew(-8deg) rotate(-2deg) translateY(12px)}
.category-item:hover img{
  /* pop-out + subtle tilt to simulate 3D */
  transform:translateY(-18px) rotate(-6deg) scale(1.06);
  filter:brightness(1.02) saturate(1.05);
  box-shadow:0 30px 40px rgba(0,0,0,0.55), 0 10px 20px rgba(0,0,0,0.35);
}

/* Extra accent layer to suggest depth for larger screens */
@media (min-width:768px){
  .category-item::after{
    content:"";
    position:absolute;left:50%;top:70%;width:80%;height:40%;transform:translateX(-50%) rotate(-4deg) scaleX(1.05);filter:blur(18px) saturate(.7);background:linear-gradient(90deg, rgba(185,148,94,0.07), rgba(0,0,0,0.06));border-radius:8px;z-index:0;opacity:0;transition:opacity .4s,transform .5s
  }
  .category-item:hover::after{opacity:1;transform:translateX(-50%) rotate(-4deg) scaleX(1.08)}
}

/* make flash-sale images a little more dramatic */
.flash-sale-img{transition:transform .5s,filter .4s}
.flash-sale-img:hover{transform:translateY(-14px) rotate(-4deg) scale(1.04);filter:drop-shadow(0 28px 36px rgba(0,0,0,0.55))}

/* Pop-out overlay image used for faux 3D effect */
.popout-img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);width:88%;height:auto;z-index:2;pointer-events:none;border-radius:10px;opacity:0;transition:transform .55s cubic-bezier(.2,.9,.2,1),opacity .45s,filter .45s;will-change:transform,opacity}
.category-item:hover .popout-img{opacity:1;transform:translate(-50%,-62%) rotate(-6deg) scale(1.08);filter:brightness(1.02) saturate(1.05);}
.category-item .img-wrap{position:relative;overflow:visible}

@media (prefers-reduced-motion:reduce){
  .popout-img,.category-item img{transition:none!important}
}