:root {
    --bg: #071017;
    --panel: #0c1116;
    --muted: #9fbfcf;
    --accent: #19d1b7;
    --accent-1: #a855f7;
    --accent-2: #6d4cff;
    --radius: 12px;
    --text: #dff8ff;
    --bg-1: #000;
  
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial
}

body {
    background: var(--bg);
    color: var(--text);
    /* padding: 24px; */
    box-sizing: border-box
}

  /* === Header container === */
    .techouse-header-section {
      color: #fff;
    }

    .techouse-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 50px;
      background: var(--bg-1);
      color: #fff;
      position: sticky;
      top: 0;
      z-index: 1200;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
      border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    }

    /* left logo */
    .techouse-left {
      display: flex;
      align-items: center;
      min-width: 180px;
    }

    .techouse-logo img {
      height: 50px;
      display: block;
    }
   
    .techouse-logo-placeholder {
      display: flex;
      gap: 8px;
      align-items: center;
      color: #fff;
      text-transform: lowercase;
      font-weight: 600;
      font-size: 16px;
    }
    @media (max-width:425px) {
      .techouse-logo img {
    height: 35px;
        display: block;
        width: 130px;
}
    }
    .brand-accent {
      color: var(--accent-1);
      margin-left: 4px;
      font-weight: 600;
      text-transform: none;
    }

    /* center nav */
    .techouse-center {
      flex: 1;
      display: flex;
      justify-content: center;
    }

    .techouse-menu {
      display: flex;
      gap: 18px;
      list-style: none;
      margin: 0;
      padding: 0;
      align-items: center;
    }

    .menu-item {
      position: relative;
    }

    .menu-link,
    .menu-dropdown-toggle {
      color: #fff;
      background: none;
      border: none;
      padding: 10px 6px;
      font-size: 15px;
      cursor: pointer;
      text-decoration: none;
    }

    .menu-link:hover,
    .menu-dropdown-toggle:hover {
      color: var(--accent-1);
    }

    .menu-link.active {
      color: var(--accent-1);
    }

    /* icons / right */
    .techouse-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    justify-content: flex-end;
    }

    .icon-btn {
      background: transparent;
      border: none;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
      /* padding: 8px; */
      cursor: pointer;
      border-radius: 6px;
      transition: box-shadow 160ms ease, transform 160ms ease;
    }

    .icon-btn:hover {
      box-shadow: 0 6px 18px rgba(168, 85, 247, 0.08);
      color: var(--accent-1);
      transform: translateY(-2px);
    }

    /* login */
    .login-btn {
      display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #7e22ce, #a855f7);
    color: #fff;
    padding: 10px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s 
ease;
    box-shadow: 0 6px 18px rgba(168, 85, 247, 0.25);
    }

    .login-btn:hover {
      background: linear-gradient(135deg, #9333ea, #c084fc);
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(168, 85, 247, 0.4)
    }
.login-btn svg {
    transition: transform 0.3s 
ease, stroke 0.3s 
ease;
}
    .login-text {
      font-size: 14px;
      color: #fff;
      letter-spacing: 0.3px;
    }

    /* search button and cart */
    .search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7e22ce, #a855f7);
    transition: all 0.3s 
ease;
    box-shadow: 0 6px 18px rgba(168, 85, 247, 0.3);
    border: none;
    cursor: pointer;
    }
.search-btn svg {
    transition: transform 0.3s 
ease;
}

.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7e22ce, #a855f7);
    transition: all 0.3s 
