/**
 * PCBUILDERS.LK - Cyber-Luxury Gaming Homepage Redesign CSS
 * Version: 2.0.0
 */

:root {
    --pcb-bg-dark: #07080B;
    --pcb-bg-surface: #0E1118;
    --pcb-bg-card: #141722;
    --pcb-bg-card-hover: #1A1E2C;
    --pcb-border-subtle: rgba(255, 255, 255, 0.08);
    --pcb-border-glow: rgba(168, 85, 247, 0.4);
    
    --pcb-purple-primary: #8A2BE2;
    --pcb-purple-glow: #A855F7;
    --pcb-purple-soft: rgba(168, 85, 247, 0.15);
    
    --pcb-cyan: #00F2FE;
    --pcb-cyan-glow: rgba(0, 242, 254, 0.35);
    
    --pcb-gold: #F59E0B;
    --pcb-gold-glow: rgba(245, 158, 11, 0.3);
    
    --pcb-red: #FF3838;
    --pcb-red-glow: rgba(255, 56, 56, 0.35);

    --pcb-text-main: #FFFFFF;
    --pcb-text-secondary: #CBD5E1;
    --pcb-text-muted: #94A3B8;

    --pcb-font-head: 'Rajdhani', -apple-system, sans-serif;
    --pcb-font-body: 'Outfit', 'Inter', -apple-system, sans-serif;
}

/* Reset and wrapper */
.pcb-redesign-wrap {
    font-family: var(--pcb-font-body);
    background-color: var(--pcb-bg-dark);
    color: var(--pcb-text-main);
    padding-bottom: 60px;
    overflow-x: hidden;
    position: relative;
}

.pcb-redesign-wrap * {
    box-sizing: border-box;
}

.pcb-container {
    max-width: 1410px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* Section Header Typography */
.pcb-section-head,
.pcb-section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    margin-bottom: 24px !important;
    position: relative !important;
    width: 100% !important;
}

