/*
Theme Name: Shahzaib Computers
Theme URI: https://shahzaibcomputers.com
Author: Shahzaib Computers Dev Team
Author URI: https://shahzaibcomputers.com
Description: A pixel-accurate, production-ready, Elementor-compatible custom WordPress theme for Shahzaib Computers - a computer and gaming gear retailer based in Multan, Pakistan. Built with clean semantic HTML5, PHP and CSS3 following WordPress Coding Standards.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shahzaib-computers
Tags: e-commerce, custom, elementor, responsive, two-columns, footer-widgets, custom-menu, custom-logo, threaded-comments, translation-ready
*/

/* =============================================================
   0. CSS VARIABLES / DESIGN TOKENS
   ============================================================= */
:root{
	--color-bg-dark:#0c0f1a;
	--color-bg-darker:#090b13;
	--color-navy:#111428;
	--color-gold:#d9a441;
	--color-gold-light:#f0c674;
	--color-white:#ffffff;
	--color-off-white:#f5f5f7;
	--color-text-dark:#222226;
	--color-text-muted:#5c5c66;
	--color-border:#e5e5ea;
	--font-heading:'Poppins', Arial, Helvetica, sans-serif;
	--font-body:'Inter', Arial, Helvetica, sans-serif;
	--radius-card:10px;
	--shadow-card:0 4px 18px rgba(0,0,0,.08);
	--shadow-card-hover:0 10px 28px rgba(0,0,0,.14);
	--container-width:1200px;
	--transition:all .25s ease-in-out;
}

/* =============================================================
   1. RESET / BASE
   ============================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	font-family:var(--font-body);
	color:var(--color-text-dark);
	background:var(--color-white);
	line-height:1.6;
	font-size:16px;
	overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;transition:var(--transition);}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;margin:0 0 .5em;line-height:1.25;}
p{margin:0 0 1em;}
button{font-family:var(--font-body);cursor:pointer;}
.container{max-width:var(--container-width);margin:0 auto;padding:0 24px;}
.screen-reader-text{position:absolute!important;left:-9999px;top:-9999px;}
section{position:relative;}

/* =============================================================
   2. BUTTONS
   ============================================================= */
.btn{
	display:inline-block;
	padding:14px 32px;
	font-weight:600;
	font-size:14px;
	letter-spacing:.06em;
	text-transform:uppercase;
	border-radius:4px;
	border:2px solid transparent;
	transition:var(--transition);
	cursor:pointer;
}
.btn-primary{background:var(--color-white);color:var(--color-navy);border-color:var(--color-white);}
.btn-primary:hover{background:transparent;color:var(--color-white);border-color:var(--color-white);}
.btn-outline{background:transparent;color:var(--color-white);border-color:var(--color-white);}
.btn-outline:hover{background:var(--color-white);color:var(--color-navy);}
.btn-gold{background:var(--color-gold);color:var(--color-navy);border-color:var(--color-gold);}
.btn-gold:hover{background:transparent;color:var(--color-gold);}

/* =============================================================
   3. HEADER / NAVIGATION
   ============================================================= */
.site-header{
	position:absolute;
	top:0;left:0;right:0;
	z-index:100;
	width:100%;
	padding:22px 0;
}
.site-header.is-sticky{
	position:fixed;
	background:rgba(9,11,19,.95);
	backdrop-filter:blur(6px);
	padding:14px 0;
	box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;}
.site-branding{display:flex;align-items:center;gap:10px;}
.site-branding img.custom-logo{max-height:48px;width:auto;}
.site-branding .logo-icon{
	width:38px;height:38px;border-radius:6px;
	background:var(--color-gold);
	display:flex;align-items:center;justify-content:center;
	font-family:var(--font-heading);font-weight:800;color:var(--color-navy);font-size:20px;
}
.site-title{font-size:18px;font-weight:800;color:var(--color-white);letter-spacing:.03em;margin:0;line-height:1.1;}
.site-title span{display:block;font-size:11px;font-weight:600;color:var(--color-gold);letter-spacing:.15em;}
.site-title a{color:inherit;}

.main-navigation{display:flex;align-items:center;}
.main-navigation ul{display:flex;gap:32px;}
.main-navigation a{
	color:var(--color-white);
	font-size:14px;
	font-weight:500;
	padding:6px 2px;
	position:relative;
}
.main-navigation a::after{
	content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--color-gold);transition:var(--transition);
}
.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after{width:100%;}
.menu-toggle{
	display:none;background:transparent;border:0;color:var(--color-white);font-size:26px;
}

/* =============================================================
   4. HERO SECTION
   ============================================================= */
