/* ============================================================
   PC Builder – Main Builder Page
   ============================================================ */
#extension-pc-builder-pc-builder .pc-builder-container {
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
	max-width: 950px;
    margin: 0 auto;
}

/* ── Header top bar (logo + actions) ── */
.pcb-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	background: #F9F9FC;
	border-bottom: 1px solid #C3C8EB;
}
.pcb-head-logo {
	display: flex;
	align-items: center;
}
.pcb-logo {
	max-height: 56px;
	width: auto;
	display: block;
	object-fit: contain;
}

.pcb-header-actions {
	display: flex;
	align-items: stretch;
	gap: 0;
	border-left: 1px solid #e8e8e8;
}

/* Action buttons — icon above label */
.pcb-action-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 10px 20px;
	background: transparent;
	border: none;
	border-right: 1px solid #e8e8e8;
	border-radius: 0;
	font-size: 11px;
	font-weight: 500;
	color: #555;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	transition: background 0.15s;
}
.pcb-action-btn .material-icons {
	font-size: 22px;
	color: #e8431e;
}
.pcb-action-btn:hover {
	background: #fff5f2;
	color: #e8431e;
	filter: none;
	transform: none;
}
.pcb-action-btn:active { background: #ffe8e2; }
.pcb-btn-label {
	display: block;
	font-size: 11px;
	color: #555;
}
.pcb-action-btn:hover .pcb-btn-label { color: #e8431e; }
.pcb-btn-save, .pcb-btn-screenshot, .pcb-btn-print,
.pcb-btn-cart, .pcb-btn-clear { background: transparent; }

/* ── Info bar (title + totals) ── */
.pcb-top-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: #fff;
	border-bottom: 1px solid #eee;
}
.pcb-top-left {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pcb-page-title {
	font-size: 20px;
	font-weight: 700;
	color: #3535c8;
	line-height: 1.2;
}
.pcb-hide-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #555;
	cursor: pointer;
}
.pcb-hide-label input[type="checkbox"] { cursor: pointer; }

.pcb-top-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Estimated wattage box */
.pcb-estimated-watt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border: 2px dashed #df5c39;
	border-radius: 8px;
	padding: 10px 14px;
	min-width: 180px;
	max-width: 260px;
	text-align: left;
}
.pcb-watt-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	width: 100%;
}
.pcb-watt-value {
	font-size: 20px;
	font-weight: 700;
	color: #1a1a2e;
	line-height: 1.2;
}
.pcb-watt-label {
	font-size: 10px;
	font-weight: 600;
	color: #888;
	text-transform: uppercase;
	letter-spacing: .3px;
	white-space: nowrap;
}
.pcb-power-meta-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 6px;
	width: 100%;
}
.pcb-power-meta {
	font-size: 11px;
	color: #555;
	line-height: 1.3;
}
.pcb-psu-status {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
}
.pcb-breakdown-trigger {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #df5c39;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	cursor: pointer;
}
.pcb-breakdown-trigger:hover {
	text-decoration: underline;
}
.pcb-psu-status-success {
	color: #1a7f37;
}
.pcb-psu-status-danger {
	color: #b42318;
}
.pcb-psu-status-warning {
	color: #b54708;
}

/* Total price box */
.pcb-total-price {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #3535c8;
	border-radius: 8px;
	padding: 10px 24px;
	min-width: 120px;
	text-align: center;
}
.pcb-price-value {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}
.pcb-price-label {
	font-size: 11px;
	font-weight: 600;
	color: rgba(255,255,255,.75);
	letter-spacing: .3px;
	text-transform: uppercase;
}

