:root{
  --aluminum:#EDEEF0;
  --aluminum-deep:#DCDEE2;
  --graphite:#16181B;
  --graphite-soft:#2A2D32;
  --signal:#2F62E8;
  --space-gray:#86888C;
  --accent-live:#16181B;
  --line:#c7c9cd;
  --radius:18px;
  --ease:cubic-bezier(.22,.9,.32,1);
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}

/* Tappable elements shouldn't show the browser's text-selection highlight or
   a lingering focus ring after a tap. Keyboard focus is still visible via the
   :focus-visible rule further down, so accessibility is preserved. */
button, a, .product-card, .card-arrow, .gallery-arrow, .social-btn, .icon-btn{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
/* Card details stay selectable so the name, price and specs can still be copied. */
.product-card h3, .product-card .price, .product-card .spec-badge, .product-card .battery-row{
  -webkit-user-select:text; user-select:text;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
.product-card:focus:not(:focus-visible){
  outline:none;
}
html{scroll-behavior:smooth;}
body{
  background:var(--aluminum);
  color:var(--graphite);
  font-family:'Tajawal', sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.kufi{font-family:'El Messiri', sans-serif; font-weight:700; letter-spacing:0;}
.mono{font-family:'IBM Plex Mono', monospace;}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
.container{max-width:1180px; margin:0 auto; padding:0 28px;}
section{position:relative;}

:focus-visible{outline:3px solid var(--graphite); outline-offset:3px; border-radius:4px;}

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--aluminum) 82%, transparent);
  border-bottom:1px solid var(--line);
}
.nav-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:76px; gap:24px;}
.nav-row > .brand{grid-column:1; justify-self:start;}
.nav-row > .nav-cta, .nav-row > .back-link, .nav-row > .nav-actions{grid-column:3; justify-self:end;}
.brand{display:flex; align-items:center; gap:10px; font-family:'El Messiri',sans-serif; font-size:1.7rem; font-weight:800; letter-spacing:.01em;}
.brand-x{color:var(--signal);}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px; background:var(--graphite); color:var(--aluminum);
  padding:11px 22px; border-radius:100px; font-size:.9rem; font-weight:700; transition:transform .2s var(--ease), background .2s;
}
.nav-cta:hover{background:var(--graphite-soft); transform:translateY(-2px);}

.social-btn{
  width:36px; height:36px; border-radius:50%; border:1.5px solid var(--graphite);
  display:flex; align-items:center; justify-content:center; color:var(--graphite);
  transition:background .2s var(--ease), color .2s, transform .2s var(--ease);
  flex-shrink:0;
}
.social-btn svg{width:18px; height:18px;}
.social-btn:hover{background:var(--graphite); color:var(--aluminum); transform:translateY(-2px);}

.back-link{
  display:inline-flex; align-items:center; gap:6px; font-size:.9rem; font-weight:700;
  padding:9px 18px; border:1px solid var(--graphite); border-radius:100px;
}
.back-link:hover{background:var(--graphite); color:var(--aluminum);}

.btn-primary, .btn-ghost{
  padding:15px 30px; border-radius:100px; font-size:.98rem; font-weight:700; transition:all .25s var(--ease);
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{background:var(--graphite); color:var(--aluminum);}
.btn-primary:hover{background:var(--accent-live, var(--graphite)); color:#fff; transform:translateY(-3px); box-shadow:0 14px 28px -12px #16181b66;}
.btn-ghost{border:1.5px solid var(--graphite); color:var(--graphite);}
.btn-ghost:hover{background:var(--graphite); color:var(--aluminum);}

/* ===== Footer ===== */
footer{background:var(--aluminum-deep); color:var(--graphite-soft); padding:26px 0; border-top:1px solid var(--line);}
.bottom-bar{display:flex; justify-content:space-between; align-items:center; font-size:.85rem; color:var(--graphite-soft); flex-wrap:wrap; gap:12px;}
.socials{display:flex; gap:10px;}
.socials a{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--graphite); display:flex; align-items:center; justify-content:center; color:var(--graphite); transition:background .2s, color .2s;}
.socials a svg{width:16px; height:16px; fill:currentColor;}
.socials a:hover{background:var(--graphite); color:var(--aluminum);}

@keyframes boxIn{from{opacity:0; transform:translateY(10px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}}

/* Press feedback (replaces the default mobile tap highlight) */
.btn-primary:active, .btn-ghost:active, .nav-cta:active,
.back-link:active, .social-btn:active, .socials a:active,
.buy-link:active, .buy-btn:active, .share-btn:active,
.gallery-arrow:active, .icon-btn:active, .admin-back:active{
  transform:scale(.94);
  transition:transform .08s ease;
}
/* These already use transform for positioning, so keep it and add the scale */
.card-arrow:active{transform:translateY(-50%) scale(.9); transition:transform .08s ease;}
.fixed-whatsapp:active{transform:scale(.92); animation:none; transition:transform .08s ease;}

/* ===== Share menu (device page) ===== */
.share-btn{
  width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s, transform .2s;
}
.share-btn:hover{background:var(--aluminum-deep); transform:translateY(-2px);}
.share-btn svg{width:19px; height:19px;}
.share-menu{
  position:absolute; bottom:calc(100% + 10px); left:0; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:0 20px 40px -16px rgba(0,0,0,.28); padding:8px; display:flex; flex-direction:column;
  gap:2px; min-width:190px; z-index:20; animation:boxIn .18s var(--ease) both;
}
.share-menu.hidden{display:none;}
.share-menu button{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:.88rem;
  font-weight:600; color:var(--graphite); transition:background .15s; text-align:right; width:100%;
}
.share-menu button:hover{background:var(--aluminum);}
.share-menu svg{width:18px; height:18px; flex-shrink:0;}
.share-wrap{position:relative;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}