/* ==========================================================
   PC Builder — styles
   Namespaced with .pcb- to avoid clashing with theme styles
   ========================================================== */

.pcb-wrap {
	--pcb-blue: #1e4fd8;
	--pcb-blue-dark: #10306e;
	--pcb-purple: #6b2fd6;
	--pcb-bg: #f4f6fb;
	--pcb-card-border: #e6e9f2;
	--pcb-text: #1a2138;
	--pcb-muted: #7c869b;
	max-width: 1300px;
	margin: 0 auto;
	padding: 24px 20px 60px;
	color: var(--pcb-text);
	font-family: inherit;
	box-sizing: border-box;
}
.pcb-wrap * { box-sizing: border-box; }

/* ---------- top row: hero + build box ---------- display: grid; */
.pcb-top {
	
	grid-template-columns: 1fr 320px;
	gap: 20px;
	margin-bottom: 28px;
	height: 420px;
}

.pcb-hero {
	background: linear-gradient(120deg, #1a0f3d 0%, #3b1670 55%, #6b2fd6 100%);
	border-radius: 16px;
	padding: 40px 36px;
	color: #fff;
	display: flex;
	align-items: center;
	min-height: 420px;
    background-size: cover;
}
.pcb-hero-text h1 {
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 14px;
	font-weight: 800;
}
.pcb-hero-text h1 span {
	background: linear-gradient(90deg, #ff6fd8, #a06bff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.pcb-hero-text p {
	max-width: 460px;
	color: #d8d3ef;
	margin: 0 0 22px;
	font-size: 14.5px;
}
.pcb-hero-features {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	padding: 0;
	margin: 0;
}
.pcb-hero-features li {
	display: flex;
	flex-direction: column;
	font-size: 13px;
}
.pcb-hero-features li strong { color: #fff; }
.pcb-hero-features li span { color: #b7aee0; font-size: 12px; }

/* ---------- Your Build box ---------- */
.pcb-build-box {
	background: #fff;
	border: 1px solid var(--pcb-card-border);
	border-radius: 14px;
	padding: 18px;
	display: flex;
	flex-direction: column;
}
.pcb-build-head h3 {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
}
#pcb-build-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 340px;
	overflow-y: auto;
	margin-bottom: 10px;
}
.pcb-build-item {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--pcb-card-border);
	border-radius: 10px;
	padding: 8px;
	position: relative;
}
.pcb-build-item img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: 6px;
	background: #f4f6fb;
}
.pcb-build-item-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
.pcb-build-item-info strong {
	font-size: 12.5px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pcb-build-item-cat { font-size: 11px; color: var(--pcb-muted); }
.pcb-build-item-price { font-size: 12.5px; font-weight: 700; color: var(--pcb-blue); }
.pcb-remove-btn {
	background: none;
	border: none;
	font-size: 16px;
	color: #b6bccb;
	cursor: pointer;
	line-height: 1;
	padding: 4px;
}
.pcb-remove-btn:hover { color: #e34848; }

.pcb-empty {
	font-size: 13px;
	color: var(--pcb-muted);
	text-align: center;
	padding: 20px 8px;
}

.pcb-add-more-btn {
	background: #fff;
	border: 1px dashed var(--pcb-blue);
	color: var(--pcb-blue);
	border-radius: 8px;
	padding: 9px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: 14px;
}

.pcb-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var(--pcb-muted);
	margin-bottom: 12px;
}
.pcb-total-row strong {
	font-size: 20px;
	color: var(--pcb-blue-dark);
}

.pcb-checkout-btn {
	background: var(--pcb-blue);
	color: #fff !important;
	text-align: center;
	padding: 13px;
	border-radius: 9px;
	font-weight: 700;
	text-decoration: none;
	display: block;
}
.pcb-checkout-btn:hover { background: var(--pcb-blue-dark); }

/* ---------- body: category sidebar + products ---------- */
.pcb-body {
	display: grid;
	grid-template-columns:minmax(200px,220px) 1fr minmax(260px,300px);
	gap: 20px;
	align-items: start;
}
.pcb-cat-sidebar{
    position: sticky;
    top: 20px;
    align-self: start;
}
.pcb-build-box{
    position: sticky;
    top: 20px;
    align-self: start;
}


.pcb-cat-sidebar {
	background: #fff;
	border: 1px solid var(--pcb-card-border);
	border-radius: 14px;
	padding: 18px;
}
.pcb-cat-sidebar h4 { margin: 0 0 12px; font-size: 13px; letter-spacing: .04em; color: var(--pcb-muted); }
#pcb-cat-list { list-style: none; margin: 0 0 20px; padding: 0; }
#pcb-cat-list li {
	padding: 9px 10px;
	border-radius: 8px;
	font-size: 13.5px;
	cursor: pointer;
	color: var(--pcb-text);
	display: flex;
	justify-content: space-between;
}
#pcb-cat-list li span { color: var(--pcb-muted); font-size: 12px; }
#pcb-cat-list li:hover { background: #f1f4fc; }
#pcb-cat-list li.active { background: var(--pcb-blue); color: #fff; }
#pcb-cat-list li.active span { color: #d8e2ff; }

.pcb-help-box {
	background: #f4f6fb;
	border-radius: 12px;
	padding: 16px;
}
.pcb-help-box h5 { margin: 0 0 6px; font-size: 13.5px; }
.pcb-help-box p { margin: 0 0 12px; font-size: 12px; color: var(--pcb-muted); }
.pcb-help-btn {
	display: block;
	text-align: center;
	background: #fff;
	border: 1px solid var(--pcb-blue);
	color: var(--pcb-blue);
	border-radius: 8px;
	padding: 9px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}

.pcb-products-area { min-width: 0; }
.pcb-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
.pcb-toolbar h2 { font-size: 18px; margin: 0; }
#pcb-sort {
	border: 1px solid var(--pcb-card-border);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	background: #fff;
}

