/* SEKUREX — premium category split on the home catalogue (owner, 14 Oct 2026).

   - .cat-index  four equal tiles under "What we hold right now", one per premium
                 category, each jumping to its group below. Equal weight on purpose:
                 no category may own the home page (README copy rules).
   - .cat-head   the labeled divider that opens each group. The bands under it keep
                 their own sub-line eyebrows, so the category name is said once.
   - .ugg-proof  the three-photo row under the UGG Tazz band.

   A new file rather than rules in shop.css: the zone holds /css/* for 4 hours. */

/* ---------- index ---------- */
.cat-index{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  margin:-18px 0 72px;padding:0;list-style:none;
}
@media (min-width:900px){.cat-index{grid-template-columns:repeat(4,1fr);gap:16px;}}
.cat-index a{
  position:relative;display:flex;flex-direction:column;height:100%;
  padding:20px 18px 18px;border:1px solid var(--edge-2);border-radius:3px;
  background:var(--plate);
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.cat-index a::before{
  content:'';position:absolute;left:18px;right:18px;top:0;height:1px;
  background:linear-gradient(90deg,var(--gold-500),transparent);
}
.cat-index a:hover{
  border-color:var(--hair-strong);transform:translateY(-3px);
  box-shadow:0 22px 48px rgba(0,0,0,0.55),0 0 28px rgba(217,164,65,0.10);
}
.cat-num{
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.22em;color:var(--gold-600);margin-bottom:12px;
}
.cat-name{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(14px,1.6vw,17px);line-height:1.15;letter-spacing:-0.005em;color:var(--bone);
  margin-bottom:8px;
}
.cat-name small{
  display:block;margin-bottom:3px;
  font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:0.26em;color:var(--gold-400);
}
.cat-desc{font-size:12.5px;line-height:1.55;color:var(--ash);margin-bottom:14px;}
.cat-go{
  margin-top:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--gold-300);
}
.cat-index a:hover .cat-go{color:var(--gold-200);}
@media (prefers-reduced-motion:reduce){.cat-index a:hover{transform:none;}}

/* ---------- group divider ---------- */
.cat-head{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:0 0 34px;padding-top:6px;scroll-margin-top:96px;
}
/* A compact band ends close to its caption; give the next divider room to read as a break. */
.band + .cat-head{margin-top:36px;}
.cat-head h3{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--gold-300);
}
.cat-head h3 span{color:var(--gold-600);letter-spacing:0.2em;}
.cat-head::after{
  content:'';flex:1 1 60px;order:2;height:1px;
  background:linear-gradient(90deg,var(--hair-strong),transparent);
}
.cat-head a{
  order:3;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ash);
}
.cat-head a:hover{color:var(--gold-200);}

/* ---------- UGG proof row ---------- */
.ugg-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;}
.ugg-proof a{
  display:block;border:1px solid var(--hair);border-radius:2px;overflow:hidden;background:#06060c;
  transition:border-color var(--transition);
}
.ugg-proof a:hover{border-color:var(--gold-400);}
/* The row sits inside .band-visual, whose img rule caps height and fades the edges for the
   main photo; thumbnails take neither. */
.band-visual .ugg-proof img{
  display:block;width:100%;max-height:none;height:auto;aspect-ratio:4 / 3;object-fit:cover;
  -webkit-mask-image:none;mask-image:none;
}