/* Emotional Store Styles - White Cards Edition */
.emo-page{min-height:100vh;color:#fff;position:relative}
.emo-page .navbar-logo{color:#fff}
.emo-page .navbar-links a{color:rgba(255,255,255,0.85)}
.emo-page .navbar-links a:hover{color:#fff}
.emo-page .cart-badge{background:var(--emo-gold);color:#1a1a1a}

/* Views */
.emo-view{display:none;animation:fadeIn 0.6s ease}
.emo-view.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Step 1: Emotions Selection */
.emo-select{text-align:center;padding:3rem 2rem;max-width:900px;margin:0 auto}
.emo-select h2{font-family:var(--font-elegant);font-size:2.2rem;margin-bottom:0.5rem;text-shadow:0 2px 10px rgba(0,0,0,0.3)}
.emo-select p{opacity:0.9;margin-bottom:2.5rem;font-size:1.05rem}
.emotions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}
.emotion-btn{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0.8rem;padding:1.2rem 1rem;border-radius:var(--r-lg);background:#fff;border:none;color:#333;font-size:0.95rem;font-weight:600;transition:all var(--t-normal);cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,0.1);min-height:160px}
.emotion-btn .emo-emoji{font-size:2.5rem;transition:transform var(--t-normal);display:flex;align-items:center;justify-content:center;flex:1}
.emotion-btn:hover{background:#fff;transform:translateY(-6px) scale(1.05);box-shadow:0 12px 35px rgba(0,0,0,0.2)}
.emotion-btn:hover .emo-emoji{transform:scale(1.2)}

/* Unique animation per emotion */
.emotion-btn:nth-child(1) .emo-emoji{animation:emoBounce 2s ease infinite}
.emotion-btn:nth-child(2) .emo-emoji{animation:emoTear 3s ease-in-out infinite}
.emotion-btn:nth-child(3) .emo-emoji{animation:emoHeartbeat 1.2s ease infinite}
.emotion-btn:nth-child(4) .emo-emoji{animation:emoPunch 2s ease infinite}
.emotion-btn:nth-child(5) .emo-emoji{animation:emoShake 2.5s ease-in-out infinite}
.emotion-btn:nth-child(6) .emo-emoji{animation:emoSwing 3s ease-in-out infinite}
.emotion-btn:nth-child(7) .emo-emoji{animation:emoSparkle 2s ease infinite}
.emotion-btn:nth-child(8) .emo-emoji{animation:emoFloat 4s ease-in-out infinite}
.emotion-btn:nth-child(9) .emo-emoji{animation:emoFly 3s ease-in-out infinite}
.emotion-btn:nth-child(10) .emo-emoji{animation:emoGlow 2s ease infinite}
.emotion-btn:nth-child(11) .emo-emoji{animation:emoBloom 2.5s ease infinite}
.emotion-btn:nth-child(12) .emo-emoji{animation:emoFlame 1.5s ease infinite}

@keyframes emoBounce{0%,100%{transform:translateY(0)}25%{transform:translateY(-12px)}50%{transform:translateY(0)}75%{transform:translateY(-6px)}}
@keyframes emoTear{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(4px) rotate(-5deg)}}
@keyframes emoHeartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.25)}28%{transform:scale(1)}42%{transform:scale(1.15)}70%{transform:scale(1)}}
@keyframes emoPunch{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.3) rotate(-10deg)}60%{transform:scale(1) rotate(0)}}
@keyframes emoShake{0%,100%{transform:translateX(0)}10%{transform:translateX(-4px) rotate(-5deg)}20%{transform:translateX(4px) rotate(5deg)}30%{transform:translateX(-3px)}40%{transform:translateX(3px)}50%{transform:translateX(0)}}
@keyframes emoSwing{0%,100%{transform:rotate(0)}25%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}}
@keyframes emoSparkle{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.4)}}
@keyframes emoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes emoFly{0%,100%{transform:translate(0,0)}25%{transform:translate(5px,-8px)}50%{transform:translate(0,-12px)}75%{transform:translate(-5px,-8px)}}
@keyframes emoGlow{0%,100%{transform:scale(1);text-shadow:0 0 0 transparent}50%{transform:scale(1.1);text-shadow:0 0 20px rgba(255,215,0,0.6)}}
@keyframes emoBloom{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(10deg)}}
@keyframes emoFlame{0%,100%{transform:scale(1) translateY(0)}25%{transform:scale(1.1) translateY(-3px)}50%{transform:scale(1.15) translateY(-5px)}75%{transform:scale(1.05) translateY(-2px)}}
@keyframes emoPopBounce{0%{transform:scale(1)}30%{transform:scale(1.4)}50%{transform:scale(0.9)}70%{transform:scale(1.15)}100%{transform:scale(1.3)}}

