/* ─── Catalogue page ─── */
  .cat-hero{
    position:relative;padding:160px 0 60px;overflow:hidden;
  }
  .cat-hero::before{
    content:'';position:absolute;inset:-100px 0 0;pointer-events:none;
    background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,78,205,0.16) 0%, transparent 60%),
      radial-gradient(ellipse 30% 30% at 10% 30%, rgba(91,127,255,0.12) 0%, transparent 50%),
      radial-gradient(ellipse 30% 30% at 90% 25%, rgba(163,123,255,0.12) 0%, transparent 50%);
  }
  .cat-hero::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 70% 50% at 50% 0%, black 30%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 70% 50% at 50% 0%, black 30%, transparent 70%);
  }
  .cat-hero > .container{position:relative}
  .cat-hero h1{
    text-align:center;font-size:88px;line-height:0.96;font-weight:700;letter-spacing:-0.04em;margin:24px 0 0;
  }
  .cat-hero h1 .grad{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .cat-hero .sub{margin:24px auto 0;max-width:560px;font-size:18px;color:var(--dim);line-height:1.55;text-align:center}
  .cat-hero .live{
    display:flex;justify-content:center;gap:32px;margin-top:36px;flex-wrap:wrap;
  }
  .cat-hero .live > div{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim)}
  .cat-hero .live .num{color:#fff;font-weight:600;letter-spacing:-0.005em;font-family:'Geist',sans-serif;font-size:18px;text-transform:none}
  .cat-hero .live .pulse{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink);animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{50%{opacity:0.5;transform:scale(0.85)}}
  .cat-hero .badge{display:flex;justify-content:center}

  /* Current collection banner */
  .current-collection{
    margin:48px 0 0;padding:36px 36px;
    background:linear-gradient(135deg, rgba(255,78,205,0.12) 0%, rgba(163,123,255,0.06) 50%, rgba(91,127,255,0.08) 100%);
    border:1px solid rgba(255,78,205,0.2);border-radius:18px;
    position:relative;overflow:hidden;
  }
  .current-collection .cc-row{display:grid;grid-template-columns:1.2fr 1.8fr;gap:32px;align-items:center}
  .current-collection .cc-lbl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:#FFB8E8;display:inline-flex;align-items:center;gap:10px}
  .current-collection .cc-lbl .pulse{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink)}
  .current-collection h2{font-size:42px;font-weight:700;letter-spacing:-0.03em;margin:14px 0 12px;line-height:1.0}
  .current-collection h2 .grad{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .current-collection p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.55;max-width:480px}
  .current-collection .cc-drops{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
  .current-collection .cc-drop{
    aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#222;position:relative;
    transition:transform .25s;cursor:pointer;
  }
  .current-collection .cc-drop:hover{transform:translateY(-3px)}
  .current-collection .cc-drop img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
  .current-collection .cc-drop:hover img{transform:scale(1.05)}
  .current-collection .cc-drop .tag{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);padding:3px 7px;font-size:9px;border-radius:4px;font-family:'JetBrains Mono',monospace;letter-spacing:0.08em}

  /* Sticky filter bar */
  .cat-controls-wrap{position:sticky;top:54px;z-index:60;background:rgba(10,10,15,0.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);margin-top:48px}
  .cat-controls{
    display:grid;grid-template-columns:auto 1fr auto auto;gap:24px;align-items:center;
    padding:16px 0;
  }
  .cat-controls .lhs{display:inline-flex;gap:4px;padding:3px;background:var(--surface);border:1px solid var(--hair);border-radius:100px}
  .cat-controls .lhs button{
    background:transparent;border:0;color:var(--dim);padding:8px 16px;
    font-size:13px;font-weight:500;border-radius:100px;
    transition:background .2s,color .2s;cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;
  }
  .cat-controls .lhs button.active{background:#fff;color:#0a0a0f}
  .cat-controls .lhs button .cnt{
    font-family:'JetBrains Mono',monospace;font-size:10px;
    padding:1px 6px;background:rgba(255,255,255,0.06);border-radius:100px;color:var(--dim-2);
  }
  .cat-controls .lhs button.active .cnt{background:rgba(10,10,15,0.1);color:rgba(10,10,15,0.55)}
  .cat-controls .mid{display:flex;gap:6px;overflow-x:auto;flex-wrap:wrap}
  .cat-controls .mid::-webkit-scrollbar{display:none}
  .cat-controls .mid button{
    background:transparent;color:var(--dim);
    border:1px solid var(--hair);padding:7px 13px;
    font-size:12.5px;border-radius:100px;cursor:pointer;
    transition:background .2s,color .2s,border-color .2s;white-space:nowrap;
  }
  .cat-controls .mid button:hover{color:#fff;border-color:var(--hair-2)}
  .cat-controls .mid button.active{background:rgba(163,123,255,0.12);color:#C2A8FF;border-color:rgba(163,123,255,0.35)}

  .cat-controls .sort{position:relative}
  .cat-controls .sort summary{
    list-style:none;cursor:pointer;
    padding:9px 14px;border:1px solid var(--hair);background:var(--surface);
    border-radius:8px;font-size:13px;color:var(--dim);display:inline-flex;align-items:center;gap:8px;
  }
  .cat-controls .sort summary::-webkit-details-marker{display:none}
  .cat-controls .sort summary .lbl{color:var(--dim-2);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase}
  .cat-controls .sort summary .chev{font-size:9px;color:var(--dim-2);margin-left:6px}
  .cat-controls .sort .menu{
    position:absolute;right:0;top:calc(100% + 6px);min-width:200px;
    background:var(--surface);border:1px solid var(--hair-2);border-radius:10px;
    box-shadow:0 24px 48px -16px rgba(0,0,0,0.6);padding:6px;z-index:10;
  }
  .cat-controls .sort .menu button{
    display:block;width:100%;text-align:left;background:transparent;color:var(--dim);
    border:0;padding:8px 12px;font-size:13px;border-radius:6px;cursor:pointer;
  }
  .cat-controls .sort .menu button:hover{background:rgba(255,255,255,0.04);color:#fff}
  .cat-controls .sort .menu button.active{color:var(--purple)}

  .cat-controls .view-toggle{display:inline-flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--hair);border-radius:8px}
  .cat-controls .view-toggle button{
    background:transparent;border:0;color:var(--dim-2);padding:6px 10px;border-radius:5px;cursor:pointer;font-size:14px;
    display:flex;align-items:center;
  }
  .cat-controls .view-toggle button.active{background:rgba(255,255,255,0.08);color:#fff}

  /* Counter row */
  .cat-counter{
    padding:16px 0;display:flex;justify-content:space-between;align-items:center;
    color:var(--dim);font-size:13.5px;
  }
  .cat-counter .num{color:#fff;font-weight:600}
  .cat-counter .num .grad{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .cat-counter .clear{
    color:var(--purple);cursor:pointer;font-size:12px;
    display:inline-flex;align-items:center;gap:6px;
  }
  .cat-counter .active-filters{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
  .cat-counter .active-filters .fchip{
    padding:3px 9px;background:rgba(163,123,255,0.15);color:#C2A8FF;border-radius:100px;
    font-size:11px;letter-spacing:0.04em;display:inline-flex;align-items:center;gap:5px;
  }
  .cat-counter .active-filters .fchip span{cursor:pointer;opacity:0.7;font-size:10px}

  /* Main grid — uniform 4 columns, mixed sizes via "feature" cards */
  .cat-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:24px 0 0;
  }
  .cat-grid.dense{grid-template-columns:repeat(5,1fr);gap:10px}
  .cat-grid .style-card{aspect-ratio:3/4;grid-column:span 1;grid-row:span 1;border-radius:14px}
  .cat-grid .style-card.feature{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .cat-grid .style-card.tall{grid-row:span 2;aspect-ratio:auto}
  .cat-grid .style-card.wide{grid-column:span 2;aspect-ratio:3/2}

  /* Reusing style-card markup from homepage but slightly adjusted */
  .style-card{
    position:relative;background:var(--surface);overflow:hidden;
    cursor:pointer;transition:transform .25s, box-shadow .25s;
  }
  .style-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px -20px rgba(0,0,0,0.5)}
  .style-card .img{position:absolute;inset:0}
  .style-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
  .style-card:hover .img img{transform:scale(1.06)}
  .style-card .overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
    padding:14px;color:#fff;
    background:linear-gradient(180deg,
      rgba(0,0,0,0.5) 0%,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0.78) 100%);
  }
  .style-card .meta-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
  .style-card .num{
    font-family:'JetBrains Mono',monospace;font-size:10px;
    background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);
    padding:4px 8px;border-radius:5px;letter-spacing:0.1em;color:rgba(255,255,255,0.95);
  }
  .style-card .badge-new{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;padding:3px 8px;background:var(--pink);color:#fff;border-radius:100px;letter-spacing:0.12em;box-shadow:0 0 12px rgba(255,78,205,0.5)}
  .style-card .badge-pop{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;padding:3px 8px;background:var(--gold);color:#0a0a0f;border-radius:100px;letter-spacing:0.12em}
  .style-card .info h3{margin:0;font-size:15px;font-weight:600;letter-spacing:-0.01em;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,0.3)}
  .style-card.feature .info h3{font-size:24px}
  .style-card.tall .info h3, .style-card.wide .info h3{font-size:17px}
  .style-card .info .gendr{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.7);margin-top:4px;display:block}
  .style-card .info .price{margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#FFE6A8;letter-spacing:0.08em}
  .style-card .tags{margin-top:8px;display:flex;gap:4px;flex-wrap:wrap}
  .style-card .tag{font-size:9px;padding:3px 7px;border-radius:100px;font-weight:600;letter-spacing:0.04em;backdrop-filter:blur(6px)}
  .style-card .tag.bespoke{background:rgba(163,123,255,0.25);color:#D7C7FF}
  .style-card .tag.native{background:rgba(46,229,160,0.22);color:#9DF5C8}
  .style-card .tag.casual{background:rgba(91,127,255,0.22);color:#B8C8FF}
  .style-card .tag.wedding{background:rgba(255,200,87,0.22);color:#FFE6A8}
  .style-card .tag.office{background:rgba(180,200,230,0.18);color:#DDE7F5}
  .style-card .tag.streetwear{background:rgba(255,78,205,0.22);color:#FFB8E8}

  .style-card .fave{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,0.4);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.85);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,transform .2s;font-size:13px}
  .style-card .fave:hover{background:rgba(255,78,205,0.7);color:#fff;transform:scale(1.08)}
  .style-card.faved .fave{background:var(--pink);color:#fff;border-color:transparent}

  .style-card .quick-actions{
    position:absolute;left:14px;bottom:14px;display:flex;gap:6px;
    opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;z-index:3;
  }
  .style-card:hover .quick-actions{opacity:1;transform:none}
  .style-card .quick-actions button{
    padding:6px 12px;font-size:10.5px;font-weight:500;
    background:rgba(0,0,0,0.6);backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.18);color:#fff;border-radius:6px;cursor:pointer;
    letter-spacing:0.02em;
  }
  .style-card .quick-actions button:hover{background:rgba(255,255,255,0.18)}

  /* Banner "feature" card (insert as breakpoints in the grid) */
  .grid-banner{
    grid-column:span 4;padding:24px 28px;
    background:linear-gradient(135deg, rgba(91,127,255,0.08) 0%, rgba(163,123,255,0.06) 100%);
    border:1px solid var(--hair-2);border-radius:14px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    flex-wrap:wrap;
  }
  .grid-banner .lhs h4{font-size:20px;font-weight:600;letter-spacing:-0.015em;margin:0 0 4px;line-height:1.2}
  .grid-banner .lhs h4 .grad{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .grid-banner .lhs p{margin:0;color:var(--dim);font-size:13.5px}
  .grid-banner .rhs{display:flex;gap:10px;align-items:center}

  /* Load more */
  .load-more{
    text-align:center;padding:48px 0 0;display:flex;flex-direction:column;align-items:center;gap:14px;
  }
  .load-more .stats{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim-2);letter-spacing:0.12em;text-transform:uppercase}
  .load-more .bar{
    width:240px;height:4px;background:var(--hair);border-radius:2px;overflow:hidden;
  }
  .load-more .bar .fill{width:32%;height:100%;background:var(--grad-2);border-radius:2px}

  /* Past collections archive */
  .archive-section{padding:120px 0;background:var(--bg-2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .archive-scroll{
    display:grid;grid-template-columns:repeat(6,minmax(220px,1fr));gap:16px;
    overflow-x:auto;padding-bottom:16px;
    scroll-snap-type:x mandatory;
  }
  .archive-scroll::-webkit-scrollbar{height:4px}
  .archive-scroll::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:2px}
  .archive-card{
    aspect-ratio:3/4;position:relative;background:var(--surface);border-radius:14px;overflow:hidden;
    scroll-snap-align:start;cursor:pointer;transition:transform .25s;
  }
  .archive-card:hover{transform:translateY(-3px)}
  .archive-card img{width:100%;height:100%;object-fit:cover;opacity:0.7;transition:opacity .25s}
  .archive-card:hover img{opacity:0.85}
  .archive-card .overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
    padding:16px;
    background:linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0,0,0,0.85) 100%);
  }
  .archive-card .nm{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.14em;color:rgba(255,255,255,0.6);text-transform:uppercase;margin-bottom:4px}
  .archive-card .title{font-size:18px;font-weight:600;letter-spacing:-0.015em;color:#fff;line-height:1.15}
  .archive-card .count{margin-top:6px;font-size:11px;color:rgba(255,255,255,0.6)}

  /* Drop alert signup */
  .drop-alert{
    margin-top:48px;padding:48px;
    background:radial-gradient(ellipse 60% 100% at 100% 50%, rgba(255,78,205,0.15) 0%, transparent 70%), var(--surface);
    border:1px solid var(--hair-2);border-radius:20px;
    display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
  }
  .drop-alert h3{font-size:32px;font-weight:700;letter-spacing:-0.025em;margin:0 0 10px;line-height:1.1}
  .drop-alert h3 .grad{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .drop-alert p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.55;max-width:480px}
  .drop-alert form{display:flex;border:1px solid var(--hair-2);border-radius:10px;background:rgba(0,0,0,0.25);overflow:hidden}
  .drop-alert input{flex:1;padding:14px 18px;background:transparent;border:0;color:#fff;font-size:14px;font-family:inherit;outline:none}
  .drop-alert input::placeholder{color:var(--dim-2)}
  .drop-alert button{padding:0 22px;background:var(--grad-2);color:#fff;border:0;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px}

  /* Image fallback */
  .img-fallback{width:100%;height:100%;background:repeating-linear-gradient(45deg,transparent 0,transparent 10px,rgba(255,255,255,0.04) 10px,rgba(255,255,255,0.04) 11px),linear-gradient(135deg, #1a1622 0%, #100c18 100%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.4);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.16em;text-transform:uppercase}

  /* Reveal animation */
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
  .reveal.in{opacity:1;transform:none}

  @media (max-width: 1100px){
    .cat-hero h1{font-size:52px}
    .current-collection .cc-row{grid-template-columns:1fr}
    .current-collection .cc-drops{grid-template-columns:repeat(3,1fr)}
    .cat-controls{grid-template-columns:1fr;gap:12px}
    .cat-controls .lhs, .cat-controls .sort, .cat-controls .view-toggle{justify-self:start}
    .cat-grid{grid-template-columns:repeat(2,1fr)}
    .cat-grid .style-card.feature{grid-column:span 2;grid-row:span 1;aspect-ratio:3/4}
    .grid-banner{grid-column:span 2}
    .archive-scroll{grid-template-columns:repeat(3,minmax(180px,1fr))}
    .drop-alert{grid-template-columns:1fr;padding:32px;gap:24px}
  }

  @media (max-width: 720px){
    .container{padding:0 20px}
    .cat-hero{padding:110px 0 36px}
    .cat-hero h1{font-size:36px;line-height:1.05}
    .cat-hero .sub{font-size:14.5px;margin-top:18px}
    .cat-hero .live{gap:14px 24px;margin-top:24px}
    .cat-hero .live > div{font-size:10px;gap:6px}
    .cat-hero .live .num{font-size:15px}
    .current-collection{padding:24px;margin-top:32px}
    .current-collection h2{font-size:26px;line-height:1.1}
    .current-collection p{font-size:13.5px}
    .current-collection .cc-drops{grid-template-columns:repeat(2,1fr);gap:8px}
    .cat-controls-wrap{position:relative;top:0;padding:8px 0}
    .cat-controls{padding:8px 0;gap:10px}
    .cat-controls .lhs{flex-wrap:wrap}
    .cat-controls .lhs button{font-size:12px;padding:7px 12px}
    .cat-controls .mid{gap:5px}
    .cat-controls .mid button{padding:6px 11px;font-size:11.5px}
    .cat-controls .sort, .cat-controls .view-toggle{align-self:stretch}
    .cat-counter{font-size:12.5px;flex-direction:column;gap:8px;align-items:flex-start}
    .cat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .cat-grid .style-card.feature{grid-column:span 2;grid-row:span 1}
    .style-card .info h3{font-size:13px}
    .style-card.feature .info h3{font-size:18px}
    .grid-banner{padding:20px 22px;grid-column:span 2;flex-direction:column;text-align:left;align-items:flex-start}
    .grid-banner .lhs h4{font-size:17px}
    .grid-banner .lhs p{font-size:12.5px}
    .grid-banner .rhs .btn{width:100%;justify-content:center}
    .archive-section{padding:72px 0}
    .archive-scroll{grid-template-columns:repeat(2,minmax(160px,1fr));gap:10px}
    .archive-card .title{font-size:15px}
    .drop-alert{padding:24px;gap:20px}
    .drop-alert h3{font-size:22px;line-height:1.15}
    .drop-alert p{font-size:13.5px}
    .drop-alert form{flex-direction:column;border:0;background:transparent;gap:8px}
    .drop-alert input{border:1px solid var(--hair-2);border-radius:10px;background:rgba(0,0,0,0.25);padding:14px}
    .drop-alert button{border-radius:10px;padding:14px;justify-content:center}
    .load-more{padding:32px 0 0}
    .load-more .btn{width:100%;justify-content:center}
    nav.top{padding:10px 16px}
    nav.top .signin{display:none}
  }