/* =============================================================================
   Optik Products — Compare Feature
   ============================================================================= */

/* ── Add to Compare button ─────────────────────────────────────────────────── */

.co-compare-btn {
	display:      inline-flex;
	align-items:  center;
	gap:          6px;
	padding:      6px 12px;
	border:       1px solid currentColor;
	border-radius: 3px;
	background:   transparent;
	color:        var(--wp--custom--dark--1, #333);
	font-size:    13px;
	font-weight:  600;
	cursor:       pointer;
	transition:   background 0.15s, color 0.15s, border-color 0.15s;
	white-space:  nowrap;
}

.co-compare-btn:hover,
.co-compare-btn.is-added {
	background:   var(--wp--custom--dark--1, #333);
	color:        #fff;
	border-color: var(--wp--custom--dark--1, #333);
}

.co-compare-btn.is-added:hover {
	background:   #c0392b;
	border-color: #c0392b;
}

.co-compare-btn__icon {
	flex-shrink: 0;
}

/* ── Compare tray (sticky bottom bar) ─────────────────────────────────────── */

.co-compare-tray {
	position:   fixed;
	bottom:     0;
	left:       0;
	right:      0;
	z-index:    9999;
	background: var(--wp--custom--dark--1, #222);
	color:      #fff;
	box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
}

.co-compare-tray__inner {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         10px;
	max-width:   1200px;
	margin:      0 auto;
	padding:     10px 20px;
}

.co-compare-tray__label {
	font-weight: 700;
	white-space: nowrap;
}

.co-compare-tray__list {
	display:    flex;
	flex-wrap:  wrap;
	gap:        8px;
	list-style: none;
	margin:     0;
	padding:    0;
	flex:       1;
}

.co-compare-tray__item {
	display:      inline-flex;
	align-items:  center;
	gap:          6px;
	background:   rgba(255,255,255,0.12);
	border-radius: 3px;
	padding:      4px 8px;
	font-size:    13px;
}

.co-compare-tray__remove {
	background:  none;
	border:      none;
	color:       rgba(255,255,255,0.5);
	cursor:      pointer;
	font-size:   12px;
	padding:     0 2px;
	line-height: 1;
}
.co-compare-tray__remove:hover { color: #fff; }

.co-compare-tray__actions {
	display:     flex;
	gap:         10px;
	align-items: center;
}

.co-compare-tray__go {
	padding:      8px 20px;
	background:   var(--wp--custom--color--primary, #0057a8);
	color:        #fff;
	border:       none;
	border-radius: 3px;
	font-weight:  700;
	font-size:    14px;
	cursor:       pointer;
	transition:   background 0.15s;
}
.co-compare-tray__go:hover:not(:disabled) { filter: brightness(1.1); }
.co-compare-tray__go:disabled { opacity: 0.45; cursor: not-allowed; }

.co-compare-tray__clear {
	padding:      8px 14px;
	background:   none;
	border:       1px solid rgba(255,255,255,0.3);
	color:        rgba(255,255,255,0.7);
	border-radius: 3px;
	font-size:    13px;
	cursor:       pointer;
}
.co-compare-tray__clear:hover { color: #fff; border-color: #fff; }

/* ── Compare page ──────────────────────────────────────────────────────────── */

.co-compare {
	padding-bottom: 80px;
}

.co-compare__empty {
	text-align: center;
	padding:    60px 20px;
	color:      #666;
	font-size:  16px;
}

.co-compare__controls {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	flex-wrap:       wrap;
	gap:             10px;
	margin-bottom:   20px;
}

.co-compare__back {
	color:           var(--wp--custom--dark--1, #333);
	text-decoration: none;
	font-size:       14px;
}
.co-compare__back:hover { text-decoration: underline; }

.co-compare__print {
	padding:      7px 14px;
	background:   var(--wp--custom--light--3, #f5f5f5);
	border:       1px solid var(--wp--custom--light--1, #ddd);
	border-radius: 3px;
	font-size:    13px;
	cursor:       pointer;
}
.co-compare__print:hover { background: var(--wp--custom--light--1, #e5e5e5); }

.co-compare__scroll {
	overflow-x:                 auto;
	-webkit-overflow-scrolling: touch;
}

.co-compare__table {
	width:           100%;
	border-collapse: collapse;
	font-size:       14px;
	min-width:       600px;
}

/* Product header row */
.co-compare__header-row th {
	vertical-align: top;
	padding:        16px 12px;
	border-bottom:  3px solid var(--wp--custom--dark--1, #333);
	text-align:     left;
}

.co-compare__label-col {
	width:     200px;
	min-width: 130px;
}

.co-compare__product-col {
	border-left: 1px solid var(--wp--custom--light--1, #ddd);
}

.co-compare__thumb img {
	max-width:     120px;
	max-height:    100px;
	object-fit:    contain;
	margin-bottom: 8px;
}

.co-compare__product-name a {
	font-size:       15px;
	font-weight:     700;
	color:           var(--wp--custom--dark--1, #222);
	text-decoration: none;
	display:         block;
	margin-bottom:   4px;
}
.co-compare__product-name a:hover { text-decoration: underline; }

.co-compare__sku,
.co-compare__subtitle {
	font-size:     12px;
	color:         #777;
	margin-bottom: 4px;
}

.co-compare__header-row .co-compare-btn {
	margin-top: 10px;
	font-size:  12px;
	padding:    4px 10px;
}

/* Section heading rows */
.co-compare__section-row .co-compare__section-title {
	background:     var(--wp--custom--dark--1, #333);
	color:          #fff;
	font-size:      12px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding:        7px 12px;
}

/* Spec rows */
.co-compare__spec-row:nth-child(even) td,
.co-compare__spec-row:nth-child(even) th {
	background: var(--wp--custom--light--3, #f7f7f7);
}

.co-compare__spec-label {
	padding:        9px 12px;
	font-weight:    600;
	color:          var(--wp--custom--dark--1, #333);
	font-size:      13px;
	border-right:   1px solid var(--wp--custom--light--1, #ddd);
	vertical-align: top;
	white-space:    nowrap;
	background:     var(--wp--custom--light--3, #f7f7f7);
}

.co-compare__spec-value {
	padding:        9px 12px;
	font-size:      13px;
	color:          #444;
	border-left:    1px solid var(--wp--custom--light--1, #ddd);
	vertical-align: top;
}

/* Highlight differing values across products */
.co-compare__spec-value--diff {
	background: #fff8e1 !important;
}

/* ── Print ─────────────────────────────────────────────────────────────────── */

@media print {
	.co-compare-tray,
	.co-compare__controls        { display: none !important; }
	.co-compare__table           { font-size: 11px; }
	.co-compare__section-title   {
		background:                 #333 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust:         exact;
	}
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media ( max-width: 640px ) {
	.co-compare-tray__list { display: none; }
	.co-compare__label-col { width: 110px; min-width: 90px; }
}