.hero-section{
	position:relative;
	min-height:640px;
	display:flex;align-items:center;justify-content:center;
	text-align:center;
	background-color:var(--color-navy);
	background-size:cover;background-position:center;
	padding:180px 20px 100px;
}
.hero-section::before{
	content:'';position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(9,11,19,.65) 0%,rgba(9,11,19,.85) 100%);
	z-index:0;
}
.hero-inner{position:relative;z-index:1;max-width:900px;margin:0 auto;}
.hero-inner h1{
	color:var(--color-white);
	font-size:56px;
	text-transform:uppercase;
	letter-spacing:.02em;
	margin-bottom:22px;
}
.hero-inner p{
	color:#d9d9e2;
	font-size:19px;
	max-width:700px;
	margin:0 auto 36px;
}
.hero-buttons{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}

/* =============================================================
   5. FEATURE / HIGHLIGHT CARDS (below hero)
   ============================================================= */
.feature-cards{margin-top:-90px;position:relative;z-index:5;padding-bottom:70px;}
.feature-cards .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.feature-card{
	background:var(--color-white);
	border-radius:var(--radius-card);
	overflow:hidden;
	box-shadow:var(--shadow-card);
	transition:var(--transition);
}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);}
.feature-card .card-media{height:220px;overflow:hidden;}
.feature-card .card-media img{width:100%;height:100%;object-fit:cover;transition:var(--transition);}
.feature-card:hover .card-media img{transform:scale(1.06);}
.feature-card .card-body{padding:22px 24px 26px;}
.feature-card .card-body h3{
	display:flex;align-items:center;justify-content:space-between;
	font-size:19px;color:var(--color-text-dark);
}
.feature-card .card-body h3 .icon{
	width:34px;height:34px;border-radius:50%;background:var(--color-off-white);
	display:flex;align-items:center;justify-content:center;color:var(--color-gold);font-size:15px;flex-shrink:0;
}
.feature-card .card-body p{color:var(--color-text-muted);font-size:14.5px;margin-top:8px;}

/* =============================================================
   6. SHOP BY CATEGORY
   ============================================================= */
.section-title{text-align:center;font-size:32px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:44px;}
.section-title.on-dark{color:var(--color-white);}
.category-section{padding:80px 0;background:var(--color-white);}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.category-card{
	display:flex;align-items:center;justify-content:space-between;
	background:var(--color-white);
	border:1px solid var(--color-border);
	border-radius:var(--radius-card);
	padding:26px 24px;
	box-shadow:var(--shadow-card);
	transition:var(--transition);
}
.category-card:hover{border-color:var(--color-gold);box-shadow:var(--shadow-card-hover);transform:translateY(-4px);}
.category-card h3{font-size:17px;margin:0;}
.category-card .cat-icon{width:56px;height:56px;object-fit:contain;flex-shrink:0;margin-left:14px;}
.category-card .cat-icon.fa-fallback{
	width:56px;height:56px;border-radius:8px;background:var(--color-off-white);
	display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--color-gold);
}

/* =============================================================
   7. FEATURED PC BUILDS
   ============================================================= */
.builds-section{padding:80px 0;background:var(--color-off-white);}
.builds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.build-card{background:var(--color-white);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);transition:var(--transition);}
.build-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);}
.build-card .card-media{height:240px;overflow:hidden;background:var(--color-navy);}
.build-card .card-media img{width:100%;height:100%;object-fit:cover;}
.build-card .card-body{padding:20px 22px 26px;}
.build-card .build-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.build-card .build-title-row h3{font-size:19px;margin:0;}
.build-card .build-price{color:var(--color-gold);font-weight:700;font-size:19px;}
.build-card p{color:var(--color-text-muted);font-size:14px;margin:0;}

/* =============================================================
   8. ABOUT SECTION
   ============================================================= */
.about-section{padding:90px 0;}
.about-section h2{text-align:center;font-size:30px;text-transform:uppercase;margin-bottom:36px;}
.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:start;}
.about-grid p{color:var(--color-text-muted);font-size:15.5px;}
.about-list li{
	display:flex;gap:12px;margin-bottom:18px;font-size:15px;color:var(--color-text-dark);
}
.about-list li .dot{
	width:10px;height:10px;border-radius:50%;background:var(--color-gold);margin-top:7px;flex-shrink:0;
}
.about-list li strong{display:block;margin-bottom:2px;}

/* =============================================================
   9. TESTIMONIALS
   ============================================================= */
