:root{
  --gold: #c99a2f;
  --deep-red: #b31b1b;
  --white: #fff;
  --bg: #fffaf5;
  --card-shadow: rgba(0,0,0,0.08);
  --max-w: 1100px;
}

*{box-sizing:border-box;font-family:Inter, system-ui, Arial, sans-serif}

body{
  margin:0;
  background: linear-gradient(180deg,#fff,#fff8f0);
  color:#222;
}


.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  border-bottom:4px solid var(--gold);
  background:conic-gradient(from 180deg at 50% 50%, rgba(255,0,0,0.03), rgba(255,0,0,0.02));
}
.brand{font-weight:800;font-size:1.2rem; display:flex; gap:.5rem; align-items:center}
.gold{color:var(--gold); font-weight:900}
.topbar nav a{margin:0 8px; text-decoration:none; color: #222}
.topbar .auth{display:flex;gap:8px;align-items:center}
.topbar button{background:var(--gold);border:2px solid #fff;padding:6px 10px;border-radius:8px;cursor:pointer}


.hero{
  text-align:center;
  padding:60px 20px;
  border:6px solid var(--gold);
  margin:24px auto;
  max-width:var(--max-w);
  background: #fff;
  border-radius:16px;
  box-shadow: 0 8px 30px var(--card-shadow);
}
.hero h1{color:var(--deep-red); margin:8px 0 6px}
.hero p{opacity:.8}
.cta{display:inline-block;margin-top:12px;padding:10px 18px;border-radius:12px;background:var(--deep-red);color:var(--white);text-decoration:none;}


.container{max-width:var(--max-w);margin:24px auto;padding:0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:12px}
.card{
  border:3px solid var(--gold);
  padding:12px;border-radius:12px;background:var(--white);
  box-shadow: 0 6px 18px var(--card-shadow);
  min-height:130px;
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
}
.card img{width:100%;height:110px;object-fit:cover;border-radius:8px;border:2px solid rgba(0,0,0,0.04)}
.card h3{margin:0}
.card .cat{font-size:.85rem;color:rgba(0,0,0,0.6)}
.price{margin-top:auto;font-weight:800}


.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[aria-hidden="true"]{display:none}
.modal-content{background:var(--white);padding:18px;border-radius:12px;border:4px solid var(--gold);width:320px;box-shadow:0 12px 40px var(--card-shadow)}
.modal-content label{display:block;margin:8px 0;font-size:.9rem}
.modal-content input{width:100%;padding:8px;border-radius:8px;border:1px solid #ddd}
.msg{color:#b31b1b;margin-top:8px}

.footer{text-align:center;padding:20px;border-top:3px dashed var(--gold)}

.snowflake {
    position: fixed;
    top: -10px;
    color: white;
    pointer-events: none;
    user-select: none;
    animation-name: fall;
    animation-timing-function: linear;
}

@keyframes fall {
    0% {
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0.3;
    }
}

.christmas-border {
    border: 3px solid gold;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    background: linear-gradient(145deg, #ffffffd0, #ffe5e5d0);
    padding: 20px;
}

.about-section {
    margin-left: 22%; 
    margin-top: 40px;
    width: 60%;
    text-align: center;
    padding: 25px;
    background: linear-gradient(135deg, #fff5f5d0, #ffe0e0d0);
}

.about-section h2 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #b30000;
    text-shadow: 0 0 8px gold;
}

.about-section p {
    font-size: 18px;
    margin-bottom: 20px;
    color: #550000;
}

.qr-code {
    width: 180px;
    height: 180px;
    border: 4px solid gold;
    border-radius: 15px;
    padding: 10px;
    background: white;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}


.telegram-btn {
    display: inline-block;
    margin-top: 20px;
    background: linear-gradient(45deg, #b30000, #ff0000);
    padding: 12px 25px;
    border-radius: 12px;
    border: 2px solid gold;
    font-size: 18px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    transition: 0.25s;
}

.telegram-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px gold;
}
.christmas-border {
    border: 3px solid gold;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}

.login-box {
    width: 350px;
    margin: 150px auto;
    padding: 20px;
    text-align: center;
    background: linear-gradient(135deg, #fff5f5d0, #ffe0e0d0);
    border-radius: 15px;
}

.login-box input {
    width: 85%;
    padding: 10px;
    margin: 12px 0;
    border: 2px solid gold;
    border-radius: 10px;
}

.login-box button {
    background: linear-gradient(45deg, #b30000, #ff0000);
    color: white;
    padding: 10px 25px;
    border: 2px solid gold;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.25s;
}

.login-box button:hover {
    transform: scale(1.07);
    box-shadow: 0 0 15px gold;
}

.error {
    color: darkred;
    margin-top: 10px;
}

..section-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 20px; 
    padding: 20px;
}

.item-box {
    width: 200px; 
    background: #fffaf0; 
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.item-box:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px gold;
}

.item-box img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
}

.item-box h4 {
    font-size: 18px;
    color: #b30000;
    margin: 5px 0;
}

.item-box p {
    font-size: 16px;
    color: #550000;
    font-weight: bold;
    margin: 5px 0;
}

.old-price {
    text-decoration: line-through; 
    color: #888888; 
    margin-right: 10px;
    font-weight: normal;
}

.new-price {
    color: #b30000; 
    font-weight: bold;
    font-size: 18px;
}

.section-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 20px; 
    padding: 20px;
}

.telegramQR {
    width: 100px;
    height: 100px;
    border: 4px solid gold;
    border-radius: 15px;
    padding: 10px;
    background: white;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}