/* gift genie (keeps its original dark purple and gold look) */
.genie-sec { background: linear-gradient(160deg, #1c0833, #0d1b2a); }
#genie { max-width: 680px; margin: 0 auto; background: #171321; color: #f5f1e8; border-radius: var(--radius); overflow: hidden; border: 1px solid #3a2f52; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
#genie .g-head { text-align: center; padding: 26px 20px 16px; background: radial-gradient(circle at 50% 0%, #3b2a63 0%, #171321 70%); }
#genie .g-lamp { font-size: 52px; line-height: 1; animation: g-float 3s ease-in-out infinite; }
@keyframes g-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
#genie h1, #genie h2 { margin: 8px 0 6px; font-size: 1.8rem; color: #ffd964; }
#genie .g-sub { margin: 0; color: #cfc6e0; font-size: .95rem; }
#genie .g-body { padding: 20px; min-height: 280px; }
#genie .g-q { font-size: 1.15rem; font-weight: 800; margin: 0 0 14px; color: #fff; }
#genie .g-opts, #genie .g-depts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#genie .g-opt, #genie .g-dept { background: #241d38; border: 1px solid #4a3c6e; color: #f5f1e8; border-radius: 12px; padding: 14px 10px; font: inherit; font-weight: 700; cursor: pointer; text-align: center; transition: transform .1s, background .15s, border-color .15s; }
#genie .g-dept { text-align: left; padding: 14px; }
#genie .g-opt:hover, #genie .g-dept:hover { background: #322652; border-color: #ffd964; transform: translateY(-2px); }
#genie .g-emoji { display: block; font-size: 26px; margin-bottom: 6px; }
#genie .g-dept b { display: block; margin: 4px 0; font-size: .95rem; color: #fff; }
#genie .g-dept span { font-size: .8rem; color: #bdb2dd; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
#genie .g-back { background: none; border: 0; color: #9d90c0; font: inherit; font-size: .88rem; cursor: pointer; margin-top: 14px; padding: 6px 0; }
#genie .g-back:hover { color: #ffd964; }
#genie .g-result { background: #241d38; border: 1px solid #ffd964; border-radius: 14px; padding: 18px; }
#genie .g-result h3 { margin: 0 0 8px; color: #ffd964; font-size: 1.3rem; }
#genie .g-result p { margin: 0 0 10px; font-size: .93rem; line-height: 1.55; color: #e8e2f5; font-weight: 600; }
#genie .g-aisle { display: inline-block; background: #ffd964; color: #171321; font-weight: 800; font-size: .8rem; border-radius: 999px; padding: 4px 12px; margin: 2px 6px 8px 0; }
#genie .g-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
#genie .g-btn { display: inline-block; background: #ffd964; color: #171321; font: inherit; font-weight: 800; border: 0; border-radius: 10px; padding: 11px 18px; font-size: .92rem; cursor: pointer; text-decoration: none; }
#genie .g-btn:hover { background: #ffcf3d; }
#genie .g-btn.ghost { background: transparent; color: #ffd964; border: 1px solid #ffd964; }
#genie .g-btn:disabled { opacity: .5; cursor: wait; }
#genie .g-input { width: 100%; background: #100c1a; border: 1px solid #4a3c6e; color: #fff; border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 1rem; margin-bottom: 10px; }
#genie .g-input:focus { outline: none; border-color: #ffd964; }
#genie .g-note { font-size: .8rem !important; color: #9d90c0 !important; }
#genie .g-err { color: #ff8fa8 !important; font-weight: 700 !important; min-height: 1.2em; }
#genie .g-prods { display: grid; gap: 8px; margin: 10px 0 14px; }
#genie .g-prod { display: flex; justify-content: space-between; gap: 10px; background: #171321; border: 1px solid #4a3c6e; border-radius: 10px; padding: 10px 12px; text-decoration: none; color: #fff; font-weight: 700; font-size: .92rem; }
#genie .g-prod:hover { border-color: #ffd964; }
#genie .g-prod-price { color: #ffd964; font-family: var(--font-display); white-space: nowrap; }
#genie .g-foot { text-align: center; padding: 12px; font-size: .78rem; color: #8d82ad; border-top: 1px solid #2c2444; font-weight: 600; }
@media (max-width: 480px) { #genie h2 { font-size: 1.5rem; } }