/* =========================================================
   Waters Funerals - Merchandise range page (e.g. Status Range)
   Blocks: breadcrumbs, index
   (merch-hero and catalogue come from merchandise.css)
   ========================================================= */

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  position:relative;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
  color:rgba(255,255,255,.5);
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.breadcrumbs__link{transition:color .3s ease;}
.breadcrumbs__link:hover{color:#fff;}
.breadcrumbs__separator{color:rgba(255,255,255,.3);}
.breadcrumbs__current{color:var(--accent-2);}

/* ---------- Sibling ranges ---------- */
.index__siblings{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.index__sibling{
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text-muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.index__sibling:hover{color:#fff;border-color:rgba(239,104,0,.6);}
.index__sibling.is-active{background:var(--accent-2);border-color:var(--accent-2);color:#fff;}

/* ---------- Index list ---------- */
.index{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.index__head,.index__row{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr auto;
  gap:24px;
  align-items:center;
  padding:16px 24px;
}
.index__head{
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
}
.index__row{
  color:inherit;
  border-top:1px solid rgba(255,255,255,.06);
  transition:background .3s ease;
}
.index__row:first-of-type{border-top:none;}
.index__row:hover{background:rgba(255,255,255,.045);}
.index__product{display:flex;align-items:center;gap:18px;min-width:0;}
.index__thumb{
  width:112px;
  height:76px;
  flex:0 0 112px;
  object-fit:contain;
  padding:6px;
  border-radius:8px;
  background:#fff;
  border:1px solid rgba(255,255,255,.1);
  transition:border-color .3s ease;
}
.index__row:hover .index__thumb{border-color:rgba(239,104,0,.55);}
.index__name{
  font-family:var(--font-display-bold);
  font-size:20px;
  line-height:1.1;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fff;
}
.index__cell{
  font-family:var(--font-body);
  font-size:14px;
  color:var(--text-muted);
}
.index__action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent-2);
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.index__arrow{display:inline-block;transition:transform .3s var(--ease);}
.index__row:hover .index__arrow{transform:translateX(4px);}

@media (max-width:991px){
  .index__siblings{justify-content:flex-start;}
}
@media (max-width:767px){
  .index__head{display:none;}
  .index__row{grid-template-columns:1fr auto;gap:14px;padding:14px 16px;}
  .index__cell{display:none;}
  .index__thumb{width:88px;height:60px;flex-basis:88px;}
  .index__name{font-size:16px;}
}