/* Legacy total badge (kept for search page compatibility) */
.pcb-total-amount-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 2px solid #df5c39;
	border-radius: 8px;
	padding: 7px 14px;
	font-weight: 700;
	font-size: 15px;
	color: #df5c39;
	background: #fff8f5;
	white-space: nowrap;
}
.pcb-total-amount-badge .material-icons { color: #df5c39; }
.pcb-total-label {
	font-size: 12px;
	font-weight: 600;
	color: #888;
	text-transform: uppercase;
	letter-spacing: .4px;
}

.pcb-power-modal {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 9999;
}
.pcb-power-modal.is-open {
	display: block;
}
.pcb-power-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.55);
}
.pcb-power-modal-dialog {
	position: relative;
	max-width: 720px;
	margin: 8vh auto 0;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}
.pcb-power-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid #ececf3;
}
.pcb-power-modal-title {
	font-size: 14px;
	font-weight: 700;
	color: #1f2937;
	text-transform: uppercase;
	letter-spacing: .35px;
}
.pcb-power-modal-close {
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	color: #6b7280;
	cursor: pointer;
}
.pcb-power-modal-body {
	max-height: 60vh;
	overflow: auto;
	padding: 14px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pcb-power-breakdown-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: #1f2937;
}
.pcb-power-breakdown-row.is-excluded {
	opacity: .8;
}
.pcb-power-breakdown-name {
	flex: 1;
}
.pcb-power-breakdown-watt {
	font-weight: 700;
	white-space: nowrap;
}

/* ── Category sections ── */
.pc-builder-category-container {
	padding: 0 16px;
	margin-top: 16px;
	margin-bottom: 8px;
}
.pcb-cat-header {
	background: linear-gradient(135deg, #1a1a2e 0%, #2c2c54 100%);
	color: #fff;
	padding: 10px 16px;
	border-radius: 6px 6px 0 0;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	letter-spacing: .3px;
}

/* ── Category body wrapper ── */
.pcb-cat-body {
	border: 1px solid #e0e0e0;
	border-top: none;
	border-radius: 0 0 8px 8px;
	overflow: hidden;
	background: #fff;
	margin-bottom: 8px;
}

/* ── Component rows ── */
.pc-builder-component-container {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: none;
	border-bottom: 1px solid #eee;
	border-radius: 0;
	padding: 12px 16px;
	margin-bottom: 0;
	box-shadow: none;
	transition: background 0.12s;
}
.pc-builder-component-container:last-child {
	border-bottom: none;
}
.pc-builder-component-container:hover {
	background: #fafafa;
	box-shadow: none;
}
.pc-builder-component-container.required-component {
	border-color: #eee;
	background: #fff;
}

/* Component image */
.component-image { flex: 0 0 auto; }
.component-image img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: 4px;
	display: block;
}
.component-image .pcb-component-icon {
	font-size: 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	display: block;
	text-align: center;
	color: #5c6bc0;
}