/* Step 2: Quote & Loading */
.emo-quote-view{text-align:center;padding:4rem 2rem;max-width:700px;margin:0 auto;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.emo-quote-text{font-family:var(--font-elegant);font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.8;margin-bottom:2rem;text-shadow:0 2px 15px rgba(0,0,0,0.3);opacity:0;animation:quoteReveal 1s ease forwards}
@keyframes quoteReveal{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}

/* Step 3: Sets Display */
.emo-sets{padding:2rem;max-width:1200px;margin:0 auto}
.emo-sets-header{text-align:center;margin-bottom:2rem}
.emo-sets-header h2{font-family:var(--font-elegant);font-size:1.8rem;margin-bottom:0.5rem;text-shadow:0 2px 10px rgba(0,0,0,0.3)}

/* Sets Tabs - White */
.sets-tabs{display:flex;justify-content:center;gap:0.8rem;margin-bottom:2rem}
.set-tab{padding:10px 28px;border-radius:var(--r-full);background:#fff;border:none;color:#555;font-weight:600;transition:all var(--t-normal);box-shadow:0 2px 10px rgba(0,0,0,0.08)}
.set-tab.active,.set-tab:hover{background:#fff;color:var(--emo-primary);box-shadow:0 6px 20px rgba(0,0,0,0.15)}

/* Set Grid */
.set-container{display:none}
.set-container.active{display:block;animation:fadeIn 0.5s ease}
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.2rem;margin-bottom:2rem}

/* Emotional Product Card - White */
.emo-product-card{background:#fff;border:none;border-radius:var(--r-lg);overflow:hidden;transition:all var(--t-normal);box-shadow:0 4px 15px rgba(0,0,0,0.08);color:#333}
.emo-product-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,0.15)}
.emo-product-img{height:180px;display:flex;align-items:center;justify-content:center;font-size:3.5rem;position:relative}
.emo-product-img span,.emo-product-img{animation:emoFloat 3s ease-in-out infinite}
.emo-product-card:hover .emo-product-img{animation:emoPopBounce 0.5s ease forwards}
.emo-product-info{padding:1rem}
.emo-product-name{font-weight:700;font-size:0.95rem;margin-bottom:0.3rem;color:#333}
.emo-product-type{font-size:0.8rem;color:#999;margin-bottom:0.5rem}
.emo-product-price{font-weight:800;color:var(--emo-primary)}

/* Set Actions */
.set-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}

/* Emotional Store Browse Mode */
.emo-browse{padding:2rem;max-width:1400px;margin:0 auto}

/* Browse Category Buttons - White */
.emo-browse-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:0.8rem;margin-bottom:1.5rem}
.emo-browse-btn{padding:10px 24px;border-radius:var(--r-full);background:#fff;border:none;color:#555;font-weight:600;transition:all var(--t-normal);box-shadow:0 2px 10px rgba(0,0,0,0.08)}
.emo-browse-btn:hover,.emo-browse-btn.active{background:#fff;color:var(--emo-primary);box-shadow:0 6px 20px rgba(0,0,0,0.15)}

/* Emotion Filter Buttons - White */
.emo-filter{display:flex;justify-content:center;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.emo-filter-btn{padding:6px 18px;border-radius:var(--r-full);font-size:0.85rem;background:rgba(255,255,255,0.85);border:none;color:#666;transition:all var(--t-fast);box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.emo-filter-btn:hover,.emo-filter-btn.active{background:#fff;color:var(--emo-primary);box-shadow:0 4px 15px rgba(0,0,0,0.12)}

.emo-products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem}

/* Add to Cart Button */
.emo-add-btn{width:100%;padding:10px;border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--emo-primary);color:#fff;font-weight:600;font-size:0.85rem;transition:all var(--t-fast);border:none}
.emo-add-btn:hover{background:var(--emo-secondary)}

@media(max-width:768px){
  .emotions-grid{grid-template-columns:repeat(3,1fr);gap:0.8rem}
  .emotion-btn{padding:1rem 0.5rem;font-size:0.85rem;min-height:130px}
  .emotion-btn .emo-emoji{font-size:2rem}
  .emotion-btn .emo-emoji dotlottie-player{width:50px!important;height:50px!important}
  .emotion-btn .emo-emoji video{width:80px!important;height:80px!important}
  .set-grid{grid-template-columns:repeat(2,1fr)}
  .emo-products-grid{grid-template-columns:repeat(2,1fr)}
  .set-actions{flex-direction:column;align-items:center}
  .emo-select{padding:2rem 1rem}
  .emo-select h2{font-size:1.6rem}
}
@media(max-width:480px){
  .emotions-grid{grid-template-columns:repeat(2,1fr);gap:0.6rem}
  .emotion-btn{min-height:120px;padding:0.8rem 0.4rem;font-size:0.8rem}
  .emotion-btn .emo-emoji dotlottie-player{width:45px!important;height:45px!important}
  .emotion-btn .emo-emoji video{width:65px!important;height:65px!important}
  .emo-select h2{font-size:1.3rem}
  .emo-select p{font-size:0.9rem}
}