/* ============================================================
   trending — inverted typographic rows
   ============================================================ */
/* the list ends on a rule, so the section needs less air beneath it
   than a block that ends on an image */
.trend{padding-block:var(--space-lg) 0}
/* On a phone every row of the list is already a link into the shop, so the
   row button under it only repeated the offer. The flex gap sits between
   items, so removing it leaves no space behind. */
@media (max-width:700px){
  .trend .sec-head > .link{display:none}
}
.tr{border-top:1px solid var(--line-soft)}
.tr__row{
  display:grid;grid-template-columns:56px 1fr 1.1fr auto;align-items:center;gap:clamp(12px,2vw,34px);
  padding:clamp(13px,1.5vw,20px) 0;border-bottom:1px solid var(--line-soft);
  position:relative;isolation:isolate;transition:color .45s var(--ease);
}
.tr__row::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--slow);
}
.tr__row:hover{color:var(--on-dark)}
.tr__row:hover::before{transform:scaleY(1)}
.tr__i{font-size:var(--t-label);letter-spacing:.12em;color:var(--ink-25);font-variant-numeric:tabular-nums;
  transition:color .4s,transform .3s var(--ease)}
.tr__row:hover .tr__i{color:var(--accent-soft)}
/* same ramp as the brand list, so scrolling between the two is not a jump */
.tr__t{font-size:clamp(1.875rem,2.2vw,2.5rem);font-weight:500;letter-spacing:-.018em;line-height:1.08}
.tr__d{color:var(--ink-45);font-size:var(--t-meta);transition:color .4s}
.tr__row:hover .tr__d{color:rgba(242,237,230,.68)}
.tr__go{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;transition:transform .3s var(--ease)}
.tr__go svg{width:13px;height:13px}

/* the row gathers inward on hover, exactly as the brand list does */
@media (hover:hover) and (min-width:900px){
  .tr__row:hover .tr__i{transform:translateX(10px)}
  .tr__row:hover .tr__go{transform:translateX(-10px)}
}
.tr__t em{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.12em}
@media (max-width:860px){
  .tr__row{grid-template-columns:40px 1fr auto;padding-inline:0}
  .tr__t{font-size:clamp(1.35rem,5.6vw,1.75rem)}
  .tr__d{display:none}
}