/* Component name */
.component-name {
	flex: 0 0 160px;
	font-size: 14px;
	font-weight: 600;
	color: #1a1a2e;
}
.pcb-required-star { color: #dc2626; }
.pcb-required-badge {
	display: inline-block;
	background: #666;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 3px;
	vertical-align: middle;
	margin-left: 4px;
	letter-spacing: .2px;
}

/* Product name + options */
.component-product {
	flex: 1;
	font-size: 14px;
	color: #444;
	min-width: 0;
}
.pcb-component-label {
	display: block;
	color: #3535c8;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 2px;
}
.pcb-product-name {
	display: block;
	font-weight: 500;
	color: #1a1a2e;
	margin-bottom: 2px;
}
.pc-builder-option-toggle {
	font-size: 12px;
	color: #3535c8;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.pc-builder-option-collapse {
	margin-top: 4px;
}
.pcb-option-list {
	font-size: 12px;
	color: #666;
	line-height: 1.6;
	padding: 4px 0;
}

/* Price */
.component-price {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 700;
	color: #1a1a2e;
	min-width: 80px;
	text-align: right;
}

/* Actions */
.component-choose {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}
.pcb-icon-btn {
	background: transparent;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	padding: 0;
}
.pcb-icon-btn .material-icons { font-size: 18px; }
.pcb-delete-btn { color: #dc2626; }
.pcb-delete-btn:hover { background: #fef2f2; border-color: #dc2626; }
.pcb-change-btn { color: #3535c8; text-decoration: none; }
.pcb-change-btn:hover { background: #eef0ff; border-color: #3535c8; }

.pcb-choose-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #3535c8;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s;
	white-space: nowrap;
}
.pcb-choose-btn .material-icons { font-size: 16px; }
.pcb-choose-btn:hover { background: #1a1a2e; color: #fff; }

/* "Add Another" button — inside the last product row's component-product column */
.pcb-add-another-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #3535c8;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 6px 10px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s;
	white-space: nowrap;
	margin-top: 6px;
}
.pcb-add-another-btn .material-icons { font-size: 16px; }
.pcb-add-another-btn:hover { background: #1a1a2e; color: #fff; }

/* ============================================================
   PC Builder Search / Choose Page
   ============================================================ */
#pcb-search-page {
	padding-top: 12px;
	padding-bottom: 40px;
}

/* Two-column layout */
.pcb-search-layout {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

/* ── Sidebar ── */
.pcb-filter-sidebar {
	flex: 0 0 240px;
	min-width: 0;
}

.pcb-filter-section {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 12px;
}

.pcb-filter-heading {
	font-size: 14px;
	font-weight: 600;
	color: #2d2d2d;
	margin: 0 0 12px;
	padding: 0;
}

.pcb-filter-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	user-select: none;
}
.pcb-toggle-icon {
	font-size: 20px;
	color: #888;
	line-height: 1;
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
}

.pcb-filter-group-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pcb-filter-group-body.pcb-scrollable {
	max-height: 210px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #ccc #f5f5f5;
}
.pcb-filter-group-body.pcb-scrollable::-webkit-scrollbar {
	width: 5px;
}
.pcb-filter-group-body.pcb-scrollable::-webkit-scrollbar-track {
	background: #f5f5f5;
	border-radius: 3px;
}
.pcb-filter-group-body.pcb-scrollable::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 3px;
}
.pcb-filter-group-body.pcb-scrollable::-webkit-scrollbar-thumb:hover {
	background: #aaa;
}
.pcb-filter-group-body.pcb-collapsed {
	display: none;
}

.pcb-filter-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #444;
	cursor: pointer;
	font-weight: normal;
}
.pcb-filter-label input[type="checkbox"] {
	margin: 0;
	accent-color: #e53935;
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* Price range slider */
.pcb-price-slider-wrapper {
	position: relative;
	height: 6px;
	margin: 8px 0 28px;
}
.pcb-price-track {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: #e0e0e0;
	border-radius: 3px;
}
.pcb-price-fill {
	position: absolute;
	top: 0; bottom: 0;
	background: #e53935;
	border-radius: 3px;
	left: 0; width: 100%;
}
.pcb-price-slider-wrapper input[type="range"] {
	position: absolute;
	width: 100%;
	height: 6px;
	background: none;
	outline: none;
	pointer-events: none;
	-webkit-appearance: none;
	margin: 0;
	top: 0;
}
.pcb-price-slider-wrapper input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 18px;
	width: 18px;
	background: #e53935;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.25);
	cursor: pointer;
	pointer-events: all;
}
.pcb-price-slider-wrapper input[type="range"]::-moz-range-thumb {
	height: 16px;
	width: 16px;
	background: #e53935;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.25);
	cursor: pointer;
	pointer-events: all;
}

.pcb-price-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}
.pcb-price-inputs input[type="number"] {
	flex: 1;
	min-width: 0;
	padding: 5px 6px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	font-size: 13px;
	color: #333;
	-moz-appearance: textfield;
}
.pcb-price-inputs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.pcb-price-inputs span { color: #888; font-size: 13px; }

/* loading state for product list */
.pcb-search-content.pcb-loading {
	pointer-events: none;
}

/* skeleton loading */
@keyframes pcb-shimmer {
	0% { background-position: -400px 0; }
	100% { background-position: 400px 0; }
}
.pcb-skeleton-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 14px;
}
.pcb-skeleton-bone {
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
	background-size: 800px 100%;
	animation: pcb-shimmer 1.2s infinite linear;
	border-radius: 4px;
}
.pcb-skeleton-img {
	width: 100%;
	height: 180px;
	border-radius: 6px;
}
.pcb-skeleton-info {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pcb-skeleton-title {
	height: 16px;
	width: 70%;
}
.pcb-skeleton-line {
	height: 11px;
	width: 90%;
}
.pcb-skeleton-line-short {
	height: 11px;
	width: 50%;
}
.pcb-skeleton-price-area {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}
.pcb-skeleton-price {
	height: 20px;
	width: 80px;
}
.pcb-skeleton-btn {
	height: 34px;
	width: 100%;
	border-radius: 6px;
}

/* ── Right content ── */
.pcb-search-content {
	flex: 1;
	min-width: 0;
}

/* Top bar */
.pcb-search-topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 12px;
}
.pcb-back-btn {
	flex: 0 0 auto;
	color: #555;
	display: flex;
	align-items: center;
	text-decoration: none;
}
.pcb-back-btn:hover { color: #1a1a2e; }
.pcb-back-btn .material-icons { font-size: 20px; }

.pcb-search-input-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	overflow: hidden;
}
.pcb-search-input {
	flex: 1;
	border: none;
	padding: 7px 10px;
	font-size: 14px;
	outline: none;
	color: #333;
}
.pcb-search-icon-btn {
	background: none;
	border: none;
	padding: 6px 10px;
	cursor: pointer;
	color: #666;
	display: flex;
	align-items: center;
}
.pcb-search-icon-btn:hover { color: #1a1a2e; }
.pcb-search-icon-btn .material-icons { font-size: 20px; }

/* Autocomplete dropdown */
.pcb-ac-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	z-index: 1000;
	max-height: 360px;
	overflow-y: auto;
}
.pcb-ac-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
}
.pcb-ac-item:last-child { border-bottom: none; }
.pcb-ac-item:hover { background: #f8f8f8; }
.pcb-ac-thumb {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 4px;
	border: 1px solid #eee;
	flex-shrink: 0;
}
.pcb-ac-info {
	flex: 1;
	min-width: 0;
}
.pcb-ac-name {
	font-size: 13px;
	font-weight: 600;
	color: #1a1a2e;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	text-decoration: none;
}
.pcb-ac-name:hover { color: #3535c8; }
.pcb-ac-price {
	font-size: 12px;
	margin-top: 2px;
}
.pcb-ac-price .pcb-ac-special {
	font-weight: 700;
	color: #1a1a2e;
}
.pcb-ac-price .pcb-ac-old {
	text-decoration: line-through;
	color: #aaa;
	margin-left: 4px;
}
.pcb-ac-add-btn {
	background: #3535c8;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
	white-space: nowrap;
}
.pcb-ac-add-btn:hover { background: #1a1a2e; }
.pcb-ac-empty {
	padding: 16px;
	text-align: center;
	font-size: 13px;
	color: #999;
}

.pcb-sort-wrap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}
.pcb-sort-label { font-size: 13px; color: #666; white-space: nowrap; }
.pcb-sort-select {
	padding: 6px 8px;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	font-size: 13px;
	color: #333;
	background: #fff;
}

/* Product cards */
.pcb-product-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.pcb-product-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 12px;
	transition: box-shadow 0.15s;
}
.pcb-product-card:hover {
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.pcb-product-image {
	position: relative;
	text-align: center;
	margin-bottom: 10px;
}
.pcb-product-image img {
	width: 100%;
	height: 180px;
	object-fit: contain;
	border-radius: 4px;
}
.pcb-save-badge {
	position: absolute;
	top: 0;
	left: 0;
	background: #6c3fc8;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 3px;
	white-space: nowrap;
}

.pcb-product-info {
	flex: 1;
	width: 100%;
	min-width: 0;
}
.pcb-product-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 400;
	color: #1a1a2e;
	text-decoration: none;
	margin-bottom: 4px;
	line-height: 1.3;
}
.pcb-product-desc {
	font-size: 12px;
	color: #666;
	margin: 0;
	line-height: 1.5;
}
.pcb-key-features {
	font-size: 12px;
	color: #555;
	margin: 4px 0 0 0;
	padding-left: 16px;
	line-height: 1.6;
	list-style: disc;
}
.pcb-key-features li {
	margin-bottom: 1px;
}

.pcb-product-price {
	width: 100%;
	margin-top: 8px;
}
.pcb-price-special {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #1a1a2e;
}
.pcb-price-old {
	display: block;
	font-size: 13px;
	color: #999;
	text-decoration: line-through;
}

.pcb-product-actions {
	width: 100%;
}
.pcb-add-btn {
	width: 100%;
	display: block;
	background: #3535c8;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 9px 22px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
	white-space: nowrap;
}
.pcb-add-btn:hover { background: #1a1a2e; }
.pcb-add-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.pcb-product-bottom { margin-top: auto; width: 100%; }

/* Pagination */
.pcb-pagination-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	font-size: 13px;
	color: #666;
}

/* Empty state */
.pcb-empty {
	padding: 48px 20px;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	text-align: center;
}

/* ============================================================
   PC Builder – Build Page styles (also in this CSS)
   ============================================================ */
#extension-pc-builder-pc-builder-build {
}

/* Filter mobile toggle button */
.pcb-filter-mobile-toggle {
	display: none;
	align-items: center;
	gap: 4px;
	background: #1a1a2e;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.pcb-filter-mobile-toggle i {
	font-size: 18px;
}

/* Filter overlay */
.pcb-filter-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 1199;
}