.testimonial-section{background:var(--color-navy);padding:80px 0;color:var(--color-white);}
.testimonial-slider{position:relative;display:flex;align-items:center;gap:18px;}
.testimonial-track{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;flex:1;overflow:hidden;}
.testimonial-card{
	background:#171b30;border:1px solid #262b47;border-radius:var(--radius-card);
	padding:26px 24px;
}
.testimonial-card .stars{color:var(--color-gold);font-size:14px;margin-bottom:14px;}
.testimonial-card p{color:#c6c6d4;font-size:14.5px;font-style:italic;margin-bottom:20px;}
.testimonial-author{display:flex;align-items:center;gap:12px;}
.testimonial-author img{width:42px;height:42px;border-radius:50%;object-fit:cover;}
.testimonial-author span{font-weight:600;font-size:14px;}
.slider-arrow{
	background:transparent;border:1px solid #3a3f5c;color:var(--color-white);
	width:42px;height:42px;border-radius:50%;flex-shrink:0;font-size:16px;
}
.slider-arrow:hover{background:var(--color-gold);border-color:var(--color-gold);color:var(--color-navy);}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:30px;}
.slider-dots span{width:8px;height:8px;border-radius:50%;background:#3a3f5c;}
.slider-dots span.active{background:var(--color-gold);}

/* =============================================================
   10. MEET THE TEAM
   ============================================================= */
.team-section{padding:90px 0;}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;}
.team-member{display:flex;gap:24px;align-items:flex-start;}
.team-member img{width:150px;height:150px;object-fit:cover;border-radius:var(--radius-card);flex-shrink:0;}
.team-member h3{font-size:19px;margin-bottom:8px;}
.team-member p{color:var(--color-text-muted);font-size:14.5px;}

/* =============================================================
   11. STORE LOCATION / MAP
   ============================================================= */
.location-section{padding-bottom:90px;}
.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);}
.location-grid .map-embed{min-height:420px;}
.location-grid .map-embed iframe{width:100%;height:100%;min-height:420px;border:0;display:block;}
.store-info{background:var(--color-white);padding:40px;display:flex;flex-direction:column;justify-content:center;}
.store-info .store-photo{border-radius:var(--radius-card);overflow:hidden;margin-bottom:24px;height:200px;}
.store-info .store-photo img{width:100%;height:100%;object-fit:cover;}
.store-info h3{font-size:20px;text-transform:uppercase;margin-bottom:14px;}
.store-info p{font-size:14.5px;color:var(--color-text-muted);margin-bottom:6px;}
.store-info p i{color:var(--color-gold);width:18px;}

/* =============================================================
   12. FOOTER
   ============================================================= */
.site-footer{background:var(--color-bg-darker);color:#a9a9b8;padding:70px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:50px;border-bottom:1px solid #22263c;}
.footer-brand .site-branding{margin-bottom:14px;}
.footer-brand .site-title{color:var(--color-white);}
.footer-brand p{font-size:13.5px;color:#8a8a9a;}
.footer-col h4{color:var(--color-white);font-size:15px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:18px;}
.footer-col ul li{margin-bottom:10px;}
.footer-col a{font-size:13.5px;color:#a9a9b8;}
.footer-col a:hover{color:var(--color-gold);}
.footer-col p{font-size:13.5px;margin-bottom:10px;}
.payment-icons,.social-icons{display:flex;gap:10px;flex-wrap:wrap;}
.payment-icons span,.social-icons a{
	width:36px;height:32px;border-radius:4px;background:#171b30;
	display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--color-white);
}
.social-icons a{border-radius:50%;width:36px;height:36px;}
.social-icons a:hover{background:var(--color-gold);color:var(--color-navy);}
.footer-bottom{text-align:center;padding:22px 0;font-size:13px;color:#6c6c7c;}

/* =============================================================
   13. WIDGETS / ARCHIVE / SINGLE / SEARCH / 404 (inner pages)
   ============================================================= */
.page-header-band{background:var(--color-navy);padding:160px 0 60px;text-align:center;}
.page-header-band h1{color:var(--color-white);font-size:38px;text-transform:uppercase;}
.content-area{padding:70px 0;}
.content-wrap{display:grid;grid-template-columns:2.3fr 1fr;gap:50px;}
.widget{margin-bottom:36px;}
.widget h2,.widget-title{font-size:17px;text-transform:uppercase;margin-bottom:16px;border-bottom:2px solid var(--color-gold);padding-bottom:10px;}
.entry-card{margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--color-border);}
.entry-card .entry-thumb{border-radius:var(--radius-card);overflow:hidden;margin-bottom:18px;}
.entry-card h2{font-size:24px;margin-bottom:10px;}
.entry-meta{font-size:13px;color:var(--color-text-muted);margin-bottom:12px;}
.pagination{display:flex;gap:8px;margin-top:20px;}
.pagination a,.pagination span{padding:8px 14px;border:1px solid var(--color-border);border-radius:4px;font-size:14px;}
.pagination .current{background:var(--color-navy);color:var(--color-white);border-color:var(--color-navy);}
.error-404{text-align:center;padding:120px 20px;}
.error-404 h1{font-size:110px;color:var(--color-gold);margin-bottom:0;}
.comment-form input,.comment-form textarea{
	width:100%;padding:12px 14px;border:1px solid var(--color-border);border-radius:4px;margin-bottom:16px;font-family:var(--font-body);
}
.comment-form textarea{min-height:140px;}

/* =============================================================
   14. RESPONSIVE
   ============================================================= */
@media(max-width:1024px){
	.feature-cards .grid-3,.category-grid,.builds-grid{grid-template-columns:repeat(2,1fr);}
	.about-grid,.location-grid,.team-grid,.content-wrap{grid-template-columns:1fr;}
	.footer-grid{grid-template-columns:repeat(3,1fr);}
	.testimonial-track{grid-template-columns:1fr;}
	.hero-inner h1{font-size:42px;}
}
@media(max-width:782px){
	.main-navigation{
		position:fixed;top:0;right:-100%;width:280px;height:100vh;
		background:var(--color-navy);flex-direction:column;padding:100px 30px;
		transition:var(--transition);z-index:200;
	}
	.main-navigation.is-open{right:0;}
	.main-navigation ul{flex-direction:column;gap:22px;}
	.menu-toggle{display:block;}
	.category-grid,.footer-grid{grid-template-columns:repeat(2,1fr);}
	.hero-inner h1{font-size:32px;}
	.hero-section{padding:150px 16px 80px;min-height:auto;}
	.feature-cards .grid-3,.builds-grid{grid-template-columns:1fr;}
	.team-member{flex-direction:column;}
	.team-member img{width:100%;height:220px;}
}
@media(max-width:480px){
	.category-grid,.footer-grid{grid-template-columns:1fr;}
	.hero-buttons{flex-direction:column;align-items:center;}
	.section-title{font-size:24px;}
}

/* =========================================================
   PATCH: Missing / Fixed Styles (added by theme fix pass)
   ========================================================= */

/* Testimonial avatar circle */
.testimonial-card .testimonial-top {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
}

.testimonial-card .testimonial-avatar {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-gold), #f0c674);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a1a1a;
	font-weight: 700;
	font-size: 1.1rem;
	overflow: hidden;
	flex-shrink: 0;
}

.testimonial-card .testimonial-avatar img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	display: block;
}

