/* IP Quick Cross-Sells – neutral styles that inherit theme fonts/colors.
   Override with CSS variables, e.g. .iqcs{--iqcs-accent:#7b5cff} */
.iqcs {
	--iqcs-accent: currentColor;
	--iqcs-border: rgba(127, 127, 127, .25);
	--iqcs-bg: rgba(127, 127, 127, .06);
	--iqcs-badge-bg: #c0392b;
	--iqcs-badge-fg: #fff;
	--iqcs-radius: 10px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 1.25em;
	font-size: .95em;
	line-height: 1.4;
}
.iqcs *, .iqcs *::before, .iqcs *::after { box-sizing: border-box; }
.iqcs--product, .iqcs--cart {
	padding: 1em;
	border: 1px solid var(--iqcs-border);
	border-radius: var(--iqcs-radius);
	background: var(--iqcs-bg);
}
.iqcs--cart { margin-top: 1.5em; }
.iqcs__head { margin-bottom: .75em; }
.iqcs__title { margin: 0; font-weight: 700; font-size: 1.1em; }
.iqcs__cta { margin: .2em 0 0; opacity: .8; }
.iqcs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6em; }
.iqcs__item {
	display: grid;
	grid-template-columns: auto 56px 1fr auto;
	align-items: center;
	gap: .75em;
	margin: 0;
	padding: .5em;
	border-radius: calc(var(--iqcs-radius) - 4px);
	border: 1px solid transparent;
	transition: border-color .15s, background .15s;
}
.iqcs--drawer .iqcs__item, .iqcs--cart .iqcs__item { grid-template-columns: 56px 1fr auto; }
.iqcs__item.is-checked, .iqcs__item.is-added { border-color: var(--iqcs-accent); }
.iqcs__item.has-error { border-color: #c0392b; }
.iqcs__check { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.iqcs__check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.iqcs__box {
	width: 22px; height: 22px; border: 2px solid var(--iqcs-border); border-radius: 6px;
	display: inline-block; position: relative; background: #fff; transition: all .15s;
}
.iqcs__check input:checked + .iqcs__box { background: var(--iqcs-accent); border-color: var(--iqcs-accent); }
.iqcs__check input:checked + .iqcs__box::after {
	content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.iqcs__check input:focus-visible + .iqcs__box { outline: 2px solid var(--iqcs-accent); outline-offset: 2px; }
.iqcs__img img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block; margin: 0 !important; }
.iqcs__info { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .5em; }
.iqcs__name { flex-basis: 100%; font-weight: 600; text-decoration: none; color: inherit; overflow: hidden; text-overflow: ellipsis; }
.iqcs__price del { opacity: .55; margin-right: .3em; }
.iqcs__price ins { text-decoration: none; font-weight: 700; }
.iqcs__from { opacity: .7; font-size: .9em; }
.iqcs__badge {
	display: inline-block; padding: .1em .45em; border-radius: 999px; font-size: .78em; font-weight: 700;
	background: var(--iqcs-badge-bg); color: var(--iqcs-badge-fg); line-height: 1.5;
}
.iqcs-var { flex-basis: 100%; max-width: 100%; margin-top: .35em; padding: .3em; font-size: .9em; }
.iqcs-add { white-space: nowrap; }
.iqcs-add.loading { opacity: .6; }
.iqcs__msg { margin: .6em 0 0; color: #c0392b; font-weight: 600; }

/* drawer */
.iqcs-drawer { position: fixed; inset: 0; z-index: 999999; pointer-events: none; }
.iqcs-drawer__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s; }
.iqcs-drawer__panel {
	position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 100%);
	background: #fff; color: #222; box-shadow: -10px 0 40px rgba(0, 0, 0, .2);
	transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; padding: 1.5em 1.25em;
}
.iqcs-drawer.is-open { pointer-events: auto; }
.iqcs-drawer.is-open .iqcs-drawer__overlay { opacity: 1; }
.iqcs-drawer.is-open .iqcs-drawer__panel { transform: none; }
.iqcs-drawer__close {
	position: absolute; top: .4em; right: .5em; background: none; border: 0; font-size: 2em; line-height: 1;
	cursor: pointer; color: inherit; padding: .1em .3em;
}
.iqcs--drawer { margin: 0; }
.iqcs--drawer .iqcs__title { padding-right: 2em; margin-bottom: .75em; }
.iqcs__added { display: flex; align-items: center; gap: .6em; padding: .6em; border-radius: 8px; background: rgba(46, 204, 113, .12); margin-bottom: .75em; }
.iqcs__added img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; margin: 0 !important; }
.iqcs--drawer .iqcs__cta { margin-bottom: .75em; }
.iqcs__actions { display: flex; flex-direction: column; gap: .5em; margin-top: 1.25em; }
.iqcs__go { text-align: center; }
.iqcs__continue { background: none; border: 0; text-decoration: underline; cursor: pointer; color: inherit; padding: .5em; }
html.iqcs-lock { overflow: hidden; }

@media (max-width: 480px) {
	.iqcs__item { grid-template-columns: auto 48px 1fr; }
	.iqcs--drawer .iqcs__item, .iqcs--cart .iqcs__item { grid-template-columns: 48px 1fr; }
	.iqcs-add { grid-column: 1 / -1; width: 100%; }
	.iqcs__img img { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
	.iqcs-drawer__panel, .iqcs-drawer__overlay { transition: none; }
}