.pcb-filter-overlay.active {
	display: block;
}

/* Responsive */
@media (max-width: 768px) {
	/* ── Header: horizontal row (logo left, icons right) ── */
	.pcb-head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 0;
		padding: 10px 12px;
	}
	.pcb-logo {
		max-height: 36px;
	}
	.pcb-header-actions {
		width: auto;
		justify-content: flex-end;
		border-left: none;
	}
	.pcb-action-btn {
		flex: 0 0 auto;
		padding: 8px;
		border-right: none;
	}
	.pcb-btn-label {
		display: none;
	}

	/* ── Top content: hide title, compact layout ── */
	.pcb-top-content {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 12px;
		text-align: center;
	}
	.pcb-top-left {
		align-items: center;
	}
	.pcb-page-title {
		display: none;
	}
	.pcb-top-right {
		width: 100%;
		justify-content: center;
	}
	.pcb-estimated-watt,
	.pcb-total-price {
		flex: 1;
		min-width: 0;
	}
	.pcb-estimated-watt {
		max-width: none;
	}
	.pcb-watt-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
	.pcb-power-breakdown-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.pcb-power-modal-dialog {
		margin: 5vh 12px 0;
	}

	/* ── Category sections ── */
	.pc-builder-category-container {
		padding: 0 6px;
		margin-top: 10px;
	}
	.pcb-cat-header {
		font-size: 13px;
		padding: 8px 12px;
	}

	/* ── Component rows: CSS grid for mobile ── */
	.pc-builder-component-container {
		display: grid;
		grid-template-columns: 60px 1fr auto;
		grid-template-rows: auto auto;
		gap: 2px 10px;
		padding: 10px;
		align-items: center;
	}
	.component-image {
		grid-column: 1;
		grid-row: 1 / 3;
	}
	.component-image img {
		width: 32px;
		height: 32px;
	}
	.component-product {
		grid-column: 2;
		grid-row: 1 / 3;
		min-width: 0;
	}
	.component-choose {
		grid-column: 3;
		grid-row: 1;
		gap: 4px;
	}
	.component-price {
		grid-column: 3;
		grid-row: 2;
		min-width: auto;
		font-size: 16px;
		font-weight: 700;
		text-align: right;
	}
	.pcb-component-label {
		font-size: 12px;
	}
	.pcb-product-name {
		font-size: 12px;
		line-height: 1.4;
	}
	.component-name {
		flex: 0 0 auto;
	}

	/* Action buttons mobile */
	.pcb-icon-btn {
		width: 26px;
		height: 26px;
		border: none;
	}
	.pcb-icon-btn .material-icons {
		font-size: 18px;
	}

	/* Choose button: outline pill style */
	.pcb-choose-btn {
		background: #fff;
		color: #333;
		border: 1px solid #ccc;
		border-radius: 20px;
		padding: 7px 18px;
		font-size: 13px;
	}
	.pcb-choose-btn .material-icons {
		display: none;
	}
	.pcb-choose-btn:hover {
		background: #f5f5f5;
		color: #333;
	}

	.pcb-add-another-btn {
		font-size: 11px;
		padding: 4px 10px;
	}

	/* ── Search page ── */
	.pcb-search-layout {
		flex-direction: column;
	}
	.pcb-filter-mobile-toggle {
		display: flex;
	}
	.pcb-filter-sidebar {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 280px;
		height: 100vh;
		max-height: 100vh;
		z-index: 1200;
		border-radius: 0;
		overflow-y: auto;
		background: #f0f2f5;
		padding: 16px 12px;
		-webkit-overflow-scrolling: touch;
	}
	.pcb-filter-sidebar.open {
		display: block;
	}
	.pcb-product-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.pcb-sort-wrap {
		display: none;
	}
	.pcb-search-input {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
	.pcb-search-input-wrap {
		flex: 1;
		display: flex;
		align-items: center;
		border: 1px solid #d0d0d0;
		border-radius: 6px;
		overflow: hidden;
		min-width: 0;
	}
}
@media (max-width: 480px) {
	.pcb-product-list { grid-template-columns: 1fr; }
	#extension-pc-builder-pc-builder {
		padding: 0px;
	}
}

