:root{
  
  --shadow-1: 0 1px 2px rgba(0,0,0,.08);
  --shadow-2: 0 6px 18px rgba(0,0,0,.22);
  
  --text: #e6edf7;
  --title-card:  #e1e7f0;
  --title-modal: #eef2f7;
  
  --focus: rgba(98,168,255,.35);
  
  --good:#3ddc97; --warn:#fbbf24; --bad:#ef4444; --info:#60a5fa;
  
  --r-card:16px; --r-img:14px; --r-btn:12px;
}


.card{
  box-shadow: var(--shadow-1);
  border-radius: var(--r-card);
}
.card:hover{ box-shadow: var(--shadow-2); }


.btn-primary{
  transition: transform .05s ease, box-shadow .15s ease, filter .12s ease;
}
.btn-primary:hover{
  filter: brightness(1.05);
  box-shadow: 0 8px 16px rgba(59,130,246,.25);
}
.btn-primary:active{ transform: translateY(1px); }


.btn,.icon-btn,input,select,.chip,.tag,.pill:focus-visible{
  outline:0; box-shadow: 0 0 0 3px var(--focus);
}


body{ color: var(--text); }
.card .title{ color: var(--title-card) !important; }
.product-dialog .pd-title, .sheet-head .pd-title{ color: var(--title-modal) !important; }


.price{ font-variant-numeric: tabular-nums; }


.card .title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.card .body{ display: grid; grid-template-rows: auto auto auto 1fr; }
.card .actions{ margin-top:auto; }


img{ transition: opacity .16s ease; }
img.lazy:not(.loaded){ opacity:0; }
img.loaded{ opacity:1; }


.skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%;
  animation: shine 1.2s ease-in-out infinite;
  border-radius: var(--r-img);
}
@keyframes shine{ 0%{background-position: 100% 0} 100%{background-position: 0 0} }


#q:focus{ box-shadow: 0 0 0 3px var(--focus); border-color: rgba(255,255,255,0.2); }


.chip.active, .tag.active, .pill.active{
  background: var(--chip-active, #2f3a49);
  color: #e6edf7;
  box-shadow: var(--shadow-1);
}


.tile .tname{
  display:inline-block;
  padding:4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}


.card .badge, .tile .badge{
  position:absolute; top:8px; right:8px;
  padding:2px 8px; border-radius:999px;
  font-size:12px; font-weight:700;
  background: var(--badge-bg, #ef4444); color: var(--badge-text, #fff);
  box-shadow: var(--shadow-1);
}


.empty-state{
  display:flex; gap:12px; align-items:center; justify-content:center;
  min-height: 200px;
  color: #a7b1c2;
}
.empty-state .btn{ margin-left:8px; }


.sheet-foot{
  position: sticky; bottom: 0;
  background: rgba(20,24,31,0.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-top:1px solid var(--border);
  z-index: 1;
}


.product-dialog .sheet-body{ gap: 16px; }
.product-dialog .pd-text{ color: #cbd5e1; }
.product-dialog .pd-img{ max-height: 60vh; }


.qty .btn{
  border-radius: var(--r-btn);
  transition: transform .05s ease, box-shadow .15s ease;
}
.qty .btn:hover{ box-shadow: var(--shadow-1); }
.qty .btn:active{ transform: translateY(1px); }


#cats .cat-item.active>button{
  border:1px solid var(--accent);
  box-shadow: inset 0 0 0 1px rgba(98,168,255,.2);
  background: rgba(98,168,255,.08);
}
#cats .cat-item>button{
  border-radius: 12px; width:100%; text-align:left; padding:6px; gap:8px;
  display:flex; align-items:center;
}


mark{
  background: rgba(98,168,255,.18);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}


a:hover{ text-decoration: none; }


.card{ border-radius: var(--r-card); }
.card .thumb, .tile .timg, .pd-img{ border-radius: var(--r-img); }
.btn, .button, .icon-btn{ border-radius: var(--r-btn); }




.card .thumb.skeleton, .tile .timg.skeleton, .pd-img.skeleton{ background-clip: padding-box; }


.btn-primary:hover{
  background-image: linear-gradient(to bottom, rgba(255,255,255,.04), rgba(0,0,0,.06));
}


.tile .timg{ padding: 8px; }


.card .price{ border-top: 1px solid var(--border); padding-top: 8px; margin-top: 6px; }




.tile{ transition: transform .12s ease, border-color .12s ease; }
.tile:hover{ transform: translateY(-1px); border-color:#2a3142; }



.mini-cart, .mini_cart, .cart-drawer, .cart_drawer, .cart-popup, .cart_popup {
  display: none !important;
  visibility: hidden !important;
}