ease;
    box-shadow: 0 6px 18px rgba(168, 85, 247, 0.3);
}
.cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.45);
    background: linear-gradient(135deg, #9333ea, #c084fc);
}
    .search-btn:hover {
      transform: translateY(-2px);
      background: linear-gradient(135deg, #9333ea, #c084fc);
      box-shadow: 0 8px 20px rgba(168, 85, 247, 0.45)
    }

    .cart-count {
      position: absolute;
      top: 4px;
      right: 4px;
      background: #ef4444;
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 999px;
      min-width: 18px;
      line-height: 1.2;
      text-align: center;
      box-shadow: 0 3px 10px rgba(239, 68, 68, 0.3)
    }

    /* hamburger */
.hamburger { display:none; background:transparent; border:none; padding:8px; cursor:pointer; }

    .hamb-line {
      display: block;
      width: 20px;
      height: 2px;
      background: #fff;
      margin: 4px 0;
      border-radius: 2px;
      transition: all 180ms ease;
    }

    /* mobile sidebar */
   /* === MOBILE SIDEBAR === */
  .mobile-sidebar { position:fixed; left:-360px; top:0; width:320px; bottom:0; background:#000; z-index:1300; 
    /* box-shadow: 8px 0 40px rgba(0,0,0,0.6); */
     padding:18px; overflow:auto; transition:left 300ms cubic-bezier(.2,.9,.2,1); }
      .mobile-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
      .mobile-logo img { height:36px; }
      .mobile-close { background:transparent; border:none; color:#fff; font-size:22px; cursor:pointer; }

      .mobile-nav ul { list-style:none; padding:0; margin:0; }
      .mobile-item { border-bottom:1px solid rgba(255,255,255,0.02); }
      .mobile-item a, .mobile-item .mobile-toggle { display:block; padding:14px 10px; color:#fff; text-decoration:none; font-size:16px; width:100%; text-align:left; background:transparent; border:none; cursor:pointer; }
      .mobile-item a:hover, .mobile-item .mobile-toggle:hover { color:#a855f7; background:rgba(168,85,247,0.02); }
      .mobile-submenu { display:none; background:transparent; }
      .mobile-submenu li a { padding-left:25px; font-size:14px; color:#d6e0ee; }

      .mobile-cta a{ display:block; padding:12px 10px; color:#fff; text-decoration:none; }
      .cart-count-mobile { background:#a855f7; color:#fff; padding:2px 8px; border-radius:999px; margin-left:8px; font-size:13px; }

      .mobile-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1250; display:none; transition:opacity 200ms ease; }

      /* Mobile active states (JavaScript toggles class) */
      .mobile-open .mobile-sidebar { left:0; }
      .mobile-open .mobile-overlay { display:block; opacity:1; }


    /* === MEGA MENU (full-width) === */
    .submenu {
      position: absolute;
      left: 0;
      top: calc(100% + 8px);
      min-width: 650px;
      background: var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.03);
      border-radius: 6px;
      padding: 18px 16px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
      opacity: 0;
      transform: translateY(6px);
      pointer-events: none;
      transition: 150ms ease;
      z-index: 2000
    }

    .menu-item-has-children:hover .submenu,
    .menu-item-has-children:focus-within .submenu {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Ultra-premium full-width mega-submenu variant */
    .mega-submenu {
      position: absolute;
      top: calc(100% + 16px);
      left: 0;
      width: 100%;
      background: linear-gradient(135deg, rgba(18, 18, 28, 0.98), rgba(10, 10, 18, 0.96));
      backdrop-filter: blur(18px);
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.9);
      padding: 5px 20px 20px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(20px) scale(.98);
      transition: all .45s cubic-bezier(.25, 1, .3, 1);
      z-index: 3000;
    }

    .menu-item-has-children:hover .mega-submenu {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .mega-fullwidth {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 1500px;
      margin: 0 auto;
    }

    .mega-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0 15px;
    }

    .mega-row.mega-row-second {
      grid-template-columns: repeat(2, 1fr)
    }

    .mega-block {
      transition: all .3s ease;
      padding: 5px 0;
      position: relative;
    }

    .mega-block::after {
      content: "";
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border-radius: 14px;
      background: radial-gradient(circle at top left, rgba(168, 85, 247, 0.05), rgba(99, 102, 241, 0.02));
      opacity: 0;
      transition: opacity .3s ease;
      z-index: -1
    }

    .mega-block:hover {
      transform: translateY(-4px);
    }

    .mega-heading {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: .7px;
      margin-bottom: 14px;
      padding-bottom: 8px;
      position: relative
    }

    .mega-heading svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
      opacity: .9;
      transition: transform .3s ease, opacity .3s ease
    }

    .mega-block:hover .mega-heading svg {
      transform: scale(1.3) rotate(-5deg);
      opacity: 1;
      filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6))
    }

    .mega-heading::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--accent-1), var(--accent-3));
      box-shadow: 0 0 12px rgba(168, 85, 247, 0.5)
    }

    .mega-block ul {
      list-style: none;
      margin: 0;
      padding: 8px 0 0
    }

    .mega-block li {
      margin: 0
    }

    .mega-block li a {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #cfd6e4;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      padding: 6px 0;
      transition: all .3s ease;
      position: relative
    }

    .mega-block li a:hover {
      color: var(--accent-1);
      transform: translateX(6px)
    }

    .sub-icon {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      fill: #e5e5e5;
      opacity: .85;
      transition: all .25s ease;
      filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.05))
    }

    .mega-block li a:hover .sub-icon {
      transform: scale(1.3) rotate(-8deg);
      opacity: 1;
      fill: var(--accent-1);
      filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.6))
    }

    .mega-submenu::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 75%;
      height: 1px;
      background: linear-gradient(90deg, rgba(168, 85, 247, 0.4), rgba(99, 102, 241, 0.4))
    }

    @keyframes fadeSlide {
      0% {
        opacity: 0;
        transform: translateY(10px)
      }

      100% {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .menu-item-has-children:hover .mega-row {
      animation: fadeSlide .45s ease forwards
    }

    /* responsive */
    @media (max-width:1300px) {
      .mega-row {
        grid-template-columns: repeat(3, 1fr)
      }

      .mega-submenu {
        padding: 50px 60px
      }
    }
     @media (max-width: 1024px) {
        .techouse-center { display:none; }
        .hamburger { display:inline-block; }
        .techouse-right .login-text { display:none; }
        .compare-link { display:none; }
      }


    @media (max-width:700px) {
      .mega-row {
        grid-template-columns: 1fr
      }

      .mega-submenu {
        padding: 28px
      }

      .login-text {
        display: none
      }

      .login-btn {
        padding: 10px;
        border-radius: 50%
      }

      .techouse-left {
        min-width: 120px
      }

      .techouse-header {
        padding: 10px 12px
      }
    }

    /* mobile submenu enhancements */
    .mobile-submenu {
      background: rgba(255, 255, 255, 0.02);
      padding: 0;
      margin: 0;
      list-style: none
    }

    .mobile-sub .mobile-toggle {
      width: 100%;
      text-align: left;
      background: transparent;
      border: none;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      padding: 14px 12px;
      cursor: pointer;
      position: relative;
      transition: all .2s ease
    }

    .mobile-sub .mobile-toggle::after {
      content: "▾";
      position: absolute;
      right: 18px;
      top: 14px;
      font-size: 13px;
      transition: transform .25s ease
    }

    .mobile-sub.open .mobile-toggle::after {
      transform: rotate(-180deg)
    }

    .mobile-submenu-inner {
      display: none;
      background: rgba(0, 0, 0, 0.2);
      padding-left: 20px
    }

    .mobile-submenu-inner a {
      display: block;
      padding: 10px 14px;
      color: #d1d5db;
      font-size: 14px;
      text-decoration: none;
      border-left: 2px solid transparent;
      transition: all .25s ease
    }

    .mobile-submenu-inner a:hover {
      color: var(--accent-1);
      border-left-color: var(--accent-1);
      background: rgba(168, 85, 247, 0.05)
    }

    .mobile-sub.open .mobile-submenu-inner {
      display: block
    }

    /* small helpers for demo (remove/adjust in production) */
    .visually-hidden {
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      white-space: nowrap
    }

    .mobile-submenu-inner a i {
  color: #ffffff;
  width: 18px;
  margin-right: 8px;
}

.pc-builder-section {
    width: 100%;
    box-sizing: border-box;
    padding: 36px 24px
}

.pbs-inner {
    display: flex;
    gap: 28px;
    width: 100%;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto
}

.pbs-sidebar {
    width: 340px;
    flex-shrink: 0
}

.pbs-panel {
    background: linear-gradient(180deg, var(--panel), #071015);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: 0 8px 30px rgba(2, 8, 12, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.02);
    margin-bottom: 18px
}

.panel-title {
    color: #e6f7ff;
    font-size: 15px;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 10px
}

.panel-title i {
    color: var(--accent);
    font-size: 16px
}

.preset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    font-weight: 700;
    margin-bottom: 10px;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

.preset small {
    display: block;
    font-weight: 400;
    opacity: .85;
    font-size: 13px;
    margin-top: 6px;
    color: #d6eef6
}

.progress-row {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    margin-bottom: 8px
}

.build-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.build-row {
    background: #081219;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 12px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.12s ease;
}

.build-row .row-left {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dff8ff;
    cursor: pointer
}

.req {
    background: #c34949;
    color: #fff;
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 12px;
    margin-left: 8px
}

.row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px
}

.placeholder {
    color: #7b8b90;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.01);
    min-width: 180px
}

.remove-btn {
    background: transparent;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    font-size: 14px;
    display: none
}

.selected-list {
    min-width: 180px;
}

/* each selected entry in sidebar */
.selected-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.01);
    margin-top: 6px
}

