/* Nour Computer — shared theme (Titillium Web · flat / no-glow · Framework-style motion) */
:root{
  --accent:#191970;
  --accent-dark:color-mix(in srgb,var(--accent) 78%,#000);
  --accent-soft:color-mix(in srgb,var(--accent) 8%,#fff);
  --accent-line:color-mix(in srgb,var(--accent) 18%,#fff);
  --ink:#0e1626; --muted:#5b6678; --line:#e6ebf2;
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Titillium Web',sans-serif; color:var(--ink); background:#fff;}
a{text-decoration:none; color:inherit;}
img{display:block;}
.mono{font-family:'JetBrains Mono',monospace;}
.pimg{width:100%; height:100%; object-fit:contain;}
.pimg-wrap .pimg{object-fit:contain;}

@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* keycap nav (flat depth, neutral — no glow) */
.vk{transition:transform .08s, box-shadow .08s;}
.vk:hover{transform:translateY(3px); box-shadow:0 1px 0 #c3cedd, 0 2px 4px rgba(20,40,80,.12)!important;}

/* product card — clean lift + border, NO colored glow, NO rgb sweep */
.pcard{position:relative; display:flex; flex-direction:column; width:100%; border-radius:16px; background:#fff; border:1px solid var(--line); overflow:hidden; box-shadow:0 6px 0 #e7ecf3; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;}
.pcard:hover{transform:translateY(-3px); box-shadow:0 10px 22px -16px rgba(15,40,90,.4); border-color:var(--accent-line);}

.ccard{transition:transform .16s, border-color .16s;}
.ccard:hover{transform:translateY(-3px); border-color:var(--accent)!important;}
.bcard{transition:transform .16s, border-color .16s;}
.bcard:hover{transform:translateY(-3px); border-color:var(--accent)!important;}

.lk{transition:color .15s;} .lk:hover{color:var(--accent)!important;}

/* buttons — flat, no glow */
.pbtn{border:none; cursor:pointer; transition:background .15s, transform .08s;}
.pbtn:hover{background:var(--accent-dark)!important;}
.pbtn:active{transform:translateY(1px);}
.pill{border-radius:999px!important;}

.fopt:hover{color:var(--accent)!important;}
.chip:hover{border-color:var(--accent)!important; color:var(--accent)!important;}
.thumb:hover{border-color:var(--accent)!important;}
.optbtn:hover{border-color:var(--accent)!important;}
.qbtn:hover{background:var(--accent-soft)!important; color:var(--accent)!important;}
.rmv:hover{color:#e0432b!important;}
.obtn:hover{border-color:var(--accent)!important; color:var(--accent)!important;}

/* dotted MOVING announcement stripe (light bar, dark dots) */
.dot-stripe{position:relative; overflow:hidden; background:#f4f4f2;
  background-image:radial-gradient(rgba(14,22,38,.20) 1.1px, transparent 1.2px);
  background-size:9px 9px; border-bottom:1px solid #e7e7e3;}
.dot-stripe .mq-mask{display:flex; width:100%; overflow:hidden;}
.dot-stripe .mq-track{display:flex; flex:none; gap:0; white-space:nowrap; animation:mq 28s linear infinite;}
.dot-stripe:hover .mq-track{animation-play-state:paused;}
.dot-stripe .mq-item{display:inline-flex; align-items:center; gap:10px; padding:9px 0; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; color:#33405a; text-transform:uppercase;}
.dot-stripe .mq-sep{margin:0 26px; color:var(--accent); font-size:9px;}

/* smooth product / logo marquee (moving strip) */
.mq{overflow:hidden; position:relative;}
.mq-row{display:flex; width:max-content; gap:20px; animation:mq 55s linear infinite;}
.mq:hover .mq-row{animation-play-state:paused;}
.logo-mq .mq-row{animation-duration:38s; gap:0;}

/* user-scrollable product strip */
.pstrip{display:flex; gap:20px; overflow-x:auto; padding:6px 24px 12px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#c2cad6 transparent;}
.pstrip::-webkit-scrollbar{height:8px;}
.pstrip::-webkit-scrollbar-thumb{background:#c2cad6; border-radius:4px;}
.pstrip::-webkit-scrollbar-track{background:transparent;}

/* ===== RTX / GPU navbar ===== */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rgbflow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.gpu-bar{position:relative; min-height:84px; border-radius:16px; background:linear-gradient(180deg,#202329,#0e1013); border:1px solid #2a2d33; box-shadow:0 18px 40px -22px rgba(8,12,30,.6); display:flex; align-items:center; gap:18px; padding:0 14px; overflow:hidden;}
.gpu-fins{position:absolute; top:0; left:0; right:0; height:6px; background:repeating-linear-gradient(90deg,#2e323a 0 3px,#15171b 3px 6px); z-index:1;}
.gpu-glow{position:absolute; bottom:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#5ec8ff,#b06bff,#ff7a59,#c6f24e,#5ec8ff); background-size:200% 100%; animation:rgbflow 5s linear infinite; z-index:1;}
.glogo{display:flex; flex-direction:column; gap:2px; padding:0 8px; flex:none; z-index:2;}
.glogo .gname{font-size:19px; font-weight:900; color:#f4f6f8; letter-spacing:-.01em; display:flex; align-items:center; gap:7px;}
.glogo .gtag{font-family:'JetBrains Mono',monospace; font-size:9px; color:#5ec8ff; letter-spacing:.2em;}
.gfan{width:60px; height:60px; border-radius:50%; background:#0c0e11; border:1px solid #2a2d33; display:flex; align-items:center; justify-content:center; position:relative; flex:none; z-index:2;}
.gfan .blades{width:50px; height:50px; border-radius:50%; background:repeating-conic-gradient(#33373f 0deg 26deg,#191b20 26deg 52deg); animation:spin 2.6s linear infinite;}
.gfan .hub{position:absolute; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 38% 35%,#3a3e45,#16181c);}
.gnav{font-family:'JetBrains Mono',monospace; font-size:13px; color:#dfe3e8; padding-bottom:3px; border-bottom:2px solid transparent; transition:all .15s; flex:none; z-index:2;}
.gnav:hover{color:#5ec8ff !important; border-bottom-color:#5ec8ff !important;}
.gsearch{flex:1; display:flex; align-items:center; gap:9px; height:44px; padding:0 14px; border-radius:10px; background:#15171b; border:1px solid #2a2d33; min-width:120px; z-index:2;}
.gsearch input{flex:1; background:transparent; border:none; outline:none; color:#dfe3e8; font-family:'JetBrains Mono',monospace; font-size:12px;}
.gsearch input::placeholder{color:#6a707a;}
.gicon{width:46px; height:46px; border-radius:10px; background:#15171b; border:1px solid #2a2d33; display:flex; align-items:center; justify-content:center; color:#cfd4da; flex:none; cursor:pointer; z-index:2; gap:6px;}
.gicon:hover{border-color:#5ec8ff;}
.gcart{display:flex; align-items:center; gap:9px; height:48px; padding:0 18px; border-radius:11px; background:linear-gradient(180deg,var(--accent),var(--accent-dark)); cursor:pointer; flex:none; z-index:2; box-shadow:0 4px 14px -4px rgba(25,25,112,.45);}
.gcart .pins{display:flex; gap:2px;}
.gcart .pins span{width:5px; height:16px; background:rgba(255,255,255,.7); border-radius:1px; display:block;}
.gcart .gcart-lbl{font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:#fff;}

/* ===== glass navbar ===== */
.glass-bar{position:relative; display:flex; align-items:center; gap:18px; padding:10px 20px; border-radius:18px; background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(22px) saturate(190%) brightness(1.06); backdrop-filter:blur(22px) saturate(190%) brightness(1.06); border:1px solid rgba(255,255,255,.6); box-shadow:inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 3px rgba(15,40,90,.06), 0 12px 34px -16px rgba(15,40,90,.28);}
.glass-bar::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 44%); opacity:.75;}
.glass-bar > *{position:relative; z-index:1;}
.glass-search{margin:0 4px;}
.hdr-right{display:flex; align-items:center; gap:10px;}
.gnav2{font-size:14px; font-weight:600; color:#33405a; flex:none; transition:color .15s; white-space:nowrap;}
.gnav2:hover{color:var(--accent);}
.glass-search{flex:1; display:flex; align-items:center; gap:9px; height:44px; padding:0 14px; border-radius:12px; background:rgba(255,255,255,.55); border:1px solid #e3e9f1; min-width:120px;}
.glass-search input{flex:1; background:transparent; border:none; outline:none; color:#0e1626; font-family:'JetBrains Mono',monospace; font-size:12px;}
.glass-search input::placeholder{color:#8a96a8;}
.gmenu{width:44px; height:44px; border-radius:11px; background:rgba(255,255,255,.5); border:1px solid #e3e9f1; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#33405a;}
.gpill{display:flex; align-items:center; gap:7px; height:46px; min-width:46px; padding:0 14px; border-radius:11px; background:rgba(255,255,255,.55); border:1px solid #e3e9f1; color:#33405a; cursor:pointer;}
.gpill:hover{border-color:var(--accent);}
.gcart2{display:flex; align-items:center; gap:8px; height:46px; padding:0 20px; border-radius:11px; background:var(--accent); color:#fff; cursor:pointer; box-shadow:0 6px 16px -6px rgba(25,25,112,.45);}
.gcart2:hover{background:var(--accent-dark);}

.soc{width:38px; height:38px; border-radius:50%; background:#13243d; color:#cdd6e6; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s, transform .15s;}
.soc:hover{background:var(--accent); color:#fff; transform:translateY(-2px);}

/* ===== Liquid Glass (Apple-style, CSS) — use over images/color for the frosted look ===== */
.liquid-glass{position:relative; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -1px 3px rgba(0,0,0,.14), 0 8px 22px -12px rgba(0,0,0,.4); color:#fff; overflow:hidden; transition:background .2s ease, transform .12s ease;}
.liquid-glass::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 46%); opacity:.8;}
.liquid-glass::after{content:""; position:absolute; top:-40%; left:-30%; width:55%; height:180%; pointer-events:none; background:linear-gradient(75deg, transparent, rgba(255,255,255,.4), transparent); transform:translateX(-140%) rotate(8deg);}
.liquid-glass:hover{background:rgba(255,255,255,.22);}
.liquid-glass:hover::after{transition:transform .85s ease; transform:translateX(360%) rotate(8deg);}
.liquid-glass:active{transform:scale(.97);}
/* light-surface variant (dark text) for use on light/white backgrounds */
.lg-light{background:rgba(255,255,255,.55); border-color:rgba(255,255,255,.85); color:var(--ink); box-shadow:inset 0 1px 1px rgba(255,255,255,.95), 0 10px 26px -14px rgba(15,40,90,.35);}
.lg-light::before{background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 52%);}
@media (prefers-reduced-motion: reduce){ .liquid-glass::after{display:none;} }

/* category photo tiles */
.cat-photo{height:120px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.cat-photo img{width:100%; height:100%; object-fit:cover; transition:transform .25s ease;}
.ccard:hover .cat-photo img{transform:scale(1.06);}

/* product card image + multi-photo gallery arrows */
.pimg-wrap{position:relative; width:100%; aspect-ratio:1 / 1;}
.pimg-b{position:absolute; inset:0; opacity:0; transition:opacity .35s ease;}
.pcard:hover .pimg-b{opacity:1;}
.gnav-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--accent); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px -2px rgba(15,40,90,.3); transition:background .15s, transform .12s;}
.gnav-arrow:hover{background:#fff; transform:translateY(-50%) scale(1.08);}
.gnav-arrow:active{transform:translateY(-50%) scale(.94);}
.gnav-prev{left:8px;} .gnav-next{right:8px;}
.gdots{position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:5px; z-index:4; pointer-events:none;}
.gdot{width:6px; height:6px; border-radius:50%; background:rgba(14,22,38,.28); transition:width .15s, background .15s;}
.gdot.on{background:var(--accent); width:16px; border-radius:3px;}

/* header action group — sign in / track / cart stick together with a little space */
.hdr-actions{display:flex; align-items:center; gap:8px; margin-left:auto;}

/* track stepper keycaps */
.kcap{position:relative; z-index:1; width:64px; height:56px; border-radius:11px; display:flex; align-items:center; justify-content:center;}
.kcap-done{background:var(--accent); box-shadow:0 5px 0 var(--accent-dark);}
.kcap-active{background:#fff; border:2px solid var(--accent); box-shadow:0 5px 0 #c3cedd;}
.kcap-todo{background:#f1f4f9; box-shadow:0 5px 0 #dbe3ee;}
.kconn{position:absolute; top:25px; left:-50%; width:100%; height:4px; border-radius:2px; z-index:0;}
.kconn-live{background:var(--accent);} .kconn-dim{background:repeating-linear-gradient(90deg,#dbe3ee 0 8px,transparent 8px 14px);}

@media (prefers-reduced-motion: reduce){ .mq-track,.mq-row{animation:none!important;} }

/* ===== mobile menu drawer + filter toggle ===== */
.menu-btn{display:none;}
.filter-toggle{display:none;}
#navDrawer{position:fixed; inset:0; z-index:300; visibility:hidden; opacity:0; transition:opacity .25s, visibility .25s;}
#navDrawer.open{visibility:visible; opacity:1;}
#navDrawer .nd-overlay{position:absolute; inset:0; background:rgba(10,24,48,.5);}
#navDrawer .nd-panel{position:absolute; top:0; left:0; bottom:0; width:84%; max-width:330px; background:#fff; transform:translateX(-100%); transition:transform .28s ease; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:20px 18px;}
#navDrawer.open .nd-panel{transform:translateX(0);}
.nd-link{display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:10px; font-size:15px; font-weight:600; color:var(--ink);}
.nd-link:hover{background:var(--accent-soft); color:var(--accent-dark);}
.nd-eye{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; color:#8a96a8; text-transform:uppercase; margin:16px 10px 6px;}

/* ===== responsive ===== */
@media (max-width:980px){
  .r-2col{grid-template-columns:1fr !important;}
  .r-sidebar{position:static !important; top:auto !important;}
  .trk-grid{grid-template-columns:1fr !important;}
  #tab-catalog{grid-template-columns:1fr !important;}
  .filter-toggle{display:inline-flex !important;}
  #filters-side{display:none !important;}
  #filters-side.show{display:flex !important;}
}
@media (max-width:820px){
  .g8{grid-template-columns:repeat(4,1fr) !important;}
  .g4,.g3{grid-template-columns:repeat(2,1fr) !important;}
  .gfeat{grid-template-columns:repeat(2,1fr) !important;}
  .gband{grid-template-columns:1fr !important; padding:34px 26px !important;}
  .ftcols{grid-template-columns:repeat(2,1fr) !important; gap:24px !important;}
  #metrics{grid-template-columns:repeat(2,1fr) !important;}
  #cmpBody{overflow-x:auto;} .cmp-grid{min-width:600px;}
}
@media (max-width:760px){
  /* compact mobile nav — collapses with the hamburger so nothing overflows */
  .menu-btn{display:flex !important;}
  .nav-key{display:none !important;}
  .gpu-bar{min-height:0 !important;}
  .hdr-inner{flex-wrap:wrap !important; gap:6px !important; padding:7px !important;}
  #searchForm{order:9 !important; flex-basis:100% !important; margin-top:8px; height:44px !important;}
  .acct{padding:0 12px !important; justify-content:center !important;}
  .acct .acct-label{font-size:12px !important;}
  .cart-word{display:none !important;}
  .track-key{display:none !important;}
  .cart-key{padding:0 14px !important; gap:6px !important;}
  .hdr-actions{gap:8px !important;}
}
@media (max-width:560px){
  .g8,.g4,.g3,.gfeat{grid-template-columns:repeat(2,1fr) !important;}
  .g2{grid-template-columns:1fr !important;}
  .statbar{grid-template-columns:1fr 1fr !important;}
}
@media (max-width:430px){
  .g8,.g4,.g3,.gfeat{grid-template-columns:1fr 1fr !important;}
  body{font-size:15px;}
}