/* ==========================================================================
   PRODUCTS PAGE — additional styles
   Loaded after style.css
   ========================================================================== */

/* ---------- PAGE HERO ---------- */
.page-hero{
  position:relative;
  padding:96px 0 84px;
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);
  overflow:hidden;
}
.page-hero::after{
  content:'';
  position:absolute; right:-120px; top:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(230,57,70,.22),transparent 68%);
  pointer-events:none;
}
.page-hero__inner{ position:relative; z-index:1; max-width:800px; }
.page-hero h1{ color:#fff; margin-bottom:16px; font-size:clamp(2rem,4.4vw,3.4rem); font-weight:800; line-height:1.15; }
.page-hero p{ color:rgba(255,255,255,.80); font-size:1.06rem; margin:0; max-width:62ch; }

.breadcrumb{
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; color:rgba(255,255,255,.62); margin-bottom:18px;
}
.breadcrumb a{ color:rgba(255,255,255,.78); transition:color var(--t-fast); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span[aria-hidden]{ color:var(--accent); font-size:1.05rem; }

/* =========================================================
   PRODUCT FILTERS
   ========================================================= */
.product-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:52px;
}
.product-filter{
  display:inline-flex;
  align-items:center;
  padding:11px 22px;
  font-family:var(--font-head);
  font-size:.87rem;
  font-weight:600;
  color:var(--navy);
  background:#fff;
  border:1.5px solid var(--line-strong);
  border-radius:100px;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.product-filter:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-2px);
}
.product-filter.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 10px 24px rgba(230,57,70,.28);
}

/* =========================================================
   PRODUCTS GRID
   ========================================================= */
.products-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}

/* Card */
.product-item{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t), opacity .4s var(--ease);
}
.product-item:hover{
  transform:translateY(-8px);
  box-shadow:var(--sh-lg);
  border-color:transparent;
}

/* Media */
.product-item__media{
  position:relative;
  aspect-ratio:16 / 11;
  overflow:hidden;
  background:#e9eef3;
}
.product-item__img{
  position:absolute; inset:0;
  background-image:var(--img);
  background-size:cover;
  background-position:center;
  transition:transform .8s cubic-bezier(.22,.7,.25,1);
}
.product-item:hover .product-item__img{
  transform:scale(1.07);
}

/* Category tag */
.product-item__tag{
  position:absolute;
  top:14px; left:14px;
  z-index:2;
  font-family:var(--font-head);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(11,31,51,.72);
  backdrop-filter:blur(6px);
  padding:5px 11px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.18);
}

/* Body */
.product-item__body{
  padding:22px 22px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.product-item__body h3{
  font-size:1.02rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 10px;
  line-height:1.3;
}
.product-item__body p{
  font-size:.87rem;
  line-height:1.65;
  color:var(--muted);
  margin:0 0 18px;
  flex:1;
}
.product-item__body .link-arrow{
  align-self:flex-start;
  font-size:.83rem;
}

/* ---------- Empty state ---------- */
.products-empty{
  text-align:center;
  padding:64px 24px;
  background:#fff;
  border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);
  margin-top:20px;
}
.products-empty__icon{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  margin:0 auto 22px;
  border-radius:50%;
  background:rgba(230,57,70,.10);
}
.products-empty__icon svg{
  width:32px; height:32px;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.products-empty h3{
  font-size:1.15rem;
  margin-bottom:8px;
}
.products-empty p{
  font-size:.94rem;
  color:var(--muted);
  margin-bottom:22px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1200px){
  .products-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:1024px){
  .page-hero{ padding:84px 0 72px; }
  .products-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .product-filter{ padding:10px 18px; font-size:.82rem; }
}

@media (max-width:768px){
  .page-hero{ padding:72px 0 62px; }
  .page-hero h1{ font-size:clamp(1.6rem,6vw,2.2rem); }
  .page-hero p{ font-size:.96rem; }

  .product-filters{
    gap:8px;
    margin-bottom:40px;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .product-filters::-webkit-scrollbar{ display:none; }
  .product-filter{ flex:none; }

  .products-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .product-item__body{ padding:20px 18px 22px; }
  .product-item__body h3{ font-size:.98rem; }
  .product-item__body p{ font-size:.84rem; }
}

@media (max-width:560px){
  .page-hero{ padding:62px 0 54px; }
  .breadcrumb{ font-size:.76rem; margin-bottom:14px; }

  .products-grid{ grid-template-columns:1fr; gap:18px; }

  .products-empty{ padding:44px 20px; }
}