.entry-title {
    font-weight: 700;
    color: #dff8ff
}

.entry-remove {
    background: transparent;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px
}

.entry-remove:hover {
    background: rgba(255, 255, 255, 0.02)
}

.build-summary {
    margin-top: 12px;
    color: #9fc9d9;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.btn {
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 700
}

.btn--primary {
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    color: #00161a
}

.btn--outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: #dff8ff;
    padding: 10px
}

.btn--ghost {
    background: rgb(255 255 255 / 19%);
    padding: 8px 14px;
    border-radius: 8px;
    color: #dff8ff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.03);
    display: inline-block
}

.pbs-main {
    flex: 1
}

.header-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0));
    border-radius: var(--radius)
}

.header-left {
    display: flex;
    gap: 18px;
    align-items: start;
    flex-direction: column
}

.icon-row {
    display: flex;
    gap: 8px;
    align-items: center
}

.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
   background: linear-gradient(135deg, #7e22ce, #a855f7);
    color: #00161a;
    margin-right: 8px;
    box-shadow: 0 6px 22px rgba(109, 76, 255, 0.12);
    border: none;
    cursor: pointer
}

.icon-btn i {
    pointer-events: none
}

.icon-btn .icon-check {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #12b886;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6)
}

.icon-btn.checked .icon-check {
    display: inline-flex
}

