/* ---- Checkbox on each product in the archive/shop loop ---- */
.wpc-compare-checkbox-wrap {
	margin: 0;
    position: absolute;
    top: 10px;
    left: 10px;
}

.wpc-compare-checkbox-wrap input[type="checkbox"] {
	margin: 0; position:absolute; opacity: 0; width: 1px; height: 1px;
}

.wpc-compare-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 17px;
	cursor: pointer;
	color: #d21c35;
	padding-left: 25px;
}

.wpc-compare-checkbox-label:before{
	content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 17px;
    height: 17px;
    border: 2px solid #d1d1d1;
    background: #fff;
}

.wpc-compare-checkbox-wrap input[type="checkbox"] + label:after, .wpc-compare-checkbox-wrap input[type="checkbox"]:checked + label:after {
    content: "\f00c";
    position: absolute;
    top: 2px;
    left: 0;
    color: #ffffff;
    transition: all .2s;
    background: #e61d39;
    width: 17px;
    height: 17px;
    text-align: center;
    border: 2px solid #e61d39;
    font: normal 15px / 17px 'FontAwesome';
}

.wpc-compare-checkbox-wrap input[type="checkbox"] + label:hover:before, .wpc-compare-checkbox-wrap input[type="checkbox"]:checked:focus + label:before, .wpc-compare-checkbox-wrap input[type="checkbox"]:not(:checked):focus + label:before {
    outline: 2px solid #000;
}

.wpc-compare-checkbox-wrap input[type="checkbox"] + label:after{
    opacity: 0;
    transform: scale(0);
}

.wpc-compare-checkbox-wrap input[type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}

/* ---- Floating compare bar (above result count / ordering) ---- */
.wpc-compare-bar {
	background: #f7f7f7;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	margin: 0 0 20px;
	padding: 10px 15px;
	transition: opacity 0.2s ease;
}
.wpc-compare-bar.wpc-hidden {
	display: none;
}
.wpc-compare-bar-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.wpc-compare-bar-label {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}
.wpc-compare-thumbs {
	display: flex;
	gap: 8px;
	flex: 1 1 auto;
	flex-wrap: wrap;
}
.wpc-compare-thumb {
	position: relative;
	width: 48px;
	height: 48px;
}
.wpc-compare-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #ddd;
}
.wpc-compare-thumb-remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	background: #333;
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	cursor: pointer;
}
.wpc-compare-view-btn {
	background: #333;
	color: #fff !important;
	padding: 8px 16px;
	border-radius: 4px;
	text-decoration: none !important;
	font-size: 13px;
	white-space: nowrap;
}
.wpc-compare-view-btn:hover {
	background: #111;
}
.wpc-compare-clear-btn {
	background: none;
	border: 1px solid #999;
	border-radius: 4px;
	padding: 7px 14px;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}
.wpc-compare-clear-btn:hover {
	background: #eee;
}

/* ---- Compare page table ---- */
.wpc-compare-header {
	display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
    position: relative;
    margin-top: -55px;
}
.wpc-compare-empty {
	text-align: center;
	padding: 40px 0;
}
.compare-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; margin-bottom: 40px;
}
.wpc-compare-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}
.wpc-compare-table th,
.wpc-compare-table td {
	border: 1px solid #eaeaea;
	padding: 14px;
	vertical-align: top;
	text-align: center;
}
.wpc-compare-table th {
	background: #fafafa;
	text-align: left;
	white-space: nowrap;
	font-weight: 600;
	width: 160px;
	position: sticky;
    left: 0;
    z-index: 2;
}
.wpc-compare-table .wpc-row-image td {
	position: relative;
	min-width: 200px;
}
.wpc-compare-table .wpc-row-image img {
	max-width: 100%;
	height: auto;
}
.wpc-compare-remove-col {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: #333;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	line-height: 1;
}
.wpc-compare-table .wpc-row-desc td {
	text-align: left;
	font-size: 13px;
	color: #666;
}

@media (max-width: 782px) {

}