.pcb-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* change 4 to 3 or 5 */
	gap: 16px;
	min-height: 120px;
}

.pcb-card {
	background: #fff;
	border: 1px solid var(--pcb-card-border);
	border-radius: 12px;
	padding: 14px;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: box-shadow .15s ease, transform .15s ease;
}
.pcb-card:hover { box-shadow: 0 6px 20px rgba(20,30,70,.08); transform: translateY(-2px); }

.pcb-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--pcb-blue-dark);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 5px;
	text-transform: uppercase;
}
.pcb-card-img {
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}
.pcb-card-img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.pcb-card-title { font-size: 13.5px; margin: 0 0 4px; line-height: 1.3; }
.pcb-card-desc { font-size: 11.5px; color: var(--pcb-muted); margin: 0 0 10px; }
.pcb-card-bottom {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.pcb-card-price { font-weight: 800; font-size: 14px; color: var(--pcb-text); }
.pcb-add-btn {
	background: #fff;
	border: 1px solid var(--pcb-blue);
	color: var(--pcb-blue);
	border-radius: 7px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.pcb-add-btn:hover { background: var(--pcb-blue); color: #fff; }
.pcb-add-btn.pcb-added { background: #1fa956; border-color: #1fa956; color: #fff; }
.pcb-out-stock { font-size: 11.5px; color: #e34848; font-weight: 600; }

.pcb-load-more-btn {
	display: block;
	margin: 24px auto 0;
	background: #fff;
	border: 1px solid var(--pcb-card-border);
	border-radius: 9px;
	padding: 11px 26px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pcb-blue);
	cursor: pointer;
}
.pcb-load-more-btn:hover { background: #f1f4fc; }

/* ---------- responsive ---------- */
@media (max-width:1024px){

    .pcb-body{
        grid-template-columns:220px 1fr;
    }

    .pcb-build-box{
        grid-column:1 / -1;
        position:static;
        margin-top:20px;
    }

    .pcb-cat-sidebar{
        position:static;
    }

    .pcb-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .pcb-body{
        grid-template-columns:1fr;
    }

    .pcb-cat-sidebar,
    .pcb-build-box{
        position:static;
    }

    .pcb-grid{
        grid-template-columns:1fr;
    }

}

@media (max-width: 560px) {
	.pcb-grid { grid-template-columns: 1fr; }
	.pcb-hero-text h1 { font-size: 26px; }
}