/*
--------------------------------------
items
--------------------------------------
*/

.product-items {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	font-family: var(--e-global-typography-primary-font-family);
}

/*
--------------------------------------
item
--------------------------------------
*/

.product-items .product-item {
	align-items: center;
	font-size: 14px;
	font-weight: 400;
	color: var(--e-global-color-text);
	padding: 10px 16px;
	border: solid 1px #E2E5E9;
	border-radius: 8px;
	background-color: var(--e-global-color-1b3dbff);
	width: calc(300px + (750 - 300) * ((100vw - 320px) / (1920 - 320)));
}

/*name*/

.product-item .product-item__name {
	font-size: 20px;
	font-weight: 600;
	color: var(--e-global-color-secondary);
}

/*price*/

.product-item .product-item__price {
	font-size: 16px;
	font-weight: 600;
}

/*actions*/

.product-item__actions {
	display: flex;
	justify-content: center;
	gap: 15px;
}

.product-item__actions .btn-element {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
}

.product-item__actions .btn-primary {
	background: var(--e-global-color-secondary);
	color: #fff;
	border: 1px solid var(--e-global-color-secondary);
	border-radius: 7px;
	padding: 3px 10px;
}

.product-item__actions .btn-primary:focus,
.product-item__actions .btn-primary:hover {
	background: transparent;
	color: var(--e-global-color-secondary);
}

.product-item__actions .btn-secondary {
	color: var(--e-global-color-secondary);
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.product-item__actions .btn-secondary:focus,
.product-item__actions .btn-secondary:hover {
	color: var(--e-global-color-text);
}