/* =========================================================
   ATXPowerSupplies.com — 2026 redesign
   Bootstrap 5.3.8 companion stylesheet
   Change the brand colors here and the whole site follows.
   ========================================================= */
:root {
	--atx-dark: #0d1b2a;        /* header / hero / footer */
	--atx-dark-2: #15283d;      /* raised panels on dark */
	--atx-blue: #1f6feb;        /* primary buttons & links */
	--atx-blue-dark: #1558c0;
	--atx-volt: #ffc21a;        /* accent: power / checkout */
	--atx-volt-dark: #e6a800;
	--atx-ink: #1b2430;         /* body text */
	--atx-muted: #5d6b7a;
	--atx-line: #e3e8ee;
	--atx-bg: #f4f6f9;

	--bs-link-color: var(--atx-blue);
	--bs-link-color-rgb: 31,111,235;
	--bs-link-hover-color: var(--atx-blue-dark);
	--bs-link-hover-color-rgb: 21,88,192;
	--bs-body-color: var(--atx-ink);
	--bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body { background: var(--atx-bg); }
.icon { width: 1em; height: 1em; vertical-align: -.125em; fill: currentColor; }

/* ---------- top info bar ---------- */
.atx-topbar { background: #08131f; color: #b9c6d4; font-size: .82rem; }
.atx-topbar a { color: #fff; text-decoration: none; }
.atx-topbar a:hover { color: var(--atx-volt); }

/* ---------- header / navbar ---------- */
.atx-nav { background: var(--atx-dark); border-bottom: 3px solid var(--atx-volt); }
.atx-brand { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .55rem; line-height: 1; }
.atx-brand:hover { color: #fff; }
.atx-brand .mark { width: 42px; height: 42px; flex: 0 0 42px; }
.atx-brand .word { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.atx-brand .word span { color: var(--atx-volt); }
.atx-brand small { display: block; font-size: .68rem; font-weight: 500; color: #9fb0c2; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.atx-nav .nav-link { color: #d6e0ea; font-weight: 500; font-size: .95rem; }
.atx-nav .nav-link:hover, .atx-nav .nav-link:focus { color: var(--atx-volt); }
.atx-nav .navbar-toggler { border-color: rgba(255,255,255,.3); }
.atx-nav .navbar-toggler-icon { filter: invert(1); }

/* ---------- buttons ---------- */
.btn-volt { --bs-btn-bg: var(--atx-volt); --bs-btn-border-color: var(--atx-volt); --bs-btn-color: #111;
	--bs-btn-hover-bg: var(--atx-volt-dark); --bs-btn-hover-border-color: var(--atx-volt-dark); --bs-btn-hover-color: #111;
	--bs-btn-active-bg: var(--atx-volt-dark); --bs-btn-active-border-color: var(--atx-volt-dark); --bs-btn-active-color: #111;
	font-weight: 700; }
.btn-atx { --bs-btn-bg: var(--atx-blue); --bs-btn-border-color: var(--atx-blue); --bs-btn-color: #fff;
	--bs-btn-hover-bg: var(--atx-blue-dark); --bs-btn-hover-border-color: var(--atx-blue-dark); --bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--atx-blue-dark); --bs-btn-active-border-color: var(--atx-blue-dark); --bs-btn-active-color: #fff;
	font-weight: 600; }

/* ---------- hero ---------- */
.atx-hero {
	color: #fff;
	background:
		radial-gradient(circle at 85% 20%, rgba(255,194,26,.16), transparent 40%),
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 28px,
		var(--atx-dark);
}
.atx-hero h1 { font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.atx-hero h1 span { color: var(--atx-volt); }
.atx-hero p.lead { color: #c9d5e1; font-size: 1.08rem; }
.xref-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: .75rem;
	background: var(--atx-dark-2); border: 1px solid rgba(255,255,255,.1); color: #fff; text-decoration: none;
	transition: border-color .15s, transform .15s; }
.xref-card:hover { color: #fff; border-color: var(--atx-volt); transform: translateY(-2px); }
.xref-card .ico { width: 48px; height: 48px; flex: 0 0 48px; border-radius: .6rem; display: grid; place-items: center;
	background: var(--atx-volt); color: #111; font-size: 1.4rem; }
.xref-card strong { display: block; font-size: 1.05rem; }
.xref-card span { color: #9fb0c2; font-size: .86rem; }
.xref-card .go { margin-left: auto; color: var(--atx-volt); font-size: 1.2rem; }
.atx-stats { border-top: 1px solid rgba(255,255,255,.1); }
.atx-stats .num { font-size: 1.5rem; font-weight: 800; color: var(--atx-volt); line-height: 1; }
.atx-stats .lbl { font-size: .8rem; color: #9fb0c2; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- brand strip ---------- */
.atx-brands { background: #fff; border-bottom: 1px solid var(--atx-line); }
.atx-brands .label { font-size: .75rem; font-weight: 700; color: var(--atx-muted); text-transform: uppercase; letter-spacing: .08em; }
.atx-brands .b { display: inline-block; padding: .2rem .65rem; margin: .15rem; border: 1px solid var(--atx-line);
	border-radius: 2rem; font-size: .85rem; font-weight: 600; color: var(--atx-ink); background: var(--atx-bg); }

/* ---------- product grid ---------- */
.section-title { font-weight: 800; letter-spacing: -.01em; font-size: 1.5rem; }
.atx-filter { max-width: 340px; }
.psu-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--atx-line);
	border-radius: .6rem; padding: .6rem; text-decoration: none; color: var(--atx-ink); position: relative;
	transition: box-shadow .15s, border-color .15s; }
.psu-card:hover { border-color: var(--atx-blue); box-shadow: 0 6px 18px rgba(13,27,42,.1); color: var(--atx-ink); }
.psu-card .thumb { height: 113px; display: flex; align-items: center; justify-content: center; margin-bottom: .5rem; }
.psu-card .thumb img { max-height: 113px; width: auto; max-width: 100%; height: auto; object-fit: contain; }
.psu-card .t { font-size: .84rem; line-height: 1.3; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3;
	-webkit-box-orient: vertical; overflow: hidden; }
.psu-card .watt { position: absolute; top: .45rem; left: .45rem; background: var(--atx-dark); color: var(--atx-volt);
	font-size: .72rem; font-weight: 700; padding: .12rem .45rem; border-radius: .3rem; }
.psu-card .view { margin-top: auto; padding-top: .45rem; font-size: .8rem; font-weight: 600; color: var(--atx-blue); }
.psu-empty { display: none; }

/* ---------- help band ---------- */
.atx-help { background: var(--atx-blue); color: #fff; }
.atx-help a.tel { color: #fff; font-weight: 800; font-size: 1.4rem; text-decoration: none; white-space: nowrap; }

/* ---------- footer ---------- */
.atx-footer { background: var(--atx-dark); color: #b9c6d4; font-size: .92rem; }
.atx-footer h2 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: .9rem; }
.atx-footer a { color: #d6e0ea; text-decoration: none; }
.atx-footer a:hover { color: var(--atx-volt); }
.atx-footer ul { list-style: none; padding: 0; margin: 0; }
.atx-footer li { margin-bottom: .45rem; }
.atx-footer .social a { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; align-items: center;
	justify-content: center; background: var(--atx-dark-2); margin-right: .35rem; font-size: 1.05rem; }
.atx-footer .social a:hover { background: var(--atx-volt); color: #111; }
.atx-footer .pay img { background: #fff; border-radius: .4rem; padding: 4px; }
.atx-copy { background: #08131f; color: #7f91a4; font-size: .82rem; }

/* ---------- small screens ---------- */
@media (max-width: 575.98px) {
	.atx-nav .navbar-brand { margin-right: .5rem !important; }
	.atx-brand .mark { width: 36px; height: 36px; flex-basis: 36px; }
	.atx-brand .word { font-size: 1.1rem; }
	.atx-brand small { display: none; }
	.atx-stats .num { font-size: 1.2rem; }
	.atx-hero .btn-lg { width: 100%; }
}