/* ── Price Numbers ── */
.pc-price, .pc-old, .item-price, [class*='price'], .total, .subtotal { font-family: 'Roboto Mono', monospace; font-variant-numeric: tabular-nums; }
/* ════════════════════════════════════════
   frontend/public/assets/css/shop.css
   ════════════════════════════════════════ */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{margin:0;padding:0;border:0;}
body{background:#0a0a0a;color:#fff;font-family:'Roboto',sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}ul{list-style:none;}img{max-width:100%;display:block;}
button,input,select{font-family:inherit;font-size:inherit;}button{cursor:pointer;border:none;background:none;}svg{display:block;flex-shrink:0;}
:root{--bg:#0a0a0a;--bg2:#111;--bg3:#1a1a1a;--bg4:#222;--or:#ff6b00;--or2:#ff8533;--odim:rgba(255,107,0,.10);--obdr:rgba(255,107,0,.28);--bdr:rgba(255,255,255,.08);--bdr2:rgba(255,255,255,.14);--sil:#aaa;--sil2:#666;--r:8px;--rlg:14px;--rxl:20px;--pill:9999px;--navh:64px;}
.wrap{width:100%;max-width:1260px;margin:0 auto;padding:0 24px;}

/* ── NAVBAR ── */
#nav{position:fixed;top:0;left:0;right:0;height:var(--navh);background:#111;border-bottom:2px solid var(--or);z-index:500;overflow:visible;}
#nav .wrap{height:100%;display:flex;align-items:center;flex-wrap:nowrap;gap:16px;overflow:visible;}
.logo{display:flex;align-items:center;gap:7px;font-family:'Syne',sans-serif;font-size:19px;font-weight:800;letter-spacing:-0.3px;flex-shrink:0;white-space:nowrap;}
.logo-dot{width:8px;height:8px;background:var(--or);border-radius:50%;box-shadow:0 0 8px var(--or);flex-shrink:0;}
.logo-or{color:var(--or);}
#nav-links{display:flex;align-items:center;gap:22px;flex-shrink:0;}
#nav-links a{font-size:13px;color:#aaa;white-space:nowrap;transition:color .2s;position:relative;padding-bottom:2px;}
#nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--or);border-radius:2px;transition:width .22s;}
#nav-links{list-style:none;}#nav-links li{list-style:none;}#nav-links a:hover{color:#fff;}#nav-links a:hover::after,#nav-links a.act::after,#nav-links a.on::after{width:100%;}#nav-links a.act{color:#fff;}#nav-links a.on{color:#fff;}
#nav-search{flex:1;min-width:0;max-width:300px;height:36px;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--pill);display:flex;align-items:center;gap:8px;padding:0 13px;transition:border-color .2s;position:relative;}
#nav-search:focus-within{border-color:var(--obdr);}
#nav-search input{flex:1;background:none;border:none;outline:none;font-size:13px;color:#fff;min-width:0;}
#nav-search input::placeholder{color:#555;}
#s-clr{cursor:pointer;color:#555;display:none;flex-shrink:0;}
#s-res{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#111;border:1px solid var(--bdr);border-radius:var(--rlg);overflow:hidden;display:none;box-shadow:0 8px 28px rgba(0,0,0,.6);z-index:100;}
#s-res.show{display:block;}
.sr{display:flex;align-items:center;gap:10px;padding:9px 13px;cursor:pointer;transition:background .15s;}
.sr:hover{background:var(--bg3);}
.sr-th{width:36px;height:36px;background:var(--bg3);border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sr-th img{width:100%;height:100%;object-fit:cover;}
.sr-nm{font-size:13px;font-weight:500;}.sr-br{font-size:11px;color:#555;}.sr-pr{margin-left:auto;font-size:13px;font-weight:600;color:var(--or);white-space:nowrap;}
.sr-nil{padding:14px;text-align:center;font-size:13px;color:#555;}
#nav-right{display:flex;align-items:center;gap:7px;flex-shrink:0;margin-left:auto;}
.nb{width:36px;height:36px;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--pill);display:flex;align-items:center;justify-content:center;color:#aaa;cursor:pointer;transition:all .2s;position:relative;text-decoration:none;flex-shrink:0;}
.nb:hover{border-color:var(--obdr);color:var(--or);}
#cart-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:var(--or);color:#000;font-size:9px;font-weight:700;border-radius:50%;border:2px solid #111;display:flex;align-items:center;justify-content:center;}
#cart-badge.hide{display:none;}
#nav-signin{background:var(--or);color:#000;padding:7px 16px;border-radius:var(--pill);font-size:12px;font-weight:700;cursor:pointer;transition:opacity .2s;white-space:nowrap;flex-shrink:0;}
#nav-signin:hover{opacity:.88;}
#nav-ham{display:none;color:#aaa;padding:4px;flex-shrink:0;}
#mob{position:fixed;top:var(--navh);left:0;right:0;background:#111;border-bottom:1px solid var(--bdr);z-index:499;padding:0 24px;transform:translateY(-110%);transition:transform .28s ease;}
#mob.show{transform:none;}
#mob a{display:block;padding:12px 0;font-size:14px;color:#aaa;border-bottom:1px solid var(--bdr);transition:color .2s;}
#mob a:last-child{border:none;}#mob a:hover{color:var(--or);}

/* ── PAGE HEADER ── */
.page-head{margin-top:var(--navh);padding:40px 0 32px;border-bottom:1px solid var(--bdr);background:#111;}
.page-head-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.page-head h1{font-family:'Syne',sans-serif;font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-0.03em;}
.page-head h1 span{color:var(--or);}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:#555;margin-top:6px;}
.breadcrumb a{color:#555;transition:color .2s;}
.breadcrumb a:hover{color:var(--or);}
.breadcrumb svg{flex-shrink:0;}

/* ── LAYOUT ── */
.shop-layout{display:grid;grid-template-columns:240px 1fr;gap:28px;padding:32px 0 64px;}

/* ── FILTERS SIDEBAR ── */
.filters{flex-shrink:0;}
.filter-box{background:#111;border:1px solid var(--bdr);border-radius:var(--rlg);padding:20px;margin-bottom:14px;}
.filter-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.filter-title svg{transition:transform .2s;flex-shrink:0;}
.filter-title.closed svg{transform:rotate(-90deg);}
.filter-content{display:flex;flex-direction:column;gap:8px;}
.filter-content.hidden{display:none;}

/* Category items */
.cat-row{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;cursor:pointer;transition:all .15s;border-bottom:1px solid var(--bdr);}
.cat-row:hover{background:rgba(255,255,255,.03);}
.cat-row.active{background:var(--odim);}
.cat-row-left{display:flex;align-items:center;gap:10px;}
.cat-row-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--or);flex-shrink:0;}
.cat-row-icon:empty{display:none;}
.cat-row-icon:not(:empty){background:var(--bg3);border:1px solid var(--bdr);}
.cat-row-name{font-size:13px;font-weight:500;color:var(--sil);}
.cat-row.active .cat-row-name{color:var(--or);}
.cat-row-right{display:flex;align-items:center;gap:6px;}
.cat-row-cnt{font-size:10px;color:var(--sil2);}
.cat-row-arrow{color:var(--sil2);transition:transform .25s;flex-shrink:0;}
.cat-row.active .cat-row-arrow{transform:rotate(90deg);color:var(--or);}
.cat-subs{overflow:hidden;max-height:0;transition:max-height .3s ease;background:rgba(0,0,0,.3);}
.cat-subs.open{max-height:400px;}
.cat-sub-link{display:flex;align-items:center;justify-content:space-between;padding:9px 16px 9px 54px;font-size:12px;color:var(--sil2);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.04);transition:all .15s;}
.cat-sub-link:hover,.cat-sub-link.active{color:var(--or);background:var(--odim);}
.cat-sub-cnt{font-size:10px;color:var(--sil2);}

/* Price range */
.price-inputs{display:flex;align-items:center;gap:6px;margin-top:4px;width:100%;min-width:0;}
.price-in{flex:1;min-width:0;width:0;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r);padding:7px 8px;font-size:12px;color:#fff;outline:none;transition:border-color .2s;}
.price-in:focus{border-color:var(--obdr);}
.price-in::placeholder{color:#555;}
.price-sep{color:#555;font-size:12px;flex-shrink:0;}

/* Brand checkboxes */
.brand-item{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer;font-size:13px;color:#aaa;transition:color .2s;}
.brand-item:hover{color:#fff;}
.brand-item input[type=checkbox]{accent-color:var(--or);width:14px;height:14px;cursor:pointer;}
.brand-item.checked{color:#fff;}

/* Rating filter */
.rating-item{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer;font-size:12px;color:#aaa;transition:color .2s;}
.rating-item:hover{color:#fff;}
.rating-item.active{color:var(--or);}
.stars-s{color:var(--or);letter-spacing:1px;font-size:12px;}
.stars-e{color:#333;letter-spacing:1px;font-size:12px;}

/* Clear filters btn */
.clear-btn{width:100%;padding:8px;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r);color:#aaa;font-size:12px;cursor:pointer;transition:all .2s;margin-top:4px;}
.clear-btn:hover{border-color:var(--obdr);color:var(--or);}

/* ── PRODUCTS AREA ── */
.products-area{}

/* Toolbar */
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.results-count{font-size:13px;color:#555;}
.results-count span{color:#fff;font-weight:500;}

/* Active filter tags */
.active-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.filter-tag{display:flex;align-items:center;gap:5px;padding:4px 10px;background:var(--odim);border:1px solid var(--obdr);border-radius:var(--pill);font-size:11px;color:var(--or);cursor:pointer;transition:background .15s;}
.filter-tag:hover{background:rgba(255,107,0,.18);}
.filter-tag svg{color:var(--or);}

/* Sort select */
.sort-select{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--pill);padding:7px 32px 7px 14px;font-size:12px;color:#aaa;cursor:pointer;outline:none;transition:border-color .2s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
.sort-select:focus{border-color:var(--obdr);}

/* View toggle */
.view-btns{display:flex;gap:4px;}
.view-btn{width:32px;height:32px;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:#555;cursor:pointer;transition:all .2s;}
.view-btn.active{background:var(--odim);border-color:var(--obdr);color:var(--or);}
.view-btn:hover{color:#fff;}

/* Product grid */
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.p-grid.list{grid-template-columns:1fr;}

/* Card */
.pc{background:#111;border:1px solid var(--bdr);border-radius:var(--rlg);overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s;}
.pc:hover{border-color:var(--obdr);transform:translateY(-3px);}
.pc-img{position:relative;height:185px;background:var(--bg3);overflow:hidden;}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.pc:hover .pc-img img{transform:scale(1.04);}
.pc-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--bg4);}
.pc-bdg{position:absolute;top:9px;left:9px;font-size:9px;font-weight:700;padding:3px 8px;border-radius:var(--pill);}
.b-new{background:var(--or);color:#000;}.b-sale{background:#ef4444;color:#fff;}
.pc-wsh{position:absolute;top:7px;right:7px;width:30px;height:30px;background:rgba(0,0,0,.7);border:1px solid var(--bdr);border-radius:var(--pill);display:flex;align-items:center;justify-content:center;color:#aaa;opacity:0;transition:opacity .2s,background .2s;}
.pc:hover .pc-wsh{opacity:1;}
.pc-wsh:hover,.pc-wsh.on{background:#ef4444;color:#fff;border-color:#ef4444;}
.pc-body{padding:13px;}
.pc-brand{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#555;margin-bottom:4px;}
.pc-name{font-family:'Roboto',sans-serif;font-size:14px;font-weight:600;margin-bottom:7px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;}
.pc-stars{display:flex;align-items:center;gap:2px;margin-bottom:9px;}
.pc-foot{display:flex;align-items:center;justify-content:space-between;}
.pc-price{font-family:'Roboto Mono',monospace;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;}
.pc-price.s{color:var(--or);}
.pc-old{font-size:11px;color:#555;text-decoration:line-through;margin-left:5px;}
.pc-add{width:32px;height:32px;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--pill);display:flex;align-items:center;justify-content:center;color:#aaa;transition:all .2s;}
.pc-add:hover{background:var(--or);border-color:var(--or);color:#000;}

/* List view card */
.p-grid.list .pc{display:grid;grid-template-columns:180px 1fr;}
.p-grid.list .pc-img{height:100%;min-height:160px;}
.p-grid.list .pc-name{-webkit-line-clamp:1;}

/* Skeleton */
.sk{background:#111;border:1px solid var(--bdr);border-radius:var(--rlg);animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Empty */
.empty-state{text-align:center;padding:60px 20px;color:#555;}
.empty-state svg{margin:0 auto 16px;opacity:.2;}
.empty-state h3{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;color:#aaa;margin-bottom:8px;}
.empty-state p{font-size:13px;}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:40px;flex-wrap:wrap;}
.pg-btn{width:36px;height:36px;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:#aaa;transition:all .2s;}
.pg-btn:hover{border-color:var(--obdr);color:var(--or);}
.pg-btn.active{background:var(--or);border-color:var(--or);color:#000;font-weight:700;}
.pg-btn:disabled{opacity:.3;cursor:not-allowed;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:var(--pill);font-family:'Roboto',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap;border:1px solid transparent;}
.btn-or{background:var(--or);color:#000;border-color:var(--or);}
.btn-or:hover{background:var(--or2);}
.btn-gh{background:var(--bg3);color:#aaa;border-color:var(--bdr);}
.btn-gh:hover{color:#fff;border-color:var(--bdr2);}
.btn-sm{padding:6px 14px;font-size:12px;}
.apply-btn{width:100%;padding:9px;background:var(--or);border:none;border-radius:var(--r);color:#000;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .2s;margin-top:8px;}
.apply-btn:hover{opacity:.88;}

/* ── CART DRAWER ── */
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:600;opacity:0;pointer-events:none;transition:opacity .3s;}
#overlay.on{opacity:1;pointer-events:all;}
#drawer{position:fixed;top:0;right:0;width:390px;max-width:100%;height:100vh;background:#111;border-left:1px solid var(--bdr);z-index:601;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1);}
#drawer.on{transform:none;}
#dr-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bdr);font-family:'Syne',sans-serif;font-size:16px;font-weight:700;flex-shrink:0;}
#dr-x{width:30px;height:30px;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--pill);display:flex;align-items:center;justify-content:center;color:#aaa;cursor:pointer;transition:color .2s;}
#dr-x:hover{color:#fff;}
#dr-body{flex:1;overflow-y:auto;padding:12px 20px;}
.di{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--bdr);}
.di:last-child{border:none;}
.di-img{width:56px;height:56px;background:var(--bg3);border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.di-img img{width:100%;height:100%;object-fit:cover;}
.di-info{flex:1;min-width:0;}
.di-brand{font-size:9px;color:#555;text-transform:uppercase;letter-spacing:1px;}
.di-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 5px;}
.di-price{font-size:12px;color:var(--or);font-weight:600;}
.di-qty{display:flex;align-items:center;gap:5px;margin-top:5px;}
.di-qb{width:22px;height:22px;background:var(--bg3);border:1px solid var(--bdr);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#aaa;cursor:pointer;font-size:13px;transition:all .15s;}
.di-qb:hover{border-color:var(--obdr);color:var(--or);}
.di-qn{font-size:13px;font-weight:600;min-width:18px;text-align:center;}
.di-rm{color:#555;padding:4px;cursor:pointer;transition:color .2s;}
.di-rm:hover{color:#ef4444;}
#dr-foot{padding:14px 20px;border-top:1px solid var(--bdr);flex-shrink:0;}
#dr-tot{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
#dr-tot-l{color:#aaa;font-size:13px;}
#dr-tot-v{font-family:'Syne',sans-serif;font-size:19px;font-weight:700;color:var(--or);}

/* ── TOAST ── */
#toasts{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.t{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r);font-size:13px;min-width:230px;animation:tin .28s ease;box-shadow:0 4px 20px rgba(0,0,0,.5);}
.t.ok{border-color:rgba(34,197,94,.3);}.t.err{border-color:rgba(239,68,68,.3);}.t.wrn{border-color:rgba(245,158,11,.3);}
@keyframes tin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.w100{width:100%;}.mt8{margin-top:8px;}
.empty-cart{text-align:center;padding:40px 20px;color:#555;font-size:13px;}
.empty-cart strong{display:block;font-size:14px;color:#aaa;margin-bottom:4px;}

/* ── RESPONSIVE ── */
@media(max-width:1024px){.shop-layout{grid-template-columns:200px 1fr;gap:20px;}.p-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){
  #nav-links,#nav-search{display:none;}#nav-ham{display:flex;}
  .shop-layout{grid-template-columns:1fr;}
  .filters{display:none;}.filters.mob-show{display:block;}
  .p-grid{grid-template-columns:repeat(2,1fr);}
  .p-grid.list .pc{grid-template-columns:120px 1fr;}
  .p-grid.list .pc-img{min-height:130px;}
  #filter-toggle-btn{display:flex;}
}
@media(max-width:480px){.p-grid{grid-template-columns:1fr;}}
#filter-toggle-btn{display:none;}



[dir="rtl"]{text-align:right;direction:rtl;}
[dir="rtl"] #nav .wrap,[dir="rtl"] #nav-links{flex-direction:row-reverse;}
[dir="rtl"] .logo{flex-direction:row!important;direction:ltr!important;}
[dir="rtl"] .slide-txt{left:auto;right:0;padding:0 60px 0 20px;}
[dir="rtl"] .slide::after{background:linear-gradient(to left,rgba(0,0,0,.55) 0%,rgba(0,0,0,.1) 55%,transparent 100%);}
[dir="rtl"] .sec-head,[dir="rtl"] .ft-bot,[dir="rtl"] #nav-right{flex-direction:row-reverse;}
[dir="rtl"] .ft-top,[dir="rtl"] .cat-layout{direction:rtl;}
[dir="rtl"] #drawer{left:0;right:auto;transform:translateX(-100%);border-left:none;border-right:1px solid rgba(255,255,255,.08);}
[dir="rtl"] #drawer.on{transform:none;}
[dir="rtl"] .cat-sub-link{padding:9px 54px 9px 16px;}
[dir="rtl"] .cat-row-left{flex-direction:row-reverse;}
[dir="rtl"] .pc-foot{flex-direction:row-reverse;}
[dir="rtl"] .eyebrow::before{margin-right:0;margin-left:7px;}
[dir="rtl"] body{font-family:'Noto Kufi Arabic','Roboto',sans-serif;}


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