.testimonial-card .testimonial-info {
	flex: 1;
}

.testimonial-card .testimonial-name {
	font-size: 0.875rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 4px;
	line-height: 1;
}

.testimonial-card .stars {
	color: #f5a623;
	font-size: 0.78rem;
	letter-spacing: 1px;
	display: flex;
	gap: 2px;
}

.testimonial-card .testimonial-text {
	font-size: 0.875rem;
	color: #555;
	line-height: 1.65;
	font-style: italic;
	margin-bottom: 12px;
}

.testimonial-card .testimonial-author {
	font-size: 0.8rem;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0;
}

/* Team member info wrapper */
.team-member .team-member-info {
	flex: 1;
}

.team-member .team-member-info h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 6px;
}

.team-member .team-role {
	font-size: 0.85rem;
	color: var(--color-gold);
	font-weight: 600;
	margin-bottom: 10px;
}

.team-member .team-photo-placeholder {
	width: 140px;
	min-width: 140px;
	height: 170px;
	background: linear-gradient(135deg, #bdc3c7, #95a5a6);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.6);
	font-size: 2.5rem;
}

/* Build card price */
.build-title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 8px;
}

.build-title-row h3 {
	font-size: 1rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
}

.build-title-row h3 a {
	color: #1a1a1a;
	text-decoration: none;
}

.build-price {
	font-size: 1rem;
	font-weight: 700;
	color: #1a1a1a;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Placeholder for missing images */
.shzb-placeholder {
	background: linear-gradient(135deg, #e5e5ea, #f5f5f7);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 200px;
}

/* Card media consistent height */
.build-card .card-media {
	overflow: hidden;
	height: 220px;
}

.build-card .card-media img,
.build-card .card-media .shzb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* About list bullets */
.about-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 0.9rem;
	color: #555;
	line-height: 1.6;
}

.about-list .dot {
	width: 8px;
	height: 8px;
	min-width: 8px;
	border-radius: 50%;
	background: #1a1a1a;
	margin-top: 6px;
	display: inline-block;
}

/* Section title on dark background */
.section-title.on-dark,
.testimonial-section .section-title,
.builds-section .section-title,
.category-section .section-title {
	color: #ffffff;
}

/* Elementor canvas: remove default page padding */
.elementor-page.elementor-page-edit .site-main,
body.elementor-editor-active .site-main {
	padding: 0;
	margin: 0;
}

/* Ensure Elementor sections go full-width */
.elementor-section-full_width > .elementor-container {
	max-width: 100%;
}