@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Nunito:wght@300;400;600;700&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

/* Body: Nunito for all text except the site title which uses Cinzel */
body { 
    font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color:#fff; 
    overflow-x:hidden; 
    min-height:100vh; 
    background:#000;
}

/* Background video & poster */
#bg-video { position:fixed; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter:brightness(0.6); }
#bg-poster { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; }
#bg-poster img { width:100%; height:100%; object-fit:cover; filter:brightness(0.6); }

/* Container / Glass */
.container { max-width:1400px; margin:0 auto; padding:2rem; position:relative; z-index:1; }

.glass { 
    background:rgba(255,255,255,0.08); 
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); 
    border-radius:20px; border:1px solid rgba(255,255,255,0.18); 
    padding:2rem; box-shadow:0 8px 32px rgba(0,0,0,0.4); 
}

/* Header */
.header { text-align:center; margin-bottom:2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }

/* Title uses Cinzel Decorative */
.title-link { 
    color:#fff; text-decoration:none; 
    font-family:'Cinzel Decorative',cursive; 
    font-size:2rem; text-shadow:0 0 15px rgba(255,215,0,0.5); 
    transition:all 0.3s;
}
.title-link:hover { transform:scale(1.05); }

/* TOGGLE BUTTON */
.view-toggle-btn {
    background:rgba(255,255,255,0.1); color:white; padding:0.7rem 1.2rem;
    border:2px solid rgba(255,255,255,0.3); border-radius:50px; font-weight:600;
    cursor:pointer; transition:all 0.4s; backdrop-filter:blur(10px); font-size:0.95rem;
}
.view-toggle-btn:hover { background:rgba(255,255,255,0.2); border-color:gold; }
.view-toggle-btn.active { background:gold; color:#333; border-color:gold; }

/* GOLDEN BUTTONS (Newsletter & Contact) — emphasized */
.newsletter-btn-golden, .contact-btn-golden {
    background:linear-gradient(45deg,rgba(255,215,0,0.3),rgba(255,180,0,0.4));
    color:white; padding:0.9rem 1.8rem; border:2px solid gold; border-radius:50px;
    font-weight:700; font-size:1.1rem; cursor:pointer; backdrop-filter:blur(10px);
    box-shadow:0 4px 15px rgba(255,215,0,0.3); transition:all 0.4s;
}
.newsletter-btn-golden:hover, .contact-btn-golden:hover { background:gold; color:#333; transform:scale(1.05); box-shadow:0 8px 25px rgba(255,215,0,0.5); }

/* LIGHTBOX */
.lightbox-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:9999; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.lightbox-content { position:relative; max-width:560px; width:92%; background:rgba(255,215,0,0.06); backdrop-filter:blur(20px); border:2px solid rgba(255,215,0,0.12); border-radius:24px; padding:2rem; box-shadow:0 20px 50px rgba(255,215,0,0.12); text-align:center; animation:fadeIn 0.45s ease; }
@keyframes fadeIn { from {opacity:0; transform:scale(0.98);} to {opacity:1; transform:scale(1);} }
.close-btn { position:absolute; top:12px; right:18px; font-size:2.2rem; color:white; cursor:pointer; text-shadow:0 0 15px gold; transition:all 0.25s; background:transparent; border:none; }
.close-btn:hover { transform:scale(1.15); color:gold; }
.lightbox-content h2 { color:gold; font-size:1.9rem; margin-bottom:0.6rem; text-shadow:0 0 18px rgba(255,215,0,0.4); font-family:'Cinzel Decorative',cursive; }
.lightbox-content p { margin:0.5rem 0 1rem; font-size:1rem; opacity:0.95; line-height:1.5; }

/* FORM (Lightbox forms) */
.lightbox-form { display:flex; flex-direction:column; align-items:stretch; gap:0.6rem; margin-top:0.4rem; }
.lightbox-form input[type="email"], .lightbox-form input[type="text"], .lightbox-form textarea {
    width:100%; padding:1rem; margin:0.4rem 0; border-radius:14px; border:2px solid rgba(255,215,0,0.2); background:rgba(255,255,255,0.06); color:white; font-size:1.05rem;
}
.lightbox-form textarea { border-radius:12px; resize:vertical; min-height:120px; padding:0.9rem; }
.lightbox-form input::placeholder, .lightbox-form textarea::placeholder { color:rgba(255,255,255,0.75); }
.lightbox-form button { align-self:center; background:gold; color:#333; padding:0.9rem 2.2rem; border:none; border-radius:50px; font-weight:700; font-size:1rem; cursor:pointer; margin-top:0.8rem; transition:all 0.25s; }
.lightbox-form button:hover { background:#ffdd00; transform:translateY(-2px); }

/* Riddle block */
.riddle { background:rgba(255,255,255,0.06); padding:1rem; border-radius:12px; margin:1rem 0; border:1px solid rgba(255,215,0,0.08); text-align:center; }
.riddle p { margin:0 0 0.6rem; font-size:1.05rem; font-weight:700; color:gold; }
.lightbox-status { margin-top:0.8rem; font-size:0.95rem; min-height:1.6rem; }

/* SHOP AREA */
.shop-block { margin-bottom:3rem; }

/* Shop header follow glass design */
.shop-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.6rem; flex-wrap:wrap; gap:1rem; }
.shop-header h2 {
    margin:0;
    font-size:1.5rem;
    padding:0.6rem 0.9rem;
    border-radius:12px;
    background:rgba(255,215,0,0.04);
    border:1px solid rgba(255,215,0,0.06);
    color:gold;
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.shop-header a { color:gold; text-decoration:none; }
.shop-header a:hover { text-decoration:underline; }

.shop-header-right { display:flex; align-items:center; gap:0.8rem; }

/* SVG progress styles */
.progress-svg { width:56px; height:56px; display:block; }
.progress-svg .circle-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width:3.5; }
.progress-svg .circle { fill: none; stroke: gold; stroke-width:3.5; stroke-linecap:round; }

/* tooltip for refresh */
.refresh-info { position:relative; display:inline-flex; align-items:center; justify-content:center; cursor:default; }
.refresh-info .tooltip {
    position:absolute; bottom:-2.6rem; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.75); padding:0.35rem 0.6rem; border-radius:8px; font-size:0.9rem; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.refresh-info:hover .tooltip { opacity:1; pointer-events:auto; }

/* Shop link as glass button */
.shop-link-btn {
    display:inline-block; padding:0.6rem 1rem; border-radius:12px; background:rgba(255,255,255,0.04); color:gold; border:1px solid rgba(255,215,0,0.08); text-decoration:none; font-weight:700;
    transition:all .18s; box-shadow:0 6px 20px rgba(0,0,0,0.12);
}
.shop-link-btn:hover { background:rgba(255,215,0,0.06); transform:translateY(-3px); color:#fff; }

/* CARD */
.card { background:rgba(255,255,255,0.04); border-radius:12px; overflow:hidden; transition:all 0.35s; border:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; }
.card:hover { transform:translateY(-8px); box-shadow:0 18px 40px rgba(0,0,0,0.4); }
.card img { width:100%; height:180px; object-fit:cover; }
.card-content { padding:1rem; display:flex; flex-direction:column; gap:0.6rem; flex:1; }
.card-content h4 { margin:0; font-size:1.05rem; }

/* ensure spacing under descriptive text to keep button separated */
.card-content p { margin:0 0 0.8rem 0; }

/* price row: price and availability inline */
.price-row { display:flex; align-items:center; justify-content:space-between; gap:0.8rem; width:100%; }
.price { font-weight:700; color:gold; font-size:1.1rem; display:flex; align-items:center; gap:0.5rem; }
.oldprice { text-decoration:line-through; opacity:0.75; font-size:0.9rem; color:rgba(255,255,255,0.9); margin-left:0.5rem; }

/* availability smaller and inline, placed right of price */
.meta-right { display:flex; align-items:center; gap:0.6rem; }
.availability-inline { font-size:0.95rem; opacity:0.9; color:rgba(255,255,255,0.92); }

/* CTA button spacing: more space above button */
.btn { display:inline-block; margin-top:3.0rem; padding:0.7rem 1.1rem; background:rgba(255,215,0,0.14); color:white; text-decoration:none; border-radius:40px; border:1px solid rgba(255,215,0,0.25); font-weight:700; transition:all 0.25s; text-align:center; align-self:flex-end; }
.btn:hover { background:gold; color:#333; transform:translateY(-3px); }

/* Loading / messages */
.loading, .no-offer, .error { grid-column:1/-1; text-align:center; padding:2rem; font-size:1.1rem; opacity:0.85; }

footer { text-align:center; margin-top:3rem; padding:2rem; font-size:0.9rem; opacity:0.85; }

/* Image preview (hover) */
.image-preview {
    position:fixed;
    pointer-events:none;
    z-index:10050;
    display:none;
    background:rgba(0,0,0,0.75);
    padding:8px;
    border-radius:8px;
    box-shadow:0 8px 30px rgba(0,0,0,0.6);
    border:1px solid rgba(255,255,255,0.06);
}
.image-preview img { display:block; width:300px; height:auto; max-width:90vw; border-radius:6px; }

/* Reduce preview on very small screens */
@media (max-width:480px) {
    .image-preview img { width:200px; }
}

/* Responsive tweaks */
@media (max-width:720px) {
    .card img { height:160px; }
    .lightbox-content { padding:1.2rem; }
    .title-link { font-size:1.6rem; }
    .shop-header { gap:0.5rem; }
    .shop-header-right { gap:0.5rem; }
    .progress-svg { width:46px; height:46px; }
    .price-row { flex-direction:column; align-items:flex-start; gap:0.4rem; }
    .meta-right { gap:0.4rem; }
}