.aroma-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.aroma-card:hover { transform: translateY(-3px); }
.aroma-card:active { transform: translateY(-1px); }

.aroma-citrusy  { background: #FFFDE7; border-color: #FFF176; }
.aroma-citrusy:hover  { box-shadow: 0 6px 20px rgba(255,241,118,0.35); border-color: #FFEE58; }

.aroma-earthy   { background: #EFEBE9; border-color: #D7CCC8; }
.aroma-earthy:hover   { box-shadow: 0 6px 20px rgba(215,204,200,0.4); border-color: #BCAAA4; }

.aroma-floral   { background: #FDE7EF; border-color: #F8BBD0; }
.aroma-floral:hover   { box-shadow: 0 6px 20px rgba(248,187,208,0.35); border-color: #F48FB1; }

.aroma-spicy    { background: #FFF0EB; border-color: #FFCCBC; }
.aroma-spicy:hover    { box-shadow: 0 6px 20px rgba(255,204,188,0.4); border-color: #FFAB91; }

.aroma-herbal   { background: #EDF7ED; border-color: #C8E6C9; }
.aroma-herbal:hover   { box-shadow: 0 6px 20px rgba(200,230,201,0.4); border-color: #A5D6A7; }

.aroma-piney    { background: #E8F5F0; border-color: #B2DFDB; }
.aroma-piney:hover    { box-shadow: 0 6px 20px rgba(178,223,219,0.4); border-color: #80CBC4; }

.aroma-musky    { background: #F0EBE5; border-color: #D4C8BC; }
.aroma-musky:hover    { box-shadow: 0 6px 20px rgba(212,200,188,0.35); border-color: #BCAA9A; }

.aroma-fruity   { background: #F3E8F9; border-color: #D1C4E9; }
.aroma-fruity:hover   { box-shadow: 0 6px 20px rgba(209,196,233,0.4); border-color: #B39DDB; }