/* ============================================================
   PC Builder – Dependency Warning Banner
   ============================================================ */
.pcb-dep-warning {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff8f8;
	border: 1.5px solid #e53935;
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 16px;
	color: #1a1a2e;
	font-size: 14px;
}
.pcb-dep-warning-close {
	margin-left: auto;
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #888;
	padding: 0 4px;
}
.pcb-dep-warning-close:hover {
	color: #333;
}

/* ============================================================
   Screenshot mode – html2canvas compatibility overrides
   ============================================================ */
.pcb-screenshot-mode,
.pcb-screenshot-mode .pcb-cat-body {
	overflow: visible !important;
}
.pcb-screenshot-mode .pcb-required-badge {
	letter-spacing: 0 !important;
	padding: 2px 8px !important;
}
.pcb-screenshot-mode .pcb-add-another-btn,
.pcb-screenshot-mode .pcb-choose-btn {
	display: inline-block !important;
	padding: 7px 14px !important;
}
.pcb-screenshot-mode .pcb-add-another-btn .material-icons,
.pcb-screenshot-mode .pcb-choose-btn .material-icons {
	display: none !important;
}
.pcb-screenshot-mode .pcb-icon-btn {
	display: inline-block !important;
	text-align: center;
	line-height: 32px !important;
}
.pcb-screenshot-mode .pcb-total-amount-badge {
	letter-spacing: 0 !important;
}
.pcb-screenshot-mode .pcb-total-label {
	letter-spacing: 0 !important;
}
.pcb-screenshot-mode .pcb-cat-header {
	letter-spacing: 0 !important;
}