:root{
  --frx-blue:#0b2f6b;
  --frx-blue-dark:#081f49;
  --frx-red:#e30613;
  --frx-red-dark:#b8050f;
  --frx-light:#f4f7fb;
}
body{ font-family:'Poppins', sans-serif; color:#1c2b3a; background:#fff; }

/* Shop */
.shop-hero{
  background:linear-gradient(100deg, #f1f4fb 0%, #e8eef8 55%, rgba(241,244,251,.7) 100%),
    url("../images/hero.png") right center / cover no-repeat;
  border-bottom:1px solid #e8eef5;
  padding:2.2rem 0 1.8rem;
}
.shop-breadcrumb{ font-size:.78rem; color:#8492a3; margin-bottom:.75rem; }
.shop-breadcrumb a{ color:var(--frx-blue); text-decoration:none; font-weight:600; }
.shop-breadcrumb a:hover{ text-decoration:underline; }
.shop-hero h1{
  font-weight:800; font-size:1.85rem; color:var(--frx-blue); margin:0 0 .4rem;
}
.shop-hero h1 span{ color:var(--frx-red); }
.shop-hero p{ margin:0; color:#4c5a6e; font-size:.92rem; max-width:520px; }

.shop-layout{ padding:2rem 0 3rem; background:#fafbfd; }
.shop-sidebar{
  background:#fff; border:1px solid #e8eef5; border-radius:8px; padding:1.2rem;
  position:sticky; top:1rem;
}
.shop-sidebar h3{
  font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  color:var(--frx-blue); margin:0 0 .9rem;
}
.shop-filter{ list-style:none; padding:0; margin:0 0 1.4rem; }
.shop-filter li{ margin-bottom:.35rem; }
.shop-filter button{
  width:100%; text-align:left; border:none; background:transparent;
  padding:.45rem .6rem; border-radius:5px; font-size:.82rem; font-weight:600;
  color:#4c5a6e; cursor:pointer; display:flex; justify-content:space-between;
  transition:background .15s ease, color .15s ease;
}
.shop-filter button:hover,
.shop-filter button.active{
  background:#f1f4fb; color:var(--frx-blue);
}
.shop-filter button .count{
  font-size:.7rem; background:#e8eef5; color:#6b7a8d;
  border-radius:999px; padding:.1rem .45rem; font-weight:700;
}
.shop-filter button.active .count{ background:var(--frx-blue); color:#fff; }

.shop-toolbar{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:.75rem; margin-bottom:1.25rem;
}
.shop-result{ font-size:.85rem; color:#6b7a8d; font-weight:600; }
.shop-result strong{ color:var(--frx-blue); }
.shop-sort{
  border:1px solid #d7dee7; border-radius:6px; padding:.45rem .7rem;
  font-size:.8rem; font-weight:600; color:#16233a; background:#fff;
}

.product-card{
  border:1px solid #e8eef5; border-radius:8px; overflow:hidden; height:100%;
  background:#fff; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(11,47,107,.12);
  border-color:#d5deea;
}
.product-card .img-wrap{
  height:180px; background:#fff; padding:0; position:relative; overflow:hidden;
}
.product-card .img-wrap img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .25s ease;
}
.product-card:hover .img-wrap img{ transform:scale(1.04); }
.product-card .cat-badge{
  position:absolute; top:.65rem; left:.65rem;
  background:rgba(11,47,107,.9); color:#fff; font-size:.65rem;
  font-weight:700; letter-spacing:.3px; padding:.25rem .5rem; border-radius:3px;
}
.product-card .body{
  padding:.85rem .9rem 1rem; display:flex; flex-direction:column; flex:1;
}
.product-card .pname{
  font-size:.86rem; font-weight:700; color:#16233a; line-height:1.35;
  min-height:2.4em; margin-bottom:.35rem;
}
.product-card .price{
  font-weight:800; color:var(--frx-blue); font-size:1.05rem; margin-top:auto;
}
.product-card .price .ttc{
  font-size:.65rem; font-weight:600; color:#8492a3; margin-left:.15rem;
}
.btn-add{
  background:var(--frx-red); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.4px; border:none; padding:.55rem .4rem; width:100%;
  border-radius:4px; margin-top:.7rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
}
.btn-add:hover{ background:var(--frx-red-dark); color:#fff; }
.btn-add i{ font-size:.9rem; }

@media (max-width: 575.98px){
  .product-card .img-wrap{ height:140px; }
  .product-card .body{ padding:.7rem .65rem .8rem; }
  .product-card .pname{ font-size:.78rem; }
  .btn-add{ font-size:.62rem; letter-spacing:.2px; padding:.5rem .25rem; }
}

.shop-empty{
  text-align:center; padding:3rem 1rem; color:#6b7a8d;
  background:#fff; border:1px dashed #d7dee7; border-radius:8px;
}