/* Reset-ish */
*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,sans-serif}

/* Theme */
:root{
  --bg:#0e0e10;
  --fg:#f5f5f7;
  --accent:#d7202e;
  --accent-lite:#ff6a76;
  --card:#1a1a1d;
}

body{background:var(--bg);color:var(--fg);line-height:1.5}

/* Header */
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:#161618;position:sticky;top:0;z-index:999}
header h1{font-size:1.5rem;letter-spacing:.5px}
header h1 .fang{color:var(--accent);margin-right:.3rem}
nav a{margin-left:1rem;color:var(--fg);text-decoration:none;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--accent)}

#hero{background:url('../img/hero.jpg') center/cover;height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem}
#hero h2{font-size:2.5rem;text-shadow:0 0 10px #000}
#hero p{margin:.5rem 0 2rem}
.cta{padding:.8rem 2rem;font-size:1.1rem;background:var(--accent);border:none;color:#fff;border-radius:4px;cursor:pointer}
.cta:hover{background:var(--accent-lite)}

section{padding:4rem 2rem;max-width:1200px;margin:auto}

.grid{margin-top:0.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem}
.card{background:var(--card);padding:1rem;border-radius:6px;text-align:center;position:relative;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,.6);transition:transform .3s}
.card:hover{transform:translateY(-6px)}
.card img {
    width: auto;
    height: 165px;
    border-radius: 4px;
    border: 2px solid red;          /* fallback color */
    animation: rainbowBorder 5s linear infinite;
  }
  
  @keyframes rainbowBorder {
      0%   { border-color: rgb(255,   0,   0); } /* red */
     16%   { border-color: rgb(255, 127,   0); } /* orange */
     32%   { border-color: rgb(255, 255,   0); } /* yellow */
     48%   { border-color: rgb(  0, 255,   0); } /* green */
     64%   { border-color: rgb(  0,   0, 255); } /* blue */
     80%   { border-color: rgb( 75,   0, 130); } /* indigo */
     90%   { border-color: rgb(148,   0, 211); } /* violet */ 
     100%   { border-color: rgb(255,   0,   0); } /* red */
  }
.card h3{margin:1rem 0 .3rem;font-size:1.2rem}
.card .price{font-weight:bold;margin:.5rem 0}
.card .add{padding:.5rem 1rem;background:var(--accent);border:none;color:#fff;border-radius:4px;cursor:pointer}
.card .add:hover{background:var(--accent-lite)}

details{background:var(--card);border-left:4px solid var(--accent);margin-bottom:1rem;padding:1rem;border-radius:4px}
details summary{cursor:pointer;font-weight:bold}

form{display:flex;flex-direction:column;gap:1rem}
form input,form textarea{padding:.8rem;border:none;border-radius:4px;background:#2a2a2d;color:var(--fg)}
form button{align-self:flex-start;padding:.8rem 2rem;background:var(--accent);border:none;color:#fff;border-radius:4px;cursor:pointer}
form button:hover{background:var(--accent-lite)}

.timestamp{margin-top:1rem;font-size:.9rem;color:#aaa}

footer{text-align:center;padding:2rem 1rem;font-size:.9rem;color:#777}

/* Cart drawer */
#cart{position:fixed;right:0;top:0;width:320px;height:100vh;background:#111;box-shadow:-5px 0 15px rgba(0,0,0,.8);padding:2rem;display:flex;flex-direction:column;transition:transform .4s ease-in-out}
#cart.hidden{transform:translateX(100%)}
#cart h2{margin-bottom:1rem}
#cart ul{flex:1;overflow-y:auto;list-style:none;margin-bottom:1rem}
#cart li{display:flex;justify-content:space-between;margin-bottom:.7rem}
#cart .total{font-size:1.2rem;font-weight:bold;margin-bottom:1rem}
#cart button{margin-bottom:.5rem}
#checkout{background:var(--accent);color:#fff;border:none;padding:.6rem;border-radius:4px;cursor:pointer}
#close-cart{background:none;border:1px solid #555;color:#fff;padding:.6rem;border-radius:4px;cursor:pointer}

/* Scrollbar tweak (WebKit) */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}