--card-bg: var(--accent, #FF7043); /* Fondo naranja predominante */
.landing-root{padding:1rem 0 2rem 0}
:root{
    /* Tema claro forzado y naranja predominante */
    --landing-bg: #fff;
    --card-bg: #fff3ed;
    --glass: rgba(255,255,255,0.06);
    --glass-border: #FF7043;
    --muted: #A1A1AA;
    --accent: #FF7043; /* Naranja */
    --accent-2: #FF7043; /* Naranja también, elimina azul */
    --spotify-green: #1DB954; /* Verde Spotify */
    --black: #181818;
    --text: #181818;
html, body {
	height: 100%;
	background: #fff !important;
	color: #181818 !important;
}
}

/* Badge para precios con verde Spotify */
.badge-spotify {
	background: var(--spotify-green);
	color: #fff;
	border-radius: 8px;
	padding: .25rem .7rem;
	font-weight: 700;
	font-size: 0.95rem;
}

/* Botón principal naranja */
.btn-orange {
	background: var(--accent);
	color: #fff;
	border: none;
}
.btn-orange:hover { filter: brightness(0.95); }

/* Botón azul */

/* Botón negro */
.btn-black {
	background: var(--black);
	color: #fff;
	border: none;
}
.btn-black:hover { filter: brightness(0.95); }

/* Botón verde Spotify */
.btn-spotify {
	background: var(--spotify-green);
	color: #fff;
	border: none;
}
.btn-spotify:hover { filter: brightness(0.95); }

.product-card .btn-orange, .product-card .btn-blue, .product-card .btn-black, .product-card .btn-spotify {
	margin-top: 0.5rem;
	width: 100%;
}

.badge-orange { background: var(--accent); color: #fff; }
.badge-black { background: var(--black); color: #fff; }

.reco-shell{display:flex;align-items:center;gap:0.5rem;}
.reco-nav{width:40px;height:40px;border-radius:12px;border:1px solid var(--glass-border);background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));color:var(--muted);font-size:20px;display:flex;align-items:center;justify-content:center;backdrop-filter: blur(6px);}
.reco-nav:hover{background:rgba(255,255,255,0.06);cursor:pointer}
.reco-track{display:flex;gap:0.75rem;overflow:auto;scroll-snap-type:x mandatory;padding:0.5rem;flex:1;}
.reco-track::-webkit-scrollbar{height:10px}
.reco-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:999px}
.reco-card{scroll-snap-align:start;min-width:180px;max-width:260px}

	background: var(--card-bg);
	border: 2px solid var(--accent);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(255,112,67,0.18);
	transition: transform .18s ease, box-shadow .18s ease;
	background: #fff;
	color: var(--accent) !important;
.product-card .btn-orange, .product-card .btn-spotify {
	box-shadow: 0 2px 8px rgba(255,112,67,0.10);
}
	border: 2px solid var(--accent);
	background: var(--accent);
	color: #fff;
	border: 2px solid var(--spotify-green);
	background: var(--spotify-green);
	color: #fff;
	background: var(--accent);
	color: #fff;
	border: 2px solid var(--accent);
	border: 2px solid var(--spotify-green);
.product-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(2,6,23,0.55)}
.product-card img{width:100%;height:220px;object-fit:cover;display:block}
.product-card .card-body{background:linear-gradient(180deg, transparent, rgba(0,0,0,0.02));padding:1rem}
.product-card .fw-semibold{color:var(--text, #E9EEF8);font-size:0.95rem}
.small-price{font-weight:700;color:var(--accent);font-size:1rem}

.input-group .form-control{background:var(--glass);border:1px solid var(--glass-border);color:var(--text)}
.input-group .btn-primary{background:var(--accent);border:none;color:#fff;}

.reco-shell{margin-bottom:12px}

#productsGrid { margin-top: 0.5rem; }

/* Modal adjustments */
#productModal .modal-content{background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(6px)}
#productModal .modal-header .modal-title{color:var(--text)}

/* Login hint */
#loginHint{background:var(--glass);border:1px solid var(--glass-border)}

/* Responsive tweaks */
@media (max-width: 767px){
	.product-card img{height:160px}
	.reco-card{min-width:140px}
	.reco-nav{width:34px;height:34px;font-size:18px}
	.input-group .form-control{font-size:0.95rem}
}

@media (min-width: 768px){
	.product-card img{height:220px}
}

/* Small subtle badges and utility */
.badge-muted{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.03);padding:.25rem .5rem;border-radius:8px}

/* Accessibility focus */
.reco-nav:focus, .input-group .form-control:focus, .form-select:focus{outline:2px solid rgba(var(--accent-rgb, 13 110 253) / 0.12);outline-offset:2px}