:root{
  --bg:#0b1220;
  --bg2:#111a2c;
  --card:#121b2e;
  --text:#eef3ff;
  --muted:#aab7d4;
  --gold:#f6c762;
  --gold2:#d8a73a;
  --wa:#25d366;
  --shadow:0 16px 40px rgba(0,0,0,.35);
}
.intro-categorie {
  text-align: center;
  padding: 60px 20px;
}
#btnBack {
  background: linear-gradient(180deg, #1d293a, #0f1626);
  color: var(--gold);
  border: 1px solid #f6c76255;
  font-weight: 600;
}
#btnBack:hover {
  background: #f6c762;
  color: #0f1626;
}

.intro-categorie h2 {
  font-size: 1.8rem;
  margin-bottom: 24px;
  color: var(--gold);
}

.btn-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.cat-btn {
  font-size: 1.1rem;
  padding: 14px 20px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at -10% -10%, #1e293b20, transparent 70%),
    radial-gradient(800px 400px at 110% -10%, #1e293b20, transparent 70%),
    linear-gradient(160deg, var(--bg), var(--bg2));
  color:var(--text);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial;
  min-height:100vh;
}

/* Loader */
.loader{
  position:fixed;inset:0;display:grid;place-items:center;z-index:9999;
  background:linear-gradient(160deg, #050b14, #0c1525);
}
.loader-card{
  width:clamp(280px,80vw,520px);
  padding:2.2rem;border-radius:20px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
  border:1px solid #ffffff28;text-align:center;box-shadow:var(--shadow);
  animation:cardPop .6s ease both;
}
.loader-card h1{margin:.6rem 0 0;font-size:1.9rem;font-weight:800;letter-spacing:.5px}
.loader-card p{margin:.25rem 0 0;color:var(--muted)}
.loader-ring{
  width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;
  border:3px solid #ffffff1c;border-top-color:var(--gold);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes cardPop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.loader.hide{animation:fadeOut .5s ease forwards}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  background:#080f1cdd;border-bottom:1px solid #ffffff14;backdrop-filter:blur(6px);
}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.brand{margin:18px 0 4px;font-size:clamp(24px,4vw,40px);font-weight:800;letter-spacing:.5px}
.brand span{color:var(--gold)}
.tagline{margin:0 0 16px;color:var(--muted)}
.tagline span{color:var(--gold2)}

/* Filters */
.filters{
  position:sticky;top:82px;z-index:40;
  background:linear-gradient(180deg,#0b1220cc,#0b1220aa);
  backdrop-filter:blur(4px);
  border-bottom:1px solid #ffffff14;
}
.filters .wrap{
  display:flex;gap:10px;padding:14px 20px;flex-wrap:wrap;justify-content:center
}
.filters input,.filters select{
  background:#0e172a;border:1px solid #ffffff1a;color:#e8eeff;padding:10px 12px;border-radius:12px;
  outline:none;transition:border .2s ease, box-shadow .2s ease;min-width:220px
}
.filters input::placeholder{color:#93a2c6}
.filters input:focus,.filters select:focus{border-color:var(--gold);box-shadow:0 0 0 3px #f6c76222}

/* Grid */
.grid{
  display:grid;gap:18px;padding:24px 0 40px;
  grid-template-columns:repeat(1,minmax(0,1fr));
}
@media(min-width:620px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(4,1fr)}}

.card{
  background:linear-gradient(180deg,#121a2b,#0f1626);
  border:1px solid #ffffff14;border-radius:18px;padding:14px;box-shadow:var(--shadow);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
  cursor:pointer;position:relative;overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;
  background:linear-gradient(135deg,#ffffff14,#f6c76233 35%,#ffffff05 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.card:hover{transform:translateY(-6px) scale(1.02);border-color:#f6c7623d;background:linear-gradient(180deg,#17233b,#101728)}
.card img{width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:10px;filter:saturate(1.05) contrast(1.02)}
.card h2{margin:4px 0 0;font-size:1rem;color:var(--gold);font-weight:700}
.card p{margin:2px 0;color:#cdd6ee;font-size:.9rem}
.card .cat{color:#9db0db;font-size:.8rem}
.card .price{margin-top:8px;font-weight:800;font-size:1.1rem;color:#fff}

/* Fade-in anim */
.fade-in{opacity:0;transform:translateY(16px);transition:all .7s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* === MODAL FINALE === */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.modal.open { display: block; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.modal.open .modal-backdrop { opacity: 1; }

.modal-body {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Contenuto */
.modal-content {
  width: min(1024px, 95vw);
  display: grid;
  gap: 18px;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  background: linear-gradient(180deg, #0e1626ee, #0a1222ee);
  border: 1px solid #ffffff22;
  border-radius: 18px;
  box-shadow: var(--shadow), 0 0 0 1px #f6c76222 inset;
  transform: translateY(40px) scale(.97);
  opacity: 0;
  animation: slideUp .45s ease forwards;
  overflow: hidden;
}
@keyframes slideUp {
  from { transform: translateY(40px) scale(.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@media(max-width:860px){
  .modal-content{grid-template-columns:1fr;width:100%;}
  .modal-media img{height:auto;max-height:60vh;}
}

.modal-media{padding:16px;display:flex;justify-content:center;align-items:center}
.modal-media img{
  width:100%;height:min(64vh,560px);object-fit:cover;border-radius:14px;
  box-shadow:0 0 0 1px #f6c76233 inset,0 20px 40px rgba(0,0,0,.45)
}
.modal-info{padding:16px 20px 22px;overflow-y:auto;max-height:80vh;}
.modal-title{margin:4px 0 2px;font-size:clamp(20px,3.2vw,30px);font-weight:800;color:#fff}
.modal-price{margin:10px 0 14px;color:#fff;font-weight:800;font-size:1.4rem}
.modal-desc{margin:8px 0 16px;color:#cdd6ee;line-height:1.55}
.modal-actions{display:flex;flex-wrap:wrap;gap:10px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:12px;border:1px solid #ffffff26;text-decoration:none;
  font-weight:700;letter-spacing:.2px;transition:transform .2s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:linear-gradient(180deg,#f6c762,#d8a73a);color:#1a1205;box-shadow:0 10px 24px #f6c76226}
.btn-gold:hover{box-shadow:0 12px 28px #f6c7623d}
.btn-wa{background:#25d366;color:#0c2414;box-shadow:0 10px 24px #25d36626}
.btn-wa:hover{box-shadow:0 12px 28px #25d3663d}

/* Close */
.modal-close{
  position:fixed;top:18px;right:22px;z-index:10000;
  background:#0f172a;border:2px solid #f6c762aa;color:#f6c762;
  width:42px;height:42px;font-size:1.4rem;font-weight:700;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  transition:all .3s ease;box-shadow:0 0 10px #00000066;
}
.modal-close:hover{background:#f6c762;color:#0f172a;transform:scale(1.1);box-shadow:0 0 20px #f6c76255}

/* Blur site */
body.modal-open #siteWrap{filter:blur(6px);pointer-events:none;user-select:none;transition:filter .4s ease}
body.modal-open .header{filter:blur(6px);pointer-events:none}

/* WA Float */
.wa-float{
  position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:var(--wa);
  box-shadow:0 12px 30px rgba(37,211,102,.35);z-index:35;transition:transform .25s ease;
}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:28px;height:28px}

/* Footer */
.footer{text-align:center;padding:28px 16px;margin-top:18px;color:#9db0db;border-top:1px solid #ffffff14;background:linear-gradient(180deg,#0b1220,#0b1220cc)}
/* === LOGO === */
.logo {
  display: block;
  margin: 12px auto 10px auto;
  width: clamp(100px, 22vw, 160px);
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 0 6px #f6c76255);
  animation: logoFade 1.2s ease forwards;
  position: relative;
}

.logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(246,199,98,0.3) 50%, transparent 100%);
  animation: shine 3s ease-in-out 1.2s forwards;
}

@keyframes logoFade {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes shine {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.logo:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* Mobile fix */
@media (max-width: 600px) {
  .logo {
    width: 130px;
    margin: 10px auto;
  }
}