/* ═══ GIFTS · SECTION 3 — CATEGORIES (type rows that open on hover) ═══ */
.cats{position:relative;padding:clamp(74px,12vh,150px) var(--gut);
  background:#080808;border-top:1px solid var(--border)}
.cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:clamp(30px,5vh,54px)}
.cat-head h2{margin-top:20px;font-size:clamp(1.6rem,4.2vw,3.3rem);line-height:1;max-width:15ch}
.cat-head .aside{font-size:12.5px;line-height:1.6;color:var(--dim);max-width:24ch;
  text-align:right;flex-shrink:0}
@media(max-width:760px){.cat-head{flex-direction:column;align-items:flex-start}
  .cat-head .aside{text-align:left}}
.cat-list{border-top:1px solid var(--border)}
.cat{position:relative;overflow:hidden;border-bottom:1px solid var(--border);
  opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .75s cubic-bezier(.16,1,.3,1)}
.cat.is-in{opacity:1;transform:none}
.cat::before{content:"";position:absolute;inset:0;background:var(--surface);
  transform:translateX(-101%) skewX(-9deg);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);z-index:0}
.cat:hover::before{transform:translateX(0) skewX(-9deg)}
.cat-row{position:relative;z-index:1;display:flex;align-items:center;gap:18px;
  padding:clamp(20px,3.2vh,34px) clamp(0px,2vw,28px);
  transition:padding .5s cubic-bezier(.2,.7,.2,1)}
.cat:hover .cat-row{padding-left:clamp(14px,3.4vw,52px)}
.cat .n{font-size:10.5px;letter-spacing:.16em;font-weight:700;color:var(--dim);
  flex-shrink:0;transition:color .4s ease}
.cat:hover .n{color:var(--cut)}
.cat h3{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:800;
  font-size:clamp(1.15rem,2.6vw,2.1rem);line-height:1.04;letter-spacing:-.028em;
  color:var(--dim);transition:color .45s ease}
.cat:hover h3{color:var(--text)}
.cat .tags{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;
  max-width:46%;opacity:0;transform:translateX(14px);
  transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.cat:hover .tags{opacity:1;transform:none}
.cat .tags span{font-size:10px;letter-spacing:.11em;font-weight:600;color:var(--muted);
  border:1px solid var(--border);padding:6px 10px;white-space:nowrap}
@media(max-width:900px){.cat .tags{display:none}}
.cat .note{position:relative;z-index:1;padding:0 clamp(0px,2vw,28px) clamp(18px,2.6vh,26px);
  font-size:.93rem;line-height:1.6;color:var(--muted);max-width:58ch;
  transition:padding .5s cubic-bezier(.2,.7,.2,1)}
.cat:hover .note{padding-left:clamp(14px,3.4vw,52px)}

@media(prefers-reduced-motion:reduce){
  .cat{opacity:1;transform:none}
  .cat h3{color:var(--text)}
}