/* ==========================================================================
   Korric Product Comparison — v1.2 — Pixel-perfect Figma match
   ========================================================================== */

.korric-pc-root {
	--kpc-bg:           #0e0e0e;
	--kpc-card-bg:      #161616;
	--kpc-desc-bg:      #1e1e1e;
	--kpc-border:       #252525;
	--kpc-text:         #f2f2f2;
	--kpc-muted:        #6b6b6b;
	--kpc-accent:       #d62828;
	--kpc-accent-hover: #b81f1f;
	font-family: inherit;
}

/* ---------- Compare button (PDP) ---------- */
.korric-pc-btn-wrap { width: 100%; }
.korric-pc-compare-btn {
	display: inline-block;
	text-align: center;
	width: 100%;
	background: #ffffff;
	color: #1a1a1a;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 14px 24px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color .15s ease;
	box-sizing: border-box;
}
.korric-pc-compare-btn:hover { 
	background-color: #8b1e1e !important;
    color: #fff !important;
}

/* ---------- Outer wrap ---------- */
.korric-pc-wrap {
	background: var(--kpc-bg);
	color: var(--kpc-text);
	padding: 0;
}

/* ---------- Header row (Product Info + cards) ---------- */
/*
   Layout:   [Product Info label] [card] [card] [card] [add-slot]
   Each item is a flex child so they share the same row height.
   "Product Info" label sits at the bottom-left of its cell.
*/
.korric-pc-products-row {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-bottom: 2px;
}

/* "Product Info" label cell */
.korric-pc-label-header {
	flex: 0 0 180px;
	min-width: 180px;
	display: flex;
	align-items: flex-end;
	padding: 0 0 20px 4px;
}
.korric-pc-product-info-text {
	color: var(--kpc-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
}

/* Each product card wrapper */
.korric-pc-card {
    flex: 0.89 1 0;
    min-width: 0;
    background: #0B0C0C;
    /* border-radius: 6px; 
    /* margin: 0 4px; */
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid #FFFFFF33;
	/* border-right: 1px solid #FFFFFF33; */
	padding: 0px 16px;
}

/* Empty add-slot card */
.korric-pc-card-empty {
	flex: 1 1 0;
	min-width: 0;
	background: var(--kpc-card-bg);
	border-radius: 6px;
	margin: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
}

/* Remove × button */
.korric-pc-remove-item {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(0,0,0,0.55);
	border: none;
	color: #fff;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.korric-pc-remove-item:hover { background: var(--kpc-accent); }

/* Product image — fixed height, full-width cover */
.korric-pc-product-img {
	width: 100%;
	height: auto;
	overflow: hidden;
	background: #111;
	flex-shrink: 0;
}
.korric-pc-product-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Product body below image */
.korric-pc-product-body {
	padding: 16px 0px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.korric-pc-product-cat {
	color: var(--kpc-accent);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 5px;
}
.korric-pc-product-name {
	color: #ffffff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em;
	margin-bottom: 6px;
	text-transform: uppercase;
	line-height: 1.3;
}
.korric-pc-product-price {
	color: #ffffff;
	font-weight: 500;
	font-size: 15px;
	margin-bottom: 6px;
}
.korric-pc-product-rating {
	color: var(--kpc-accent);
	font-size: 12px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 4px;
}
.korric-pc-product-rating span { color: var(--kpc-muted); font-size: 11px; }

/* ADD TO CART button — dark pill with cart icon */
.korric-pc-add-to-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #2a2a2a;
	color: #ffffff;
	padding: 10px 12px;
	border-radius: 4px;
	font-size: 11px;
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-top: auto;
	border: none;
	cursor: pointer;
	transition: background .15s;
}
.korric-pc-add-to-cart:hover { background: #333; color: #fff; }
.korric-pc-cart-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: .85;
}

/* Empty slot inner */
.korric-pc-add-item-trigger {
	width: 100%;
	height: 100%;
	min-height: 300px;
	background: none;
	border: 1px dashed #2e2e2e;
	border-radius: 4px;
	color: var(--kpc-muted);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	cursor: pointer;
	padding: 20px;
	box-sizing: border-box;
}
.korric-pc-add-item-trigger:hover {
	background-color: #0B0C0C; 
}
.korric-pc-plus {
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 1px solid #3a3a3a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--kpc-muted);
}
.korric-pc-add-text {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--kpc-muted);
	text-align: center;
}
.korric-pc-browse-btn {
	font-size: 11px;
	color: var(--kpc-accent);
	border: 1px solid var(--kpc-accent);
	padding: 7px 16px;
	border-radius: 4px;
	background: none;
}
.korric-pc-browse-btn:hover { background: var(--kpc-accent); color: #fff; }

/* ============================================================
   COMPARISON TABLE — Figma-exact
   - Dark container background (#161616)
   - Rows separated by bottom border only (no vertical borders)
   - Label col: muted gray, no border
   - Data cols: white bold text
   - Description row: slightly lighter bg (#1e1e1e)
   ============================================================ */

.korric-pc-table-wrap {
	background: var(--kpc-card-bg);
	border-radius: 6px;
	overflow: hidden;
	margin-top: 8px;
}

.korric-pc-table-scroll { overflow-x: auto; }

.korric-pc-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	background-color: #0B0C0C;
}

/* All cells — NO borders except bottom */
.korric-pc-table td {
	border-bottom: 1px solid var(--kpc-border) !important;
	border: none;
	vertical-align: middle;
	text-align: left;
	font-size: 13px;
	box-sizing: border-box;
	padding: 15px 18px;
}

/* Label column */
.korric-pc-label-col {
	width: 180px;
	color: var(--kpc-muted);
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
}

/* Data cells */
.korric-pc-table td:not(.korric-pc-label-col) {
	color: #ffffff;
	font-weight: 600;
	font-size: 13px;
}

/* Description row highlight */
.korric-pc-row-description td {
	background: var(--kpc-desc-bg) !important;
	color: #cccccc !important;
	font-weight: 400;
	font-size: 13px;
	padding: 18px 18px;
	vertical-align: top;
	border: none;
}
.korric-pc-row-description .korric-pc-label-col {
	color: #ffffff;
	font-weight: 600;
}

/* Last row — no bottom border */
.korric-pc-table tr:last-child td {
	border-bottom: none;

}

/* Empty cells in data rows: transparent, no text */
.korric-pc-empty-cell {
	background: transparent !important;
}

/* Swatches */
.korric-pc-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.korric-pc-swatch {
	width: 18px; height: 18px;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,.15);
	display: inline-block;
}

