/* Smart Product Inserter - frontend styles */

.spib-box {
	--spib-bg: #ffffff;
	--spib-border-color: #e5e7eb;
	--spib-border-width: 1px;
	--spib-radius: 12px;
	--spib-padding: 16px;
	--spib-margin: 28px;
	--spib-shadow: 0 4px 18px rgba(0, 0, 0, .08);
	--spib-max-width: 100%;
	--spib-head-bg: #f3f4f6;
	--spib-head-color: #111827;
	--spib-head-size: 14px;
	--spib-title-color: #111827;
	--spib-title-size: 17px;
	--spib-price-color: #16a34a;
	--spib-price-size: 15px;
	--spib-img-width: 140px;
	--spib-img-radius: 8px;
	--spib-btn-bg: #2563eb;
	--spib-btn-hover: #1d4ed8;
	--spib-btn-color: #ffffff;
	--spib-btn-radius: 8px;
	--spib-btn-size: 14px;
	--spib-btn-width: auto;

	display: block;
	clear: both;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--spib-max-width);
	margin: var(--spib-margin) auto;
	background: var(--spib-bg);
	border: var(--spib-border-width) solid var(--spib-border-color);
	border-radius: var(--spib-radius);
	box-shadow: var(--spib-shadow);
}

.spib-box *,
.spib-box *::before,
.spib-box *::after {
	box-sizing: border-box;
}

.spib-box .spib-head {
	padding: 10px var(--spib-padding);
	background: var(--spib-head-bg);
	color: var(--spib-head-color);
	font-size: var(--spib-head-size);
	font-weight: 700;
	line-height: 1.8;
}

.spib-box .spib-items {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 18px;
	padding: var(--spib-padding);
	margin: 0;
	list-style: none;
}

.spib-box.spib-cols-2 .spib-items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spib-box.spib-cols-3 .spib-items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spib-box.spib-cols-4 .spib-items {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.spib-box .spib-item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.spib-box .spib-thumb {
	display: block;
	flex: 0 0 var(--spib-img-width);
	max-width: var(--spib-img-width);
	line-height: 0;
	text-decoration: none;
	border: 0;
}

.spib-box .spib-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0;
	border-radius: var(--spib-img-radius);
	object-fit: cover;
}

.spib-box .spib-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.spib-box .spib-title {
	display: block;
	margin: 0;
	color: var(--spib-title-color);
	font-size: var(--spib-title-size);
	font-weight: 700;
	line-height: 1.8;
	text-decoration: none;
	box-shadow: none;
}

.spib-box .spib-title:hover {
	color: var(--spib-title-color);
	text-decoration: underline;
}

.spib-box .spib-price {
	margin: 0;
	color: var(--spib-price-color);
	font-size: var(--spib-price-size);
	font-weight: 700;
	line-height: 1.8;
}

.spib-box .spib-price del {
	margin-inline-end: 6px;
	font-weight: 400;
	opacity: .6;
}

.spib-box .spib-price ins {
	text-decoration: none;
	background: transparent;
}

.spib-box .spib-btn {
	display: inline-block;
	width: var(--spib-btn-width);
	padding: 10px 20px;
	border: 0;
	border-radius: var(--spib-btn-radius);
	background: var(--spib-btn-bg);
	color: var(--spib-btn-color);
	font-size: var(--spib-btn-size);
	font-weight: 700;
	line-height: 1.8;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s ease;
}

.spib-box .spib-btn:hover,
.spib-box .spib-btn:focus {
	background: var(--spib-btn-hover);
	color: var(--spib-btn-color);
	text-decoration: none;
}

/* چیدمان کارتی */
.spib-box.spib-layout-card .spib-item {
	flex-direction: column;
	align-items: stretch;
}

.spib-box.spib-layout-card .spib-thumb {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
}

.spib-box.spib-layout-card .spib-content {
	width: 100%;
}

/* چیدمان فشرده */
.spib-box.spib-layout-compact {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.spib-box.spib-layout-compact .spib-head {
	padding-right: 0;
	padding-left: 0;
	background: transparent;
}

.spib-box.spib-layout-compact .spib-items {
	padding-right: 0;
	padding-left: 0;
}

@media screen and (max-width: 600px) {

	.spib-box .spib-items {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.spib-box .spib-item {
		flex-direction: column;
		align-items: stretch;
	}

	.spib-box .spib-thumb {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}

	.spib-box .spib-btn {
		width: 100%;
	}
}