.si-pf-variants{
	margin: 0 0 16px 0;
	padding: 12px 12px;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 10px;
	background: #fff;
}

.si-pf-variants__title{
	font-weight: 700;
	margin-bottom: 10px;
}

.si-pf-axis{
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 10px 0;
}

.si-pf-axis__label{
	min-width: 90px;
	font-weight: 600;
	padding-top: 6px;
}

.si-pf-axis__options{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}

.si-pf-option{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 10px;
	border: 1px solid rgba(0,0,0,.18);
	border-radius: 999px;
	text-decoration: none !important;
	line-height: 1;
	font-size: 13px;
	background: #fff;
}

.si-pf-option:hover{ border-color: rgba(0,0,0,.35); }

.si-pf-option.is-active{
	border-color: rgba(0,0,0,.70);
	box-shadow: 0 0 0 2px rgba(0,0,0,.06) inset;
	font-weight: 700;
}

.si-pf-option.is-disabled{
	opacity: .45;
	pointer-events: none;
}

.si-pf-option.is-swatch{
	padding: 6px;
	width: 34px;
	height: 34px;
}

.si-pf-swatch{
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--si-pf-swatch, #ddd);
	border: 1px solid rgba(0,0,0,.18);
}

@media (max-width: 520px){
	.si-pf-axis{ flex-direction: column; gap: 6px; }
	.si-pf-axis__label{ min-width: 0; padding-top: 0; }
}


.si-pf-option.is-chip{
	border-radius: 10px;
	height: 34px;
	padding: 0 10px;
}


.si-pf-select{
	width: 100%;
	max-width: 320px;
	height: 38px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 0 10px;
	background: #fff;
}
.si-pf-axis__options .si-pf-select{ margin-top: 2px; }


/* Bol-style dropdown (thumbnail + title) */
.si-pf-dd{ position:relative; width:100%; }
.si-pf-dd__summary{
	list-style:none;
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 14px;
	border:1px solid rgba(0,0,0,.12);
	border-radius:10px;
	background:#fff;
	cursor:pointer;
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.si-pf-dd__summary::-webkit-details-marker{ display:none; }
.si-pf-dd[open] .si-pf-dd__summary{
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}
.si-pf-dd__thumb{
	width:40px;
	height:40px;
	border-radius:8px;
	object-fit:cover;
	flex:0 0 auto;
	background:#f5f5f5;
}
.si-pf-dd__text{
	flex:1 1 auto;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-weight:600;
}
.si-pf-dd__chev{
	width:10px;
	height:10px;
	border-right:2px solid rgba(0,0,0,.55);
	border-bottom:2px solid rgba(0,0,0,.55);
	transform: rotate(45deg);
	margin-left:6px;
}
.si-pf-dd[open] .si-pf-dd__chev{ transform: rotate(-135deg); }

.si-pf-dd__item{
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 14px;
	text-decoration:none;
	border-top:1px solid rgba(0,0,0,.08);
}
.si-pf-dd__item:hover{ background: rgba(0,0,0,.03); }
.si-pf-dd__item.is-active{
	outline:2px solid #0a63ff;
	outline-offset:-2px;
	background: rgba(10,99,255,.06);
}
.si-pf-dd__item.is-disabled{
	opacity:.45;
	pointer-events:none;
}


/* Overlay panel (no layout shift) */
.si-pf-dd{ position:relative; width:100%; overflow:visible; }
.si-pf-dd__panel{
	position:absolute;
	left:0;
	right:0;
	top:calc(100% + 6px);
	z-index:9999;
	border:1px solid rgba(0,0,0,.12);
	border-radius:10px;
	background:#fff;
	max-height:420px;
	overflow:auto;
	box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.si-pf-dd[open] .si-pf-dd__summary{
	border-radius:10px;
}