/* =========================
   Products page - ecommerce style
   ========================= */

.shop-head{ padding-bottom: 10px; }
.shop-head-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.shop-head-right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.shop-search input{ width: 300px; }

.shop-layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:16px;
  align-items:start;
}

/* Filter sidebar */
.shop-filter{ position:sticky; top:88px; }
.shop-filter-hd{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(230,238,245,.85);
  background: rgba(15,23,42,.02);
}
.shop-filter-title{ font-weight:900; letter-spacing:-.01em; }
.shop-filter-reset{ padding:8px 10px; border-radius:12px; }

.shop-filter-bd{ padding:14px; display:flex; flex-direction:column; gap:14px; }
.shop-group{ border:1px solid rgba(230,238,245,.9); background:#fff; border-radius:16px; padding:12px; }
.shop-label{ font-weight:900; margin-bottom:10px; letter-spacing:-.01em; }

.shop-check, .shop-radio{
  display:flex; align-items:center; gap:10px;
  font-weight:700;
  color: rgba(15,23,42,.86);
  padding:8px 8px;
  border-radius:12px;
}
.shop-check:hover, .shop-radio:hover{ background: rgba(37,99,235,.06); }
.shop-check input, .shop-radio input{ width:16px; height:16px; }

.shop-price{ display:flex; align-items:center; gap:8px; }
.shop-price .control{ border-radius:12px; padding:10px 10px; }
.shop-dash{ color:#94a3b8; font-weight:900; }
.shop-apply{ width:100%; }

.shop-note{
  border:1px dashed rgba(203,213,225,.8);
  border-radius:16px;
  padding:12px;
  background: rgba(255,255,255,.9);
}
.shop-note-title{ font-weight:900; margin-bottom:6px; }

/* Bar */
.shop-bar{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.shop-bar-left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.shop-result{ display:flex; align-items:baseline; gap:6px; }
.shop-strong{ font-weight:1000; font-size:18px; color: var(--pri2); }

.shop-tabs{
  display:flex;
  gap:8px;
  padding:6px;
  border-radius:14px;
  border:1px solid rgba(230,238,245,.95);
  background:#fff;
}
.shop-tab{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  font-weight:900;
  color: rgba(15,23,42,.72);
}
.shop-tab.is-active{
  border-color: rgba(37,99,235,.25);
  background: rgba(37,99,235,.08);
  color: var(--pri2);
}

.shop-bar-right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.shop-cart-btn{ position:relative; }
.shop-cart-badge{
  margin-left:8px;
  display:inline-flex;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.12);
  color: var(--pri2);
  font-weight:1000;
  border:1px solid rgba(37,99,235,.18);
}

.shop-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}


.shop-card{
  border:1px solid rgba(230,238,245,.95);
  background: rgba(255,255,255,.92);
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.shop-card:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 16px 38px rgba(2,6,23,.10);
}

.shop-media{ position:relative; }
.shop-img{
  height: 180px;
  border-radius:0;
  animation: shimmer 1.2s infinite linear;
}

.shop-badges{
  position:absolute;
  top:10px; left:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.shop-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:1000;
  border:1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(8px);
}
.shop-badge.hot{
  background: rgba(239,68,68,.14);
  color: rgba(185,28,28,.95);
  border-color: rgba(239,68,68,.18);
}
.shop-badge.sale{
  background: rgba(245,158,11,.16);
  color: rgba(180,83,9,.95);
  border-color: rgba(245,158,11,.20);
}

.shop-tags{
  position:absolute;
  bottom:10px; left:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.shop-tag{
  font-size:11px;
  padding:5px 9px;
  border-radius:999px;
  background: rgba(255,255,255,.80);
  border:1px solid rgba(230,238,245,.95);
  color: rgba(15,23,42,.82);
  font-weight:900;
}

.shop-body{ padding:12px; }
.shop-name{
  margin:0 0 8px;
  font-size:14.5px;
  line-height:1.25;
  letter-spacing:-.01em;
  font-weight:900;

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: 36px;
}

.shop-price-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.shop-price{ display:flex; align-items:baseline; gap:8px; }
.shop-price-now{
  font-weight:1000;
  color: rgba(220,38,38,.95);
  letter-spacing:-.01em;
}
.shop-price-old{
  font-size:12px;
  color:#94a3b8;
  text-decoration: line-through;
}
.shop-discount{
  font-size:12px;
  padding:5px 8px;
  border-radius:999px;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(230,238,245,.95);
  font-weight:900;
  color: rgba(15,23,42,.78);
  white-space:nowrap;
}

.shop-meta{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.shop-rating{ display:flex; align-items:center; gap:8px; }
.shop-stars{
  letter-spacing: 1px;
  font-size:12px;
  color: rgba(245,158,11,.95);
}
.shop-sold{ font-size:12px; }

.shop-actions{
  margin-top:12px;
  display:flex;
  gap:8px;
}
.shop-btn{ flex:1; padding:10px 12px; border-radius:14px; }

/* Pagination spacing */
.shop-pagination{ margin-top:16px; }

/* Drawer (cart) */
.shop-drawer{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
}
.shop-drawer.is-open{ display:block; }

.shop-drawer-backdrop{
  position:absolute; inset:0;
  background: rgba(2,6,23,.45);
}

.shop-drawer-panel{
  position:absolute;
  right:0; top:0;
  height:100%;
  width: 380px;
  max-width: 92vw;
  background:#fff;
  border-left:1px solid rgba(230,238,245,.95);
  box-shadow: 0 18px 50px rgba(2,6,23,.20);
  display:flex;
  flex-direction:column;
}

.shop-drawer-hd{
  padding:14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(230,238,245,.95);
}
.shop-drawer-title{ font-weight:1000; letter-spacing:-.01em; }
.shop-x{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid rgba(230,238,245,.95);
  background:#fff;
  cursor:pointer;
  font-weight:1000;
}

.shop-drawer-bd{
  padding:14px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.shop-cart-item{
  display:grid;
  grid-template-columns: 76px 1fr;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(230,238,245,.95);
  background: rgba(255,255,255,.92);
}
.shop-cart-thumb{ height:76px; border-radius:14px; }
.shop-cart-name{ font-weight:1000; margin-bottom:4px; }
.shop-cart-row{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.shop-cart-price{ font-weight:1000; color: rgba(220,38,38,.95); }

.shop-qty{ display:flex; align-items:center; gap:6px; }
.shop-qty button{
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid rgba(230,238,245,.95);
  background:#fff;
  cursor:pointer;
  font-weight:1000;
}
.shop-qty input{
  width:48px; height:34px;
  border-radius:12px;
  border:1px solid rgba(230,238,245,.95);
  text-align:center;
  font:inherit;
  outline:none;
}

.shop-drawer-ft{
  margin-top:auto;
  padding:14px;
  border-top:1px solid rgba(230,238,245,.95);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.shop-total{ display:flex; flex-direction:column; gap:4px; }
.shop-total-price{ font-weight:1000; font-size:18px; letter-spacing:-.01em; }
.shop-checkout{ padding:12px 14px; border-radius:14px; }

/* Responsive */
@media (max-width: 1100px){
  .shop-grid{ grid-template-columns: repeat(3, 1fr); }
  .shop-search input{ width: 240px; }
}
@media (max-width: 980px){
  .shop-layout{ grid-template-columns: 1fr; }
  .shop-filter{ position:relative; top:auto; }
  .shop-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .shop-grid{ grid-template-columns: repeat(2, 1fr); }
  .shop-search input{ width: 180px; }
}
@media (max-width: 420px){
  .shop-grid{ grid-template-columns: 1fr; }
}