*{box-sizing:border-box}
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Cairo:wght@400;600;700;800&display=swap');
:root{
  /* Palette */
  --pri:#b31b1b; /* Brand red */
  --pri-dark:#8f1414;
  --bg:#0e0f13;
  --card:#151821;
  --muted:#9aa0a6;
  --text:#e8eaed;
  --ring:rgba(179,27,27,.35);
  /* Design tokens */
  --radius-sm:10px;
  --radius-md:12px;
  --radius-lg:16px;
  --shadow-sm:0 6px 18px rgba(0,0,0,.25);
  --shadow-md:0 10px 30px rgba(0,0,0,.28);
  --shadow-lg:0 20px 60px rgba(0,0,0,.45);
  --gap-xs:6px; --gap-sm:10px; --gap:14px; --gap-lg:20px;
}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter","Cairo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#0b0c10 0%, #0e0f13 25%, #0e0f13 100%);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* Prefer Cairo for RTL */
html[dir="rtl"] body{font-family:"Cairo","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.container{width:min(1200px, 92%); margin-inline:auto}
.row{display:flex; gap:16px}
.between{justify-content:space-between}
.center{align-items:center}

.topbar{
  position:sticky; top:0; z-index:10;
  background:#0b0c10cc; backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid #22252d;
}
.topbar .brand{display:flex; align-items:center; gap:12px; padding:10px 0}
.logo{color:#fff; font-weight:900; font-size:26px; letter-spacing:.5px; text-decoration:none}
.tag{color:var(--muted); font-size:13px}
.nav a{color:#e2e5e9; text-decoration:none; padding:12px 10px; border-radius:var(--radius-sm); transition:background .15s ease, color .15s ease}
.nav a:hover{background:#1b1f2a; color:#fff}

/* Brand icon before the Decoders text */
.logo::before{
  content:"";
  display:inline-block;
  inline-size:22px; block-size:22px;
  background:url('/icon.ico') no-repeat center / contain;
  margin-inline-end:8px;
  transform:translateY(2px);
}
/* In RTL, put the gap on the other side to keep spacing correct */
html[dir="rtl"] .logo::before{ margin-inline-start:8px; margin-inline-end:0 }

.hero{
  background-image:
    linear-gradient( to bottom, rgba(14,15,19,0.55), rgba(14,15,19,0.85) 65%, rgba(14,15,19,1) ),
    url("/Hero Background.png");
  background-size: cover;
  background-position: center;
  border-bottom:1px solid #202431;
  position: relative;
  overflow: hidden;
  min-height:70vh;
}
.hero .container{position:relative; z-index:3; padding:84px 0 48px}
.hero h1{margin:0 0 8px; font-size:36px}
.hero p{margin:0 0 20px; color:#c9ced6}

.btn{display:inline-block; color:#fff; background:#2b2f3b; padding:10px 16px; border-radius:var(--radius-sm); text-decoration:none; border:1px solid #343a49; box-shadow:var(--shadow-sm); transition:transform .14s ease, box-shadow .14s ease, background .14s ease}
.btn:hover{background:#33394a}
.btn.primary{background:var(--pri); border-color:var(--pri-dark)}
.btn.primary:hover{background:var(--pri-dark)}
.btn.small{padding:8px 12px; font-size:14px}
.btn:focus{outline:2px solid var(--ring); outline-offset:2px}

.card{
  background:var(--card);
  border:1px solid #202431;
  border-radius:var(--radius-lg);
  padding:20px;
  margin:24px 0;
  box-shadow:var(--shadow-md);
}
.card h2{margin-top:0}

.grid.two{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px}
@media (max-width:900px){ .grid.two{grid-template-columns:1fr} }

.price-list{list-style:none; padding:0; margin:10px 0}
.price-list li{padding:8px 0; border-bottom:1px dashed #2a2e3a}
.price-list li:last-child{border-bottom:none}

.note{margin-top:12px; color:#c9ced6}

.handle-input{display:flex; gap:8px; align-items:center}
.handle-input input{background:#0f121a; color:#e7eaef; border:1px solid #262b39; border-radius:var(--radius-sm); padding:10px 12px; min-width:220px}
.handle-input input:focus{outline:2px solid var(--ring); border-color:var(--pri)}
input,select,textarea{font:inherit}
::placeholder{color:#8c93a3}

.video-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:14px}
@media (max-width:1100px){ .video-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:800px){ .video-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:540px){ .video-grid{grid-template-columns:1fr} }

.video-card{
  background:#0f121a;
  border:1px solid #222838;
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:transform .15s ease, border-color .15s ease;
}
.video-card:hover{transform:translateY(-2px); border-color:#2f3650}
.thumb{display:block; aspect-ratio:16/9; width:100%; background:#000; object-fit:cover}
.video-body{padding:10px}
.video-title{font-weight:700; font-size:15px; line-height:1.3; margin:0 0 4px}
.video-meta{color:#9aa3ad; font-size:13px}

.status{margin-top:10px; color:#c9ced6}

.products-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:12px}
@media (max-width:900px){ .products-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:580px){ .products-grid{grid-template-columns:1fr} }
.products-grid .product-card{display:block}
.product-card{
  background:#0f121a;
  border:1px solid #222838;
  border-radius:var(--radius-md);
  padding:14px;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.product-card:hover{ transform:translateY(-3px); border-color:#2f3650; box-shadow:var(--shadow-md); }
.product-card h4{margin:6px 0 8px; font-size:16px}
.product-card .meta{color:#9aa3ad; font-size:13px; margin-bottom:8px}
.product-card .actions{display:flex; gap:8px; align-items:center; justify-content:space-between}

/* Category blocks */
.category-block{margin-top:8px; padding-top:8px}
.category-title{margin:6px 0 8px; font-size:18px; color:#fff; border-right:4px solid var(--pri); padding-right:8px}

.cart-list{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.cart-item{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:#0f121a; border:1px solid #222838; border-radius:10px; padding:10px;
}
.cart-item .name{font-weight:700}
.cart-item .controls{display:flex; align-items:center; gap:6px}
.qty-btn{background:#2b2f3b; border:1px solid #343a49; color:#fff; padding:2px 8px; border-radius:6px}

.footer{border-top:1px solid #202431; padding:20px 0; color:#b9bfca}
.footer .mini-links a{color:#b9bfca; margin-inline:8px; text-decoration:none}
.footer .mini-links a:hover{color:#fff}

/* Slideshow section (below hero) */
.slideshow{ position:relative; pointer-events:none; }
.slideshow.below-hero{ margin-top:0; height:min(46vh, 520px); border-bottom:1px solid #202431; }
.slideshow .slides{position:absolute; inset:0;}
.slideshow .tri{position:absolute; top:0; bottom:0; background-size:cover; background-position:center; opacity:.22; filter:saturate(105%);} 
.slideshow .tri0{left:0; right:75%; opacity:.18;}
.slideshow .tri1{left:25%; right:25%; opacity:.38;}
.slideshow .tri2{left:75%; right:0; opacity:.18;}
/* legacy single-slide styles kept for compatibility */
.slideshow .slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease; background-size:cover; background-position:center;}
.slideshow .slide.active{opacity:0.22}
.slideshow .caption{
  position:absolute; inset-block-end:18px; inset-inline-end:18px; pointer-events:auto;
  z-index:2; max-width:min(420px, 88%);
  background:linear-gradient( to left, rgba(14,15,19,.86), rgba(14,15,19,.42) );
  border:1px solid #22252d; border-radius:12px; padding:10px 12px;
}
.slideshow .caption .title{font-weight:800; font-size:16px; margin:0 0 4px}
.slideshow .caption .meta{color:#c9ced6; font-size:12px}
.slideshow .dots{position:absolute; left:50%; transform:translateX(-50%); bottom:10px; display:flex; gap:5px; pointer-events:auto}
.slideshow .dot{width:6px; height:6px; border-radius:50%; background:#5b6272; opacity:.7}
.slideshow .dot.active{background:#fff; opacity:1}

@media (max-width:900px){
  .hero{min-height:60vh}
  .hero .container{padding:72px 0 36px}
  .slideshow.below-hero{height:min(40vh, 420px)}
  .slideshow .caption{inset-block-end:16px; inset-inline-end:16px; max-width:92%}
}
@media (max-width:560px){
  .hero{min-height:50vh}
  .slideshow.below-hero{height:min(36vh, 360px)}
  .slideshow .caption .title{font-size:15px}
  .slideshow .caption .meta{font-size:11px}
}

/* Video modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:1000;}
.modal.open{display:flex}
.modal .modal-content{position:relative; width:min(1000px, 92%); aspect-ratio:16/9; background:#000; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-lg)}
.modal iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.modal .close{position:absolute; top:8px; inset-inline-end:8px; background:#2b2f3b; color:#fff; border:1px solid #343a49; border-radius:8px; padding:6px 10px; cursor:pointer; z-index:2}