.pbs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px
}

.pbs-card {
    background: linear-gradient(180deg, #0f161a, #071015);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    border: 1px solid rgba(255, 255, 255, 0.02);
    box-shadow: 0 14px 30px rgba(2, 8, 12, 0.55);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease
}

.pbs-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 26px 46px rgba(25, 209, 183, 0.06)
}

.pbs-card.selected {
    outline: 3px solid rgba(25, 209, 183, 0.06)
}

.card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.card-badge i {
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    padding: 8px;
    border-radius: 8px;
    color: #00161a
}

.card-title {
    font-size: 20px;
    color: #e9fbff;
    margin: 0;
    font-weight: 800
}

.card-media {
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #071015;
    display: flex;
    align-items: center;
    justify-content: center
}

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

.card-specs {
    list-style: disc;
    padding-left: 0;
    margin: 0;
    color: #a9d7df;
    font-size: 14px;
    flex: 0 0 auto
}

.card-specs li {
    margin: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px
}

.card-specs i {
    color: var(--accent);
    width: 18px;
    text-align: center
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto
}

.card-price {
    color: var(--accent);
    font-weight: 800;
    font-size: 16px
}

.select-btn {
    background: rgba(255, 255, 255, 0.04);
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    color: #dff8ff;
    cursor: pointer
}