.pcb-section-badge {
    font-family: var(--pcb-font-head, 'Rajdhani', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--pcb-purple-glow, #A855F7) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.pcb-section-badge::before {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--pcb-purple-glow, #A855F7) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px var(--pcb-purple-glow, #A855F7), 0 0 20px var(--pcb-purple-glow, #A855F7) !important;
}

.pcb-section-title {
    font-family: var(--pcb-font-head, 'Rajdhani', sans-serif) !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    color: #FFFFFF !important;
}

.pcb-section-title span,
.pcb-section-title .gradient-text {
    background: linear-gradient(135deg, #A855F7 0%, #00F2FE 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 900 !important;
    display: inline-block !important;
}

.pcb-section-link,
.pcb-view-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    border-radius: 12px !important;
    background: rgba(168, 85, 247, 0.12) !important;
    border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
    color: #E9D5FF !important;
    font-family: var(--pcb-font-head, 'Rajdhani', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.pcb-section-link:hover,
.pcb-view-all:hover {
    background: linear-gradient(135deg, #8A2BE2 0%, #A855F7 100%) !important;
    border-color: #A855F7 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.55), 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================
   1. CYBER-LUXURY HERO BENTO
   ========================================================== */
.pcb-hero-bento {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    grid-gap: 20px;
    margin-top: 14px;
    margin-bottom: 34px;
}

/* Main Showcase Tile */
.pcb-hero-main {
    background: linear-gradient(135deg, rgba(14, 17, 24, 0.95), rgba(20, 23, 34, 0.9));
    border: 1px solid var(--pcb-border-subtle);
    border-radius: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 480px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.pcb-hero-main::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.pcb-hero-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.35);
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: var(--pcb-font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #E2E8F0;
    text-transform: uppercase;
    width: fit-content;
}

.pcb-hero-title {
    font-family: var(--pcb-font-head);
    font-size: 46px;
    font-weight: 900;
    line-height: 1.1;
    margin: 18px 0 14px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pcb-hero-title .gradient-text {
    background: linear-gradient(90deg, #FFFFFF 20%, var(--pcb-purple-glow) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pcb-hero-text-content {
    max-width: 58%;
    position: relative;
    z-index: 3;
}

.pcb-hero-desc {
    color: var(--pcb-text-secondary);
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 460px;
    margin: 0 0 24px 0 !important;
    text-align: left !important;
}

.pcb-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
}

.pcb-hero-main .pcb-btn-primary,
.pcb-btn-primary {
    background: linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #6366F1 100%) !important;
    color: #FFFFFF !important;
    font-family: var(--pcb-font-head) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 13px 28px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.45) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.3s ease !important;
}

.pcb-hero-main .pcb-btn-primary:hover,
.pcb-btn-primary:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 12px 32px rgba(168, 85, 247, 0.7) !important;
    color: #FFFFFF !important;
}

.pcb-btn-outline {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-family: var(--pcb-font-head);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 13px 26px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.pcb-btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    transform: translateY(-3px);
}

.pcb-hero-rig-preview {
    position: absolute;
    right: 25px;
    bottom: 25px;
    max-width: 320px;
    max-height: 380px;
    object-fit: contain;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 25px rgba(168, 85, 247, 0.4));
    pointer-events: none;
    transition: transform 0.4s ease;
}

.pcb-hero-main:hover .pcb-hero-rig-preview {
    transform: scale(1.04) translateY(-6px);
}

/* Side Bento Column */
.pcb-hero-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* PC Coins VIP Bento Card - Full Gold Coins Banner Background */
.pcb-tile-coins {
    background-color: #0E0C09 !important;
    background-image: 
        linear-gradient(95deg, rgba(10, 8, 6, 0.95) 0%, rgba(14, 11, 8, 0.88) 42%, rgba(16, 12, 8, 0.42) 70%, rgba(16, 12, 8, 0.15) 100%),
        url('https://pcbuilders.lk/wp-content/themes/razox/assets/images/bento/coins-banner-bg.jpg?v=2') !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    border-radius: 20px !important;
    padding: 24px 26px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(251, 191, 36, 0.4) !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pcb-tile-coins:hover {
    border-color: rgba(245, 158, 11, 0.85) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 48px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(251, 191, 36, 0.6) !important;
    background-image: 
        linear-gradient(95deg, rgba(10, 8, 6, 0.9) 0%, rgba(14, 11, 8, 0.8) 42%, rgba(16, 12, 8, 0.3) 70%, rgba(16, 12, 8, 0.05) 100%),
        url('https://pcbuilders.lk/wp-content/themes/razox/assets/images/bento/coins-banner-bg.jpg?v=2') !important;
}

.pcb-coins-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative !important;
    z-index: 2 !important;
    max-width: 62% !important;
}

.pcb-coins-tag {
    font-family: var(--pcb-font-head);
    font-size: 13px;
    font-weight: 800;
    color: var(--pcb-gold);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8) !important;
}

.pcb-coins-body {
    position: relative !important;
    z-index: 2 !important;
    max-width: 62% !important;
}

.pcb-coins-body h3 {
    font-family: var(--pcb-font-head) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    margin: 10px 0 6px 0 !important;
    color: #FFFFFF !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85) !important;
}

.pcb-coins-body p {
    color: #E2E8F0 !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8) !important;
}

.pcb-coins-badge-bar {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.pcb-coin-pill {
    background: rgba(245, 158, 11, 0.16) !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    padding: 5px 11px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #FCD34D !important;
    backdrop-filter: blur(10px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.25s ease !important;
}

.pcb-tile-coins:hover .pcb-coin-pill {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: rgba(245, 158, 11, 0.75) !important;
    color: #FFFFFF !important;
}

/* Installments BNPL Bento Card - KOKO & PAYZY Background */
.pcb-tile-bnpl {
    background-color: #080D18 !important;
    background-image: 
        linear-gradient(95deg, rgba(6, 10, 18, 0.95) 0%, rgba(8, 13, 24, 0.9) 45%, rgba(10, 18, 34, 0.42) 68%, rgba(10, 18, 34, 0.1) 100%),
        url('https://pcbuilders.lk/wp-content/themes/razox/assets/images/bento/bnpl-banner-bg.jpg?v=2') !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
    border-radius: 20px !important;
    padding: 22px 26px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex: 0.9 !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(103, 232, 249, 0.4) !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pcb-tile-bnpl:hover {
    border-color: rgba(6, 182, 212, 0.85) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 48px rgba(6, 182, 212, 0.3), inset 0 1px 0 rgba(103, 232, 249, 0.6) !important;
    background-image: 
        linear-gradient(95deg, rgba(6, 10, 18, 0.9) 0%, rgba(8, 13, 24, 0.82) 45%, rgba(10, 18, 34, 0.32) 68%, rgba(10, 18, 34, 0.05) 100%),
        url('https://pcbuilders.lk/wp-content/themes/razox/assets/images/bento/bnpl-banner-bg.jpg?v=2') !important;
}

.pcb-bnpl-info {
    position: relative !important;
    z-index: 2 !important;
    max-width: 62% !important;
}

.pcb-bnpl-info h4 {
    font-family: var(--pcb-font-head) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    margin: 0 0 6px 0 !important;
    color: #FFFFFF !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85) !important;
}

.pcb-bnpl-info p {
    color: #CBD5E1 !important;
    font-size: 13px !important;
    margin: 0 0 10px 0 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8) !important;
}

.pcb-bnpl-logos {
    display: flex;
    gap: 10px;
}

.pcb-bnpl-pill {
    background: rgba(6, 182, 212, 0.16) !important;
    border: 1px solid rgba(6, 182, 212, 0.45) !important;
    padding: 5px 11px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #22D3EE !important;
    backdrop-filter: blur(10px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.25s ease !important;
}

.pcb-tile-bnpl:hover .pcb-bnpl-pill {
    background: rgba(6, 182, 212, 0.3) !important;
    border-color: rgba(6, 182, 212, 0.75) !important;
    color: #FFFFFF !important;
}

/* ==========================================================
   2. TRUST PILLARS BAR
   ========================================================== */
.pcb-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 16px;
    margin-bottom: 40px;
}

.pcb-trust-item {
    background: var(--pcb-bg-surface);
    border: 1px solid var(--pcb-border-subtle);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.pcb-trust-item:hover {
    border-color: var(--pcb-purple-glow);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.pcb-trust-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--pcb-purple-soft);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: var(--pcb-purple-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pcb-trust-icon svg {
    width: 22px;
    height: 22px;
}

.pcb-trust-title {
    font-family: var(--pcb-font-head);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 2px;
}

.pcb-trust-desc {
    font-size: 12px;
    color: var(--pcb-text-muted);
}

/* ==========================================================
   3. INTERACTIVE RIG & BUDGET MATCHER
   ========================================================== */
.pcb-matcher-wrap {
    background: linear-gradient(135deg, rgba(14, 17, 24, 0.95), rgba(20, 24, 36, 0.9));
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 28px 32px;
    margin-bottom: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.pcb-matcher-info h3 {
    font-family: var(--pcb-font-head);
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    color: #FFFFFF !important;
}

.pcb-matcher-info h3 span {
    color: var(--pcb-cyan);
}

.pcb-matcher-info p {
    color: var(--pcb-text-secondary);
    font-size: 13.5px;
    margin: 0;
}

.pcb-matcher-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pcb-budget-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pcb-border-subtle);
    color: #CBD5E1;
    font-family: var(--pcb-font-head);
    font-size: 14px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.pcb-budget-btn:hover,
.pcb-budget-btn.active {
    background: linear-gradient(135deg, #7C3AED, #A855F7);
    border-color: #A855F7;
    color: #FFFFFF;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}

/* ==========================================================
   4. TABBED PRODUCT SHOWCASE & CARDS
   ========================================================== */
.pcb-tabs-bar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 24px;
    scrollbar-width: none;
}

.pcb-tabs-bar::-webkit-scrollbar {
    display: none;
}

.pcb-tab-btn {
    background: var(--pcb-bg-surface);
    border: 1px solid var(--pcb-border-subtle);
    color: var(--pcb-text-secondary);
    font-family: var(--pcb-font-head);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.pcb-tab-btn:hover {
    color: #FFFFFF;
    border-color: rgba(168, 85, 247, 0.5);
}

.pcb-tab-btn.active {
    background: var(--pcb-purple-primary);
    border-color: var(--pcb-purple-glow);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.45);
}

/* Product Grid */
.pcb-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    grid-gap: 20px;
    margin-bottom: 48px;
}

/* Modern Cyber-Luxury Product Card */
.pcb-card {
    background: linear-gradient(180deg, #11141E 0%, #090C12 100%) !important;
    border: 1px solid #1E2330 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 460px !important;
    position: relative !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease !important;
}

.pcb-card:hover {
    transform: translateY(-6px) !important;
    border-color: #8A2BE2 !important;
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.85), 0 0 22px rgba(138, 43, 226, 0.35) !important;
}

/* Specular top rim shine */
.pcb-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    z-index: 3;
    pointer-events: none;
}

.pcb-card:hover::before {
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.8), transparent);
}

/* Product Image Canvas */
.pcb-card-img-wrap {
    background: radial-gradient(circle at 50% 50%, #151A26 0%, #080B10 85%) !important;
    height: 195px !important;
    position: relative !important;
    padding: 14px !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pcb-card-img-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
}

.pcb-card-img-wrap img {
    max-height: 160px !important;
    max-width: 88% !important;
    width: auto !important;
    object-fit: contain !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)) !important;
}

.pcb-card:hover .pcb-card-img-wrap img {
    transform: scale(1.07) !important;
}

/* Floating Status Badges (Absolute, Never Interferes With Image) */
.pcb-card-badges {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.pcb-stock-tag {
    position: static !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    backdrop-filter: blur(8px) !important;
    margin: 0 !important;
}

.pcb-stock-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.pcb-stock-tag.in-stock {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #10B981 !important;
}
.pcb-stock-tag.in-stock .pcb-stock-dot {
    background: #10B981 !important;
    box-shadow: 0 0 6px #10B981 !important;
}

.pcb-stock-tag.low-stock {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #F59E0B !important;
}
.pcb-stock-tag.low-stock .pcb-stock-dot {
    background: #F59E0B !important;
    box-shadow: 0 0 6px #F59E0B !important;
}

.pcb-stock-tag.pre-order {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    color: #3B82F6 !important;
}
.pcb-stock-tag.pre-order .pcb-stock-dot {
    background: #3B82F6 !important;
    box-shadow: 0 0 6px #3B82F6 !important;
}

.pcb-discount-badge {
    position: static !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    background: linear-gradient(135deg, #7C3AED 0%, #A21CAF 100%) !important;
    color: #FFFFFF !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35) !important;
    margin-left: auto !important;
    display: inline-block !important;
}

/* Card Body */
.pcb-card-body {
    padding: 14px 14px 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.pcb-card-category {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #64748B !important;
    margin-bottom: 5px !important;
    display: block !important;
}

.pcb-card-title {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    min-height: 40px !important;
    margin: 0 0 10px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.pcb-card-title a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.pcb-card:hover .pcb-card-title a {
    color: #C084FC !important;
}

/* Price & BNPL Footer */
.pcb-card-footer {
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.pcb-price-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
}

.pcb-current-price {
    font-family: 'Rajdhani', -apple-system, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.pcb-current-price .pcb-curr {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #C084FC !important;
    margin-right: 2px !important;
}

.pcb-old-price {
    font-size: 12px !important;
    color: #718096 !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.pcb-old-price .pcb-curr-old {
    font-size: 10px !important;
}

/* Modern KOKO Pill */
.pcb-koko-pill, .pcb-installment-pill {
    background: rgba(38, 208, 124, 0.08) !important;
    border: 1px solid rgba(38, 208, 124, 0.22) !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    color: #94A3B8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pcb-koko-pill strong, .pcb-installment-pill strong {
    color: #26D07C !important;
    font-weight: 700 !important;
}

.pcb-koko-badge {
    background: #26D07C !important;
    color: #06080C !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* High-Voltage Add to Cart Button */
.pcb-card-btn {
    width: 100% !important;
    background: rgba(168, 85, 247, 0.12) !important;
    border: 1px solid rgba(168, 85, 247, 0.38) !important;
    color: #FFFFFF !important;
    font-family: 'Rajdhani', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.pcb-card-btn:hover {
    background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%) !important;
    border-color: rgba(216, 180, 254, 0.6) !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45), 0 0 12px rgba(168, 85, 247, 0.3) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.pcb-card-btn:active {
    transform: translateY(0) !important;
}

/* ==========================================================
   5. VISUAL CATEGORY BENTO
   ========================================================== */
.pcb-category-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 16px;
    margin-bottom: 48px;
}

.pcb-cat-tile {
    background: var(--pcb-bg-surface);
    border: 1px solid var(--pcb-border-subtle);
    border-radius: 16px;
    padding: 20px 14px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pcb-cat-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--pcb-purple-glow);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pcb-cat-tile:hover {
    transform: translateY(-5px);
    border-color: var(--pcb-purple-glow);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 18px rgba(168, 85, 247, 0.2);
}

.pcb-cat-tile:hover::before {
    opacity: 1;
}

.pcb-cat-img-box {
    width: 90px;
    height: 90px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pcb-cat-img-box img {
    max-width: 85px;
    max-height: 85px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.pcb-cat-tile:hover .pcb-cat-img-box img {
    transform: scale(1.1);
}

.pcb-cat-name {
    font-family: var(--pcb-font-head);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    margin-bottom: 6px;
}

.pcb-cat-count {
    font-size: 11px;
    color: var(--pcb-text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 8px;
    border-radius: 9999px;
}

/* ==========================================================
   6. LIVE DEALS OF THE DAY BENTO
   ========================================================== */
.pcb-deals-bento {
    background: linear-gradient(135deg, rgba(26, 12, 12, 0.95), rgba(18, 14, 20, 0.95));
    border: 1px solid rgba(255, 56, 56, 0.35);
    border-radius: 20px;
    padding: 36px 40px;
    margin-bottom: 48px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 56, 56, 0.15);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-gap: 36px;
    align-items: center;
}

.pcb-deals-header-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 56, 56, 0.15);
    border: 1px solid rgba(255, 56, 56, 0.4);
    color: #FF6B6B;
    font-family: var(--pcb-font-head);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 9999px;
    margin-bottom: 14px;
}

.pcb-deals-title {
    font-family: var(--pcb-font-head);
    font-size: 38px;
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 14px 0;
    text-transform: uppercase;
    color: #FFFFFF !important;
}

.pcb-deals-title span {
    color: var(--pcb-red);
}

.pcb-deals-desc {
    color: var(--pcb-text-secondary);
    font-size: 14.5px;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Timer Grid */
.pcb-timer-grid {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.pcb-timer-box {
    background: linear-gradient(180deg, #2D1414, #1B0C0C);
    border: 1px solid rgba(255, 56, 56, 0.35);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: center;
    min-width: 68px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.pcb-timer-num {
    font-family: var(--pcb-font-head);
    font-size: 28px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1;
}

.pcb-timer-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #FF8787;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Deals Product Card Inside Bento */
.pcb-deal-card {
    position: relative;
    background: var(--pcb-bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.pcb-deal-card-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    flex-shrink: 0;
}

.pcb-deal-card-info {
    position: relative;
    flex-grow: 1;
}

.pcb-deal-card-info .pcb-stock-tag {
    position: static;
    display: inline-block;
    margin-bottom: 8px;
}

.pcb-deal-card-info h4 {
    font-family: var(--pcb-font-head);
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 8px 0;
    line-height: 1.3;
    color: #FFFFFF !important;
}

.pcb-progress-bar-wrap {
    margin: 12px 0 16px 0;
}

.pcb-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--pcb-text-muted);
    margin-bottom: 5px;
}

.pcb-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    overflow: hidden;
}

.pcb-progress-fill {
    height: 100%;
    width: 75%;
    background: linear-gradient(90deg, #FF3838, #FF7676);
    border-radius: 9999px;
}

/* ==========================================================
   7. COMMUNITY SOCIAL PROOF & REVIEWS
   ========================================================== */
.pcb-reviews-section {
    margin-top: 24px !important;
    margin-bottom: 72px !important;
}

/* Reviews Header Rating Capsule */
.pcb-rating-summary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(14, 17, 24, 0.9) !important;
    border: 1px solid rgba(168, 85, 247, 0.35) !important;
    border-radius: 30px !important;
    padding: 8px 20px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
    white-space: nowrap !important;
}

.pcb-rating-score {
    font-family: var(--pcb-font-head, 'Rajdhani', sans-serif) !important;
    font-weight: 900 !important;
    font-size: 19px !important;
    color: #FFFFFF !important;
    letter-spacing: 0.5px !important;
}

.pcb-rating-stars,
.pcb-review-stars,
.pcb-stars {
    color: #F59E0B !important;
    font-size: 15px !important;
    letter-spacing: 2.5px !important;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.5) !important;
    line-height: 1 !important;
}

.pcb-rating-count {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--pcb-text-muted, #94A3B8) !important;
}

/* Review Cards Grid */
.pcb-reviews-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 22px !important;
    margin-bottom: 24px !important;
}

.pcb-review-card {
    background: linear-gradient(145deg, rgba(14, 17, 24, 0.95), rgba(20, 23, 34, 0.85)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    padding: 26px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 16px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
    overflow: hidden !important;
}

.pcb-review-card:hover {
    border-color: rgba(168, 85, 247, 0.5) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(168, 85, 247, 0.2) !important;
}

.pcb-review-card::before {
    content: '"';
    position: absolute;
    top: 10px;
    right: 20px;
    font-family: serif;
    font-size: 72px;
    line-height: 1;
    color: rgba(168, 85, 247, 0.07);
    pointer-events: none;
}

.pcb-review-text {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #CBD5E1 !important;
    font-style: italic !important;
    margin: 0 !important;
    position: relative;
    z-index: 1;
}

.pcb-reviewer,
.pcb-reviewer-info {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
}

.pcb-reviewer-avatar,
.pcb-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #8A2BE2 0%, #00F2FE 100%) !important;
    color: #FFFFFF !important;
    font-family: var(--pcb-font-head, 'Rajdhani', sans-serif) !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 16px rgba(138, 43, 226, 0.45) !important;
    flex-shrink: 0 !important;
}

.pcb-reviewer-name {
    font-family: var(--pcb-font-head, 'Rajdhani', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
}

.pcb-reviewer-date {
    font-size: 12px !important;
    color: #00F2FE !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 600 !important;
}

/* ==========================================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================== */
@media (max-width: 1200px) {
    .pcb-category-bento {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .pcb-hero-bento {
        grid-template-columns: 1fr;
    }
    .pcb-trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .pcb-deals-bento {
        grid-template-columns: 1fr;
    }
    .pcb-reviews-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    /* Global Container */
    .pcb-redesign-wrap {
        padding: 12px 0 40px 0;
    }
    .pcb-container {
        padding: 0 12px;
    }

    /* Hero Bento */
    .pcb-hero-bento {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 18px;
    }
    .pcb-hero-main {
        padding: 22px 16px;
        min-height: auto;
        border-radius: 16px;
    }
    .pcb-hero-badge-pill {
        font-size: 11px;
        padding: 4px 10px;
        margin-bottom: 12px;
    }
    .pcb-hero-title {
        font-size: 28px;
        line-height: 1.15;
        margin-bottom: 10px;
    }
    .pcb-hero-desc {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 18px;
    }
    .pcb-hero-actions {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .pcb-hero-actions .pcb-btn-primary,
    .pcb-hero-actions .pcb-btn-outline {
        width: 100%;
        justify-content: center;
        padding: 13px 18px;
        font-size: 14px;
    }
    .pcb-hero-rig-preview {
        display: none;
    }

    /* PC Coins Banner Mobile */
    .pcb-coins-banner {
        padding: 18px 16px;
        border-radius: 16px;
    }
    .pcb-coins-title {
        font-size: 20px;
    }
    .pcb-coins-desc {
        font-size: 12.5px;
    }
    .pcb-coins-badge-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-top: 14px;
    }
    .pcb-coins-pill {
        padding: 6px 4px;
        font-size: 10px;
        text-align: center;
        justify-content: center;
    }

    /* BNPL Strip Mobile */
    .pcb-bnpl-strip {
        padding: 16px 14px;
        border-radius: 16px;
    }
    .pcb-bnpl-strip h4 {
        font-size: 15px;
    }
    .pcb-bnpl-strip p {
        font-size: 12px;
    }
    .pcb-bnpl-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .pcb-bnpl-pill {
        font-size: 10px;
        padding: 4px 8px;
    }

    /* Trust Strip: 2x2 Sleek Mobile Grid */
    .pcb-trust-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 22px;
    }
    .pcb-trust-item {
        padding: 12px 10px;
        gap: 8px;
        border-radius: 12px;
        align-items: flex-start;
    }
    .pcb-trust-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
    .pcb-trust-icon svg {
        width: 16px;
        height: 16px;
    }
    .pcb-trust-content h4 {
        font-size: 11px;
        font-weight: 800;
        margin-bottom: 2px;
        line-height: 1.25;
    }
    .pcb-trust-content p {
        font-size: 9.5px;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Budget Matcher: Horizontal Swipeable Pills */
    .pcb-budget-matcher {
        padding: 16px 14px;
        border-radius: 16px;
        margin-bottom: 24px;
    }
    .pcb-matcher-header h3 {
        font-size: 18px;
    }
    .pcb-matcher-header p {
        font-size: 12px;
    }
    .pcb-matcher-pills {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 8px;
        padding-bottom: 4px;
        margin-top: 12px;
    }
    .pcb-matcher-pills::-webkit-scrollbar {
        display: none;
    }
    .pcb-pill-btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px;
        padding: 7px 13px;
        border-radius: 20px;
    }

    /* Section Headers */
    .pcb-section-header {
        margin-bottom: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .pcb-section-title {
        font-size: 20px;
        line-height: 1.2;
    }
    .pcb-section-badge {
        font-size: 9.5px;
        padding: 2px 7px;
        margin-bottom: 3px;
    }
    .pcb-view-all {
        font-size: 12px;
        white-space: nowrap;
    }

    /* Horizontal Swipeable Tabs Bar */
    .pcb-tabs-bar {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 6px;
        padding-bottom: 6px;
        margin-bottom: 14px;
    }
    .pcb-tabs-bar::-webkit-scrollbar {
        display: none;
    }
    .pcb-tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px;
        padding: 7px 14px;
        border-radius: 20px;
    }

    /* Product Grid: 2-Column Compact Mobile Cards */
    .pcb-product-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 8px;
        margin-bottom: 24px;
    }
    .pcb-card {
        border-radius: 12px;
        min-height: auto;
        display: flex;
        flex-direction: column;
    }
    .pcb-card-img-wrap {
        height: 135px;
        padding: 8px;
    }
    .pcb-card-img-wrap img {
        max-height: 115px;
    }
    .pcb-card-badges {
        top: 6px !important;
        left: 6px !important;
        right: 6px !important;
    }
    .pcb-stock-tag {
        font-size: 8px !important;
        padding: 2px 5px !important;
        gap: 3px !important;
    }
    .pcb-stock-dot {
        width: 4px !important;
        height: 4px !important;
    }
    .pcb-warranty-tag {
        display: none !important;
    }
    .pcb-discount-badge {
        font-size: 8px !important;
        padding: 2px 5px !important;
    }
    .pcb-card-body {
        padding: 10px 8px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    .pcb-card-category {
        display: none;
    }
    .pcb-card-title {
        font-size: 12px;
        line-height: 1.35;
        height: 32px;
        margin-bottom: 6px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    .pcb-price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 5px;
    }
    .pcb-current-price {
        font-size: 14px;
    }
    .pcb-old-price {
        font-size: 10.5px;
    }
    .pcb-koko-pill, .pcb-installment-pill {
        font-size: 8.5px;
        padding: 3px 5px;
        margin: 4px 0 6px 0;
    }
    .pcb-koko-badge {
        font-size: 7.5px;
        padding: 0 3px;
    }
    .pcb-card-btn {
        font-size: 11px;
        padding: 7px 6px;
        height: 34px;
        border-radius: 8px;
        gap: 4px;
    }
    .pcb-card-btn svg {
        width: 13px;
        height: 13px;
    }

    /* Category Bento: 2-Column Responsive Tiles */
    .pcb-category-bento {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 24px;
    }
    .pcb-bento-tile {
        height: 120px;
        padding: 12px 10px;
        border-radius: 12px;
    }
    .pcb-bento-title {
        font-size: 13px;
        margin-bottom: 4px;
        line-height: 1.2;
    }
    .pcb-bento-sub {
        font-size: 9.5px;
        padding: 2px 6px;
    }
    .pcb-bento-art {
        width: 65px;
        height: 65px;
        right: 2px;
        bottom: 2px;
        opacity: 0.85;
    }

    /* Deals Bento Mobile */
    .pcb-deals-bento {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px 14px;
        border-radius: 16px;
        margin-bottom: 24px;
    }
    .pcb-deals-hero h2 {
        font-size: 22px;
    }
    .pcb-deals-hero p {
        font-size: 12px;
        margin-bottom: 14px;
    }
    .pcb-countdown-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-bottom: 14px;
    }
    .pcb-count-box {
        padding: 7px 3px;
        border-radius: 10px;
    }
    .pcb-count-num {
        font-size: 17px;
    }
    .pcb-count-label {
        font-size: 8.5px;
    }
    .pcb-deals-hero .pcb-btn-primary {
        width: 100%;
        justify-content: center;
        padding: 12px;
        font-size: 13px;
    }
    .pcb-deal-card {
        flex-direction: column;
        align-items: center;
        padding: 16px 12px;
        text-align: center;
        border-radius: 12px;
    }
    .pcb-deal-card-img {
        width: 120px;
        height: 120px;
        margin-bottom: 10px;
    }
    .pcb-deal-card-info {
        width: 100%;
    }
    .pcb-deal-card-info h4 {
        font-size: 13.5px;
        margin-bottom: 6px;
    }
    .pcb-deal-card-info .pcb-price-row {
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 8px;
    }
    .pcb-progress-bar-wrap {
        margin: 10px 0 14px 0;
    }
    .pcb-progress-labels {
        font-size: 10.5px;
    }
    .pcb-deal-card-info .pcb-card-btn {
        width: 100%;
        justify-content: center;
        height: 40px;
        font-size: 13px;
    }

    /* Customer Reviews Mobile */
    .pcb-reviews-section .pcb-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }
    .pcb-reviews-section .pcb-rating-summary {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: space-between !important;
        padding: 8px 16px !important;
        box-sizing: border-box !important;
    }
    .pcb-reviews-section .pcb-rating-score {
        font-size: 16px !important;
    }
    .pcb-reviews-section .pcb-rating-stars {
        font-size: 13px !important;
        letter-spacing: 1.5px !important;
    }
    .pcb-reviews-section .pcb-rating-count {
        font-size: 11.5px !important;
    }
    .pcb-reviews-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-bottom: 24px !important;
    }
    .pcb-review-card {
        padding: 20px 18px !important;
        border-radius: 14px !important;
    }
    .pcb-review-text {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        margin-bottom: 14px !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    .pcb-reviewer-name {
        font-size: 14.5px !important;
    }
    .pcb-reviewer-date {
        font-size: 11.5px !important;
    }
}

/* ==========================================================
   ELEMENTOR BUILDER INTEGRATION & SCOPING
   ========================================================== */
.elementor-widget-pcb-hero-bento,
.elementor-widget-pcb-trust-pillars,
.elementor-widget-pcb-budget-products,
.elementor-widget-pcb-category-bento,
.elementor-widget-pcb-flash-deals,
.elementor-widget-pcb-customer-reviews {
    width: 100% !important;
}

/* Clean Reset for Cyber Suite Widgets in Elementor */
.elementor-widget[class*="elementor-widget-pcb-"] {
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-widget[class*="elementor-widget-pcb-"] .pcb-redesign-wrap {
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    background: transparent !important;
}

.elementor-widget[class*="elementor-widget-pcb-"] .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove Elementor container padding causing massive gaps on the redesigned page */
body.page-id-61786 .e-con.e-parent,
body.page-id-61786 .e-con-full.e-parent {
    padding: 0 !important;
    margin: 0 !important;
}

/* Precise, intentional spacing between cyber-luxury sections */
.pcb-hero-bento {
    margin-top: 14px !important;
    margin-bottom: 32px !important;
}

.pcb-trust-strip {
    margin-bottom: 56px !important;
}

.pcb-products-section,
.pcb-inventory-section {
    margin-bottom: 64px !important;
}

.pcb-category-bento {
    margin-bottom: 64px !important;
}

.pcb-deals-section {
    margin-bottom: 64px !important;
}

.pcb-reviews-section {
    margin-top: 24px !important;
    margin-bottom: 80px !important;
}

/* Breathing room on top of hero & bottom before footer */
body.page-id-61786 .elementor-element-4b6379c {
    padding-top: 14px !important;
}

body.page-id-61786 .elementor-element-4474c13 {
    padding-bottom: 45px !important;
}

body.page-id-61786 #primary,
body.page-id-61786 .site-main,
body.page-id-61786 #content,
body.page-id-61786 .col-full,
body.page-id-61786 .entry-content,
body.page-id-61786 .hentry {
    background: #08090b !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Force Elementor containers on this page to be full-width with zero gaps */
body.page-id-61786 .e-con {
    /* Zero out all CSS-custom-property-based padding */
    --padding-top: 0px !important;
    --padding-bottom: 0px !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    --padding-block-start: 0px !important;
    --padding-block-end: 0px !important;
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
    /* Zero out gap between widgets inside the container */
    --widgets-spacing: 0px !important;
    --widgets-spacing-row: 0px !important;
    --widgets-spacing-column: 0px !important;
    --row-gap: 0px !important;
    --column-gap: 0px !important;
    --gap: 0px !important;
    /* Container max width */
    --container-max-width: 1410px !important;
    --content-width: 1410px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    gap: 0 !important;
}

body.page-id-61786 .e-con > .e-con-inner {
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    max-width: 1410px !important;
    margin: 0 auto !important;
    gap: 0 !important;
}

body.page-id-61786 .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

body.page-id-61786 .pcb-redesign-wrap {
    width: 100% !important;
}

body.page-id-61786 .pcb-container,
.pcb-container {
    max-width: 1410px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    body.page-id-61786 .pcb-container,
    .pcb-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Override global e-con defaults for this page only */
body.page-id-61786 {
    --container-default-padding-top: 0px;
    --container-default-padding-bottom: 0px;
    --container-default-padding-left: 0px;
    --container-default-padding-right: 0px;
}

/* ════════════════════════════════════════════════════════════
   USER ACCOUNT / LOGIN DROPDOWN POPUP — EXISTING THEME STYLE
   Matching Logged-In Menu: Dark Slate #1e2025, Top Purple Border #8A2BE2
   ════════════════════════════════════════════════════════════ */
.site-header-account {
    position: relative !important;
}

.site-header-account .account-dropdown {
    z-index: 99999 !important;
    text-align: left !important;
}

/* Modal Box Container */
.account-wrap,
.site-header-account .account-dropdown .account-wrap {
    display: block !important;
    position: relative !important;
    background: #1e2025 !important;
    background-color: #1e2025 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 3px solid #8A2BE2 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75) !important;
    overflow: visible !important;
}

/* Top Tooltip Caret - hidden for clean card style matching Image 1 */
.account-wrap:before,
.account-wrap:after,
.site-header-account .account-dropdown .account-wrap:before,
.site-header-account .account-dropdown .account-wrap:after,
.site-header-account .account-dropdown.right .account-wrap:before,
.site-header-account .account-dropdown.justify .account-wrap:before {
    display: none !important;
}

/* Modal Inner Body */
.account-inner,
.site-header-account .account-dropdown .account-inner {
    width: 320px !important;
    max-width: 90vw !important;
    padding: 22px 24px !important;
    background: #1e2025 !important;
    background-color: #1e2025 !important;
    border-radius: 12px !important;
    color: #F8FAFC !important;
    box-sizing: border-box !important;
}

/* Login Header (Sign in / Create an Account) */
.login-form-head,
.site-header-account .account-dropdown .login-form-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 18px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.login-form-title,
.site-header-account .login-form-title,
.site-header-account .account-dropdown .login-form-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
}

a.register-link,
.site-header-account .account-dropdown a.register-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #A855F7 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

a.register-link:hover,
.site-header-account .account-dropdown a.register-link:hover {
    color: #C084FC !important;
    text-decoration: underline !important;
}

/* Form Labels */
.site-header-account .account-dropdown label,
.razox-login-form-ajax label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #CBD5E1 !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}

.site-header-account .account-dropdown label .required,
.razox-login-form-ajax label .required {
    color: #EF4444 !important;
    margin-left: 2px !important;
}

.razox-login-form-ajax p {
    margin-bottom: 14px !important;
}

/* Input Fields (Username, Password) */
.razox-login-form-ajax input[type="text"],
.razox-login-form-ajax input[type="password"],
.site-header-account .account-dropdown input[type="text"],
.site-header-account .account-dropdown input[type="password"] {
    width: 100% !important;
    height: 42px !important;
    padding: 10px 14px !important;
    background: #141619 !important;
    background-color: #141619 !important;
    border: 1px solid #2d3139 !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    line-height: normal !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.razox-login-form-ajax input::placeholder,
.site-header-account .account-dropdown input::placeholder {
    color: #64748B !important;
}

.razox-login-form-ajax input:focus,
.site-header-account .account-dropdown input:focus {
    border-color: #8A2BE2 !important;
    background: #181b20 !important;
    background-color: #181b20 !important;
    box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.25) !important;
    color: #FFFFFF !important;
}

/* Chrome Autofill fix so fields never turn baby blue */
.razox-login-form-ajax input:-webkit-autofill,
.razox-login-form-ajax input:-webkit-autofill:hover,
.razox-login-form-ajax input:-webkit-autofill:focus,
.razox-login-form-ajax input:-webkit-autofill:active,
.site-header-account .account-dropdown input:-webkit-autofill,
.site-header-account .account-dropdown input:-webkit-autofill:hover,
.site-header-account .account-dropdown input:-webkit-autofill:focus,
.site-header-account .account-dropdown input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #141619 inset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-color: #8A2BE2 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Login Submit Button */
.razox-login-form-ajax button[type="submit"],
.razox-login-form-ajax button[data-button-action],
.site-header-account .account-dropdown button[type="submit"],
.site-header-account .account-dropdown .btn-primary {
    width: 100% !important;
    height: 44px !important;
    background: #8A2BE2 !important;
    background-color: #8A2BE2 !important;
    border: none !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(138, 43, 226, 0.4) !important;
    transition: all 0.2s ease !important;
    margin-top: 6px !important;
    margin-bottom: 12px !important;
}

.razox-login-form-ajax button[type="submit"]:hover,
.razox-login-form-ajax button[data-button-action]:hover,
.site-header-account .account-dropdown button[type="submit"]:hover,
.site-header-account .account-dropdown .btn-primary:hover {
    background: #7C3AED !important;
    background-color: #7C3AED !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.6) !important;
    transform: translateY(-1px) !important;
}

/* Lost Password Link */
.login-form-bottom,
.site-header-account .account-dropdown .login-form-bottom {
    text-align: center !important;
    margin-top: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

a.lostpass-link,
.site-header-account .account-dropdown a.lostpass-link {
    font-size: 13px !important;
    color: #94A3B8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

a.lostpass-link:hover,
.site-header-account .account-dropdown a.lostpass-link:hover {
    color: #A855F7 !important;
    text-decoration: underline !important;
}

/* Error message styling */
.site-header-account .account-dropdown .result-error {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #FCA5A5 !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    margin-bottom: 14px !important;
}

/* Dashboard menu for logged in users */
.account-inner.dashboard,
.site-header-account .account-dropdown .account-inner.dashboard {
    width: 240px !important;
    padding: 16px 0 !important;
    background: #1e2025 !important;
    background-color: #1e2025 !important;
}

.site-header-account .account-links-menu,
.site-header-account .account-dashboard {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-header-account .account-links-menu li a,
.site-header-account .account-dashboard li a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 20px !important;
    color: #CBD5E1 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.site-header-account .account-links-menu li a:hover,
.site-header-account .account-dashboard li a:hover {
    background: rgba(138, 43, 226, 0.15) !important;
    color: #A855F7 !important;
    padding-left: 24px !important;
}

/* ==========================================================================
   HOMEPAGE AUTO-BUILD PC CONFIGURATION CONSOLE & LIVE RESULTS
   ========================================================================== */

.pcb-autobuild-console {
    background: linear-gradient(135deg, rgba(14, 18, 28, 0.96) 0%, rgba(18, 22, 36, 0.94) 100%) !important;
    border: 1px solid rgba(0, 180, 216, 0.35) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 180, 216, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 30px 34px !important;
    margin-bottom: 36px !important;
    position: relative !important;
    overflow: hidden !important;
}

.pcb-autobuild-console::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #00b4d8 30%, #a855f7 70%, transparent) !important;
    pointer-events: none !important;
}

.pcb-autobuild-top-row {
    margin-bottom: 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    padding-bottom: 18px !important;
}

.pcb-ab-lightning {
    color: #00b4d8 !important;
    text-shadow: 0 0 10px rgba(0, 180, 216, 0.8) !important;
    font-size: 14px !important;
}

.pcb-ab-config-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.3fr !important;
    gap: 32px !important;
    align-items: start !important;
}

/* --- Left Column: Budget Input, Slider & Presets --- */
.pcb-ab-budget-col {
    background: rgba(10, 13, 20, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 22px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.pcb-ab-field-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.pcb-ab-label {
    font-family: 'Rajdhani', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    display: block !important;
    margin: 0 !important;
}

.pcb-ab-budget-input-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #090c14 !important;
    border: 1px solid rgba(0, 180, 216, 0.45) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 180, 216, 0.2) !important;
    transition: all 0.2s ease !important;
}

.pcb-ab-budget-input-wrap:focus-within {
    border-color: #00b4d8 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 180, 216, 0.4) !important;
}

.pcb-ab-curr {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #00b4d8 !important;
    letter-spacing: 0.5px !important;
}

.pcb-ab-budget-num {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    width: 110px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: right !important;
}

.pcb-ab-budget-num::-webkit-outer-spin-button,
.pcb-ab-budget-num::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.pcb-ab-budget-num[type=number] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.pcb-ab-slider-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.pcb-ab-slider {
    width: 100% !important;
    height: 6px !important;
    border-radius: 3px !important;
    background: #182030 !important;
    outline: none !important;
    accent-color: #00b4d8 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.pcb-ab-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #00b4d8 !important;
    box-shadow: 0 0 10px rgba(0, 180, 216, 0.8) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease !important;
}

.pcb-ab-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2) !important;
}

.pcb-ab-slider-limits {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.pcb-ab-presets-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.pcb-ab-preset-btn {
    flex: 1 1 calc(25% - 8px) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
}

.pcb-ab-preset-btn:hover {
    background: rgba(0, 180, 216, 0.12) !important;
    border-color: rgba(0, 180, 216, 0.4) !important;
    color: #00b4d8 !important;
    transform: translateY(-2px) !important;
}

.pcb-ab-preset-btn.is-active {
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.25) 0%, rgba(14, 165, 233, 0.35) 100%) !important;
    border-color: #00b4d8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(0, 180, 216, 0.45) !important;
}

/* --- Right Column: Options & Build CTA --- */
.pcb-ab-options-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.pcb-ab-opt-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.pcb-ab-opt-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.pcb-ab-opt-hint {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    font-style: italic !important;
}

.pcb-ab-pills-group {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.pcb-ab-toggle-pill {
    flex: 1 1 auto !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pcb-ab-toggle-pill:hover {
    background: rgba(168, 85, 247, 0.12) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: #c084fc !important;
    transform: translateY(-2px) !important;
}

.pcb-ab-toggle-pill.is-active {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(168, 85, 247, 0.35) 100%) !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.4) !important;
}

.pcb-ab-opt-subgrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    align-items: center !important;
}

.pcb-ab-gpu-group {
    background: rgba(10, 13, 20, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
}

.pcb-ab-gpu-switch-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.pcb-ab-switch {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.pcb-ab-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.pcb-ab-switch-track {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #1e2433 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 24px !important;
    transition: 0.3s ease !important;
}

.pcb-ab-switch-track::before {
    position: absolute !important;
    content: "" !important;
    height: 16px !important;
    width: 16px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: #94a3b8 !important;
    border-radius: 50% !important;
    transition: 0.3s ease !important;
}

.pcb-ab-switch input:checked + .pcb-ab-switch-track {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
    border-color: #00b4d8 !important;
    box-shadow: 0 0 12px rgba(0, 180, 216, 0.5) !important;
}

.pcb-ab-switch input:checked + .pcb-ab-switch-track::before {
    transform: translateX(20px) !important;
    background-color: #ffffff !important;
}

.pcb-ab-gpu-desc {
    font-size: 11.5px !important;
    color: #cbd5e1 !important;
    line-height: 1.35 !important;
}

/* --- Build CTA Button --- */
.pcb-ab-action-row {
    margin-top: 6px !important;
}

.pcb-ab-build-cta {
    width: 100% !important;
    background: linear-gradient(135deg, #7C3AED 0%, #9333EA 50%, #00B4D8 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    font-family: 'Rajdhani', -apple-system, sans-serif !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.45), 0 0 20px rgba(0, 180, 216, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.pcb-ab-build-cta:hover {
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 12px 36px rgba(124, 58, 237, 0.65), 0 0 28px rgba(0, 180, 216, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.pcb-ab-build-cta:active {
    transform: translateY(0) !important;
}

.pcb-ab-build-cta:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.pcb-ab-cta-icon {
    font-size: 18px !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)) !important;
}

/* ==========================================================================
   AUTO-BUILD RESULTS CONTAINER & RIG SHOWCASE
   ========================================================================== */

.pcb-auto-build-results {
    background: linear-gradient(180deg, rgba(12, 16, 25, 0.98) 0%, rgba(8, 11, 18, 0.98) 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    margin-bottom: 44px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(168, 85, 247, 0.15) !important;
    position: relative !important;
}

.pcb-ab-results-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 20px !important;
}

.pcb-ab-results-metrics {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.pcb-ab-metric-pill {
    background: rgba(14, 18, 28, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.pcb-ab-metric-pill.highlight {
    background: rgba(124, 58, 237, 0.18) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.25) !important;
}

.pcb-ab-metric-pill.savings {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

.pcb-ab-metric-label {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
}

.pcb-ab-metric-value {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

.pcb-ab-metric-pill.savings .pcb-ab-metric-value {
    color: #10b981 !important;
}

.pcb-ab-metric-pill.highlight .pcb-ab-metric-value {
    color: #c084fc !important;
}

/* --- Action Bar --- */
.pcb-ab-actions-bar {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 28px !important;
    align-items: center !important;
}

.pcb-ab-btn-cart {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border: 1px solid rgba(74, 222, 128, 0.5) !important;
    color: #ffffff !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 12px 22px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 18px rgba(22, 163, 74, 0.4) !important;
    transition: all 0.25s ease !important;
}

.pcb-ab-btn-cart:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.6) !important;
    border-color: #4ade80 !important;
}

.pcb-ab-btn-customize {
    background: rgba(0, 180, 216, 0.12) !important;
    border: 1px solid rgba(0, 180, 216, 0.45) !important;
    color: #00b4d8 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.pcb-ab-btn-customize:hover {
    background: #00b4d8 !important;
    color: #06080c !important;
    box-shadow: 0 4px 18px rgba(0, 180, 216, 0.5) !important;
    transform: translateY(-2px) !important;
}

.pcb-ab-btn-wa {
    background: rgba(37, 211, 102, 0.12) !important;
    border: 1px solid rgba(37, 211, 102, 0.4) !important;
    color: #25d366 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 12px 18px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.pcb-ab-btn-wa:hover {
    background: #25d366 !important;
    color: #06080c !important;
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45) !important;
    transform: translateY(-2px) !important;
}

.pcb-ab-btn-tweak {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #94a3b8 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    margin-left: auto !important;
    transition: all 0.2s ease !important;
}

.pcb-ab-btn-tweak:hover {
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

/* --- Cards Grid --- */
.pcb-ab-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 18px !important;
}

.pcb-ab-component-card {
    background: linear-gradient(180deg, #111520 0%, #090c13 100%) !important;
    border: 1px solid #1e2434 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 480px !important;
    position: relative !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease !important;
}

.pcb-ab-component-card:hover {
    transform: translateY(-6px) !important;
    border-color: #00b4d8 !important;
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.85), 0 0 22px rgba(0, 180, 216, 0.35) !important;
}

.pcb-ab-slot-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 6 !important;
    background: rgba(0, 180, 216, 0.18) !important;
    border: 1px solid rgba(0, 180, 216, 0.5) !important;
    color: #00b4d8 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    backdrop-filter: blur(8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.pcb-ab-fallback-chip {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    margin-top: 4px !important;
    display: inline-block !important;
}

/* --- Loader Styling --- */
.pcb-ab-loader-wrap {
    text-align: center !important;
    padding: 60px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
}

.pcb-ab-spinner {
    width: 52px !important;
    height: 52px !important;
    border: 3px solid rgba(0, 180, 216, 0.15) !important;
    border-top-color: #00b4d8 !important;
    border-right-color: #a855f7 !important;
    border-radius: 50% !important;
    animation: pcb-spin 0.8s linear infinite !important;
    box-shadow: 0 0 20px rgba(0, 180, 216, 0.35) !important;
}

@keyframes pcb-spin {
    to { transform: rotate(360deg); }
}

.pcb-ab-loader-text {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

.pcb-ab-loader-sub {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .pcb-ab-config-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .pcb-ab-opt-subgrid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .pcb-autobuild-console {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }
    .pcb-ab-budget-col {
        padding: 16px 14px !important;
    }
    .pcb-ab-preset-btn {
        flex: 1 1 calc(33.333% - 8px) !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
    .pcb-ab-toggle-pill {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
    .pcb-ab-build-cta {
        font-size: 14px !important;
        padding: 13px 18px !important;
    }
    .pcb-auto-build-results {
        padding: 20px 14px !important;
        border-radius: 16px !important;
    }
    .pcb-ab-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .pcb-ab-actions-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .pcb-ab-btn-tweak {
        margin-left: 0 !important;
        text-align: center !important;
    }
}