.housing-decor-wrap .hd-thumb{
	/*
	height:160px;
	background-size:cover;
	background-position:center;
	border-bottom:1px solid rgba(255,255,255,.12);
	background-color: rgba(255,255,255,.04);
	*/
	aspect-ratio: 16 / 9;
	/*height: 100%;*/
	object-fit: contain;
	width: 100%;
	
}
.housing-decor-wrap .hd-title{
	font-weight:700;
	font-size:.95rem;
	line-height:1.15;
}
.housing-decor-wrap .hd-meta{
	font-size:.8rem;
}
.housing-decor-wrap .hd-reagents{
	display:flex;
	flex-direction:column;
	gap:.35rem;
}
.housing-decor-wrap .hd-reagent{
	display:flex;
	align-items:center;
	gap:.45rem;
	padding:.25rem .35rem;
	border:1px solid rgba(255,255,255,.10);
	border-radius:.5rem;
	background: rgba(255,255,255,.03);
}
.housing-decor-wrap .hd-reagent-icon{
	width:24px;
	height:24px;
	border-radius:.35rem;
	border:1px solid rgba(255,255,255,.20);
	background: rgba(0,0,0,.25);
	flex:0 0 auto;
}
.housing-decor-wrap .hd-reagent-icon--empty{
	display:inline-block;
}
.housing-decor-wrap .hd-reagent-name{
	flex: 1 1 auto;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:.85rem;
}
.housing-decor-wrap .hd-reagent-qty{
	flex:0 0 auto;
	font-weight:700;
	font-size:.85rem;
	color: rgba(255,255,255,.85);
}

/* Profession icon bar */
.housing-decor-wrap .hd-prof-btn{
	width:34px;
	height:34px;
	border-radius:.6rem;
	border:1px solid rgba(255,255,255,.18);
	background: rgba(255,255,255,.04);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0;
	cursor:pointer;
}
.housing-decor-wrap .hd-prof-btn img{
	width:28px;
	height:28px;
	border-radius:.45rem;
}
.housing-decor-wrap .hd-prof-btn:hover{
	border-color: rgba(255,255,255,.35);
}
.housing-decor-wrap .hd-prof-btn.is-active{
	outline:2px solid rgba(13,110,253,.8);
	outline-offset:1px;
	border-color: rgba(13,110,253,.7);
}
.housing-decor-wrap .hd-prof-fallback{
	font-weight:800;
	color: rgba(255,255,255,.9);
}
.housing-decor-wrap .hd-exp-select{
	min-width: 260px;
	max-width: 340px;
	height: 38px;
}
.housing-decor-wrap .hd-search{
	min-width: 220px;
}


/* Expansion Dropdown */
.hd-exp-dropdown{
	position:relative;
	min-width:220px;
}
.hd-exp-toggle{
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.2);
	color:#fff;
	padding:.35rem .6rem;
	border-radius:.5rem;
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	cursor:pointer;
}
/* Expansion Dropdown (portal / fixed) */
.hd-exp-menu{
	position: fixed; /* <-- key change */
	left: 0;
	top: 0;
	width: 280px;     /* will be overridden by JS to match toggle width */
	max-height: 260px;
	overflow: auto;
	background: #1c1c1c;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: .5rem;
	display: none;
	z-index: 999999;  /* very high to ensure it sits above everything */
}
.hd-exp-menu.is-open{
	display: block;
}
.hd-exp-item{
	padding:.4rem .6rem;
	cursor:pointer;
	display:flex;
	align-items:center;
	gap:.5rem;
	font-size:.85rem;
}
.hd-exp-item:hover{
	background:rgba(255,255,255,.08);
}
.hd-exp-check{
	visibility:hidden;
	color:#0d6efd;
	font-weight:700;
}
.hd-exp-item.is-active .hd-exp-check{
	visibility:visible;
}


/* Fix dropdown clipping inside header/card containers */
.housing-decor-wrap .card,
.housing-decor-wrap .card-body{
	overflow: visible !important;
}
/* Ensure dropdown is above grid/cards */
.housing-decor-wrap .hd-exp-dropdown{
	z-index: 2000;
}
.housing-decor-wrap .hd-exp-menu{
	z-index: 3000;
}


/* Profession totals layout */
.housing-decor-wrap .hd-prof-icon-sm{
	width:22px;
	height:22px;
	border-radius:.35rem;
	border:1px solid rgba(255,255,255,.2);
}

/* 5-column reagent grid (responsive) */
.housing-decor-wrap .hd-reagent-grid{
	display:grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap:.5rem;
}

/* Responsive breakpoints */
@media (max-width: 1399px){
	.housing-decor-wrap .hd-reagent-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1199px){
	.housing-decor-wrap .hd-reagent-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px){
	.housing-decor-wrap .hd-reagent-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Reagent pill style (like your screenshot) */
.housing-decor-wrap .hd-reagent-pill{
	display:flex;
	align-items:center;
	gap:.5rem;
	padding:.4rem .55rem;
	border-radius:.6rem;
	border:1px solid rgba(255,255,255,.15);
	background: rgba(255,255,255,.04);
	min-height: 42px;
}

.housing-decor-wrap .hd-reagent-pill-icon{
	width:28px;
	height:28px;
	border-radius:.45rem;
	border:1px solid rgba(255,255,255,.2);
	background: rgba(0,0,0,.25);
	flex:0 0 auto;
}

.housing-decor-wrap .hd-reagent-pill-icon--empty{
	display:inline-block;
}

.housing-decor-wrap .hd-reagent-pill-name{
	flex: 1 1 auto;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-weight:600;
	font-size:.9rem;
}

.housing-decor-wrap .hd-reagent-pill-qty{
	flex:0 0 auto;
	font-weight:800;
	color: rgba(255,255,255,.9);
	font-size:.9rem;
}