/* Sizes */
.korric-pc-sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.korric-pc-size-box {
	border: 1px solid #3a3a3a;
	border-radius: 3px;
	padding: 3px 10px;
	font-size: 12px;
	color: #ffffff;
	font-weight: 600;
}

/* Empty state */
.korric-pc-empty-msg {
	color: var(--kpc-muted);
	text-align: center;
	padding: 40px 10px;
}

/* Header utility */
.korric-pc-header-bar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
}
.korric-pc-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
.korric-pc-subtitle { margin: 0; color: var(--kpc-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.korric-pc-clear-all {
	background: none; border: none;
	color: var(--kpc-accent); cursor: pointer;
	font-size: 12px; letter-spacing: .05em;
	text-transform: uppercase; padding: 6px 0; font-weight: 600;
}
.korric-pc-clear-all:hover { text-decoration: underline; }

/* ---------- Browse Products Popup ---------- */
.korric-pc-popup-overlay {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.7);
	display: none; align-items: center; justify-content: center;
	z-index: 100000; padding: 20px;
}
.korric-pc-popup-overlay.is-open { display: flex; }
.korric-pc-popup {
	background: #1a1a1a; color: var(--kpc-text);
	width: 100%; max-width: 900px; max-height: 85vh;
	border-radius: 8px; display: flex; flex-direction: column; overflow: hidden;
}
.korric-pc-popup-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 18px 24px; border-bottom: 1px solid var(--kpc-border);
}
.korric-pc-popup-header h3 { margin: 0; font-size: 18px; }
.korric-pc-popup-close { background: none; border: none; color: var(--kpc-text); font-size: 22px; cursor: pointer; }
.korric-pc-popup-body { padding: 20px 24px; overflow-y: auto; }
.korric-pc-browse-grid {
	display: grid;
	grid-template-columns: repeat(var(--korric-pc-popup-cols, 3), 1fr);
	gap: 16px;
}
.korric-pc-browse-item { background: #141414; border: 1px solid var(--kpc-border); border-radius: 6px; padding: 14px; text-align: center; }
.korric-pc-browse-item-img { width: 100%; height: 110px; border-radius: 4px; overflow: hidden; margin-bottom: 10px; background: #000; }
.korric-pc-browse-item-img img { width: 100%; height: 100%; object-fit: cover; }
.korric-pc-browse-item-name { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.korric-pc-browse-item-price { color: var(--kpc-muted); font-size: 13px; margin-bottom: 10px; }
.korric-pc-browse-item-select { width: 100%; background: var(--kpc-accent); color: #fff; border: none; padding: 8px; border-radius: 4px; font-size: 12px; cursor: pointer; }
.korric-pc-browse-item-select:hover { background: var(--kpc-accent-hover); }
.korric-pc-browse-item-select:disabled { background: #3a3a3a; cursor: not-allowed; }
.korric-pc-no-products { color: var(--kpc-muted); grid-column: 1/-1; text-align: center; padding: 30px 0; }
.korric-pc-load-more-wrap { text-align: center; margin-top: 20px; }
.korric-pc-load-more { background: none; border: 1px solid var(--kpc-accent); color: var(--kpc-accent); padding: 10px 28px; border-radius: 4px; cursor: pointer; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.korric-pc-load-more:hover { background: var(--kpc-accent); color: #fff; }
.korric-pc-popup-loading { text-align: center; color: var(--kpc-muted); padding: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.korric-pc-browse-grid { grid-template-columns: repeat(2, 1fr); }
	.korric-pc-products-row { flex-wrap: wrap; }
	.korric-pc-label-header { display: none; }
}
@media (max-width: 480px) {
	.korric-pc-browse-grid { grid-template-columns: 1fr; }
}

/* Admin field */
.korric-pc-field input { width: 60%; }