.btn--small {
    padding: 6px 10px;
    border-radius: 8px
}

.build-actions {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn {
    border: none;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
}

.btn i {
    margin-right: 6px;
}

.btn--primary {
    background: linear-gradient(90deg, #6d4cff, #19d1b7);
    color: #00161a;
    box-shadow: 0 6px 20px rgba(25, 209, 183, 0.15);
    text-align: center;
}

.btn--outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #dff8ff;
}

.btn--outline:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn--ghost {
    flex: 1;
    background: #fff;
    color: #00161a;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Normal card */
.pbs-card {
    background: linear-gradient(180deg, #0f161a, #071015);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px;
    transition: all 0.25s ease;
}

/* On hover */
.pbs-card:hover {
    border-color: #19d1b7;
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(25, 209, 183, 0.08);
}

/* ✅ When Selected */
.pbs-card.selected {
    background: linear-gradient(180deg, rgba(25, 209, 183, 0.15), rgba(109, 76, 255, 0.08));
    border: 2px solid #19d1b7;
    box-shadow: 0 0 20px rgba(25, 209, 183, 0.25);
    transform: translateY(-4px);
}

/* ✅ Selected button style */
.pbs-card.selected .select-btn {
    background: linear-gradient(90deg, #6d4cff, #19d1b7);
    color: #00161a;
    font-weight: bold;
}

.page-banner {
  background: #0c0f16; /* dark background */
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 15px 40px;
  max-width: 1400px;
      margin: 0 auto;
}

.banner-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  flex-wrap: wrap;
}

.banner-left .back-link {
  color: #3fa9f5;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
}

.banner-left .back-link i {
  margin-right: 6px;
}

.banner-right .banner-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #b2d1ff;
}

.banner-right .banner-subtitle {
  margin: 2px 0 0;
  font-size: 14px;
  color: #aaa;
}


/* 🔸 Desktop (default) → no major changes */
.pbs-inner {
    display: flex;
    gap: 28px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-start;
}

/* 🔸 Large Tablets (≤1200px) */
@media (max-width: 1200px) {
    .pbs-inner {
        flex-direction: column;
        gap: 24px;
        padding: 0 16px;
    }

    .pbs-sidebar {
        width: 100%;
        order: 1;
    }

    .pbs-main {
        width: 100%;
        order: 2;
    }

    .pbs-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .header-panel {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-right .btn {
        width: 100%;
        text-align: center;
    }
}

.Save-Build {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
@media (max-width:1100px) {
    .pbs-inner {
        flex-direction: row;
        padding: 20px
    }

    .pbs-sidebar {
        width: 50%
    }

    .header-titles h2 {
        font-size: 28px
    }
}
/* 🔸 Tablets (≤992px) */
@media (max-width: 992px) {
    .pc-builder-section {
        padding: 20px 12px;
    }

    .pbs-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 18px;
    }

    .header-titles h2 {
        font-size: 22px;
    }

    .card-title {
        font-size: 18px;
    }

    .card-media {
        height: 200px;
    }
}

/* 🔸 Small Tablets & Large Phones (≤768px) */
@media (max-width: 768px) {
    .pbs-inner {
        flex-direction: row;
        gap: 20px;
    }

    .pbs-sidebar {
        width: 50%;
        margin-bottom: 20px;
    }
    .pbs-main {
        width: 50%;
        order: 2;
    }
    .icon-row {
    display: flex
;
    gap: 0px;
    align-items: center;
}
.techouse-header {
    display: flex
;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 12px 13px;
    background: #000;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}
    .pbs-grid {
        grid-template-columns: 1fr;
    }

    .card-media {
        height: 180px;
    }

    .card-title {
        font-size: 17px;
    }

    .btn {
        font-size: 13px;
        padding: 10px;
    }

    .btn--ghost {
        width: 100%;
        text-align: center;
    }
}

/* 🔸 Small Phones (≤480px) */
@media (max-width: 480px) {
    .pc-builder-section {
        padding: 14px 10px;
    }
.Save-Build {
    display: block;
    gap: 10px;
    margin-top: 8px;
}
    .panel-title {
        font-size: 14px;
    }

    .pbs-inner {
        flex-direction: row;
        padding: 20px;
        width: 100%;
    }
   .pbs-inner {
        flex-direction: column;
        padding: 20px
    }
.icon-row {
    display: flex
;
    gap: 0px;
    align-items: center;
}
.icon-btn {
    position: relative;
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    color: #00161a;
    margin-right: 8px;
    box-shadow: 0 6px 22px rgba(109, 76, 255, 0.12);
    border: none;
    cursor: pointer;
}
.techouse-header {
    display: flex
;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 15px 13px;
    background: #000;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}
    .pbs-sidebar {
        width: 100%
    }
    .pbs-main {
        width: 100%;
        order: 2;
    }
    .preset {
        font-size: 14px;
        padding: 8px;
    }

    .build-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .row-right {
        align-items: flex-start;
        width: 100%;
    }

    .selected-entry {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .card-title {
        font-size: 15px;
    }

    .card-specs li {
        font-size: 12px;
    }

    .btn {
        font-size: 12px;
        padding: 8px 10px;
        width: auto;
    }
    .pbs-panel {
    background: linear-gradient(180deg, var(--panel), #071015);
    border-radius: var(--radius);
    padding: 0px;
    box-shadow: 0 8px 30px rgba(2, 8, 12, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.02);
    margin-bottom: 18px;
}
}



.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    padding: 12px 16px;
    color: #fff;
    z-index: 9999;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7)
}

.price-small {
    color: var(--accent);
    font-weight: 900
}


/* footer */

.techouse-footer {
  background: #0c0f16;
  color: #ccc;
  padding: 50px 20px 20px;
  font-size: 16px;
      border-top: 1px solid #6d6d6d6e;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  max-width: 1300px;
  margin: 0 auto;
  flex-wrap: wrap; /* allow wrap on smaller screens */
}
.footer-col {
  flex: 1 1 180px; /* min width per column */
}
.footer-col h4 {
  color: #fff;
  margin: 0px;
  font-size: 20px;
  font-weight: 600;
  
}
.footer-logo span strong{
color: #71509f;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}
.footer-links {
    align-items: center;
    display: flex
;
    justify-content: center;
}
.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col ul li a:hover {
  color: #3fa9f5;
}

.footer-about .footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.footer-about img {
  width: 40px;
  height: auto;
}

.footer-socials a {
    display: inline-block;
    margin-right: 8px;
    color: #989898;
    font-size: 22px;
    transition: color 0.3s;
}

.footer-socials a:hover {
  color: #7251a1;
}

.footer-connect .footer-newsletter {
  display: flex;
  margin: 10px 0;
}

.footer-connect .footer-newsletter input {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.footer-connect .footer-newsletter button {
  background: #7251a1;
  border: none;
  padding: 0 15px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  color: #fff;
}

.footer-connect .footer-contact p {
  margin: 10px 0;
}

.footer-connect .footer-contact i {
  margin-right: 6px;
  color: #7251a1;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 40px;
  padding-top: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.footer-bottom .footer-links a {
  margin-left: 15px;
  color: #bbb;
  text-decoration: none;
}

.footer-bottom .footer-links a:hover {
  color: #3fa9f5;
}
@media (max-width: 992px) {
  .footer-container {
    flex-wrap: wrap;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .footer-container {
    flex-direction: column;
  }
  .footer-col {
    flex: 1 1 100%;
  }
}
/* Responsive tweaks */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .footer-container {
    grid-template-columns: 1fr;
  }
}
/* foooter */



.active.build-row {
    border: 1px solid;
}