/* Collection — evolved archive experience (transparent shirt cutouts) */

.collection-page{background:var(--cream)}

/* —— Hero floaters (height/copy from shared .sub-hero) —— */
.collection-hero-floaters img{
  transform-origin:center bottom;
  animation:float-jersey 7s ease-in-out infinite;
}
.collection-hero-floaters img:nth-child(1){right:8%;bottom:-8%;left:auto;transform:rotate(-8deg);animation-delay:0s}
.collection-hero-floaters img:nth-child(2){right:28%;bottom:6%;left:auto;width:clamp(90px,11vw,140px);opacity:.4;transform:rotate(6deg);animation-delay:-2s}
.collection-hero-floaters img:nth-child(3){right:4%;top:18%;left:auto;width:clamp(80px,10vw,130px);opacity:.32;transform:rotate(14deg);animation-delay:-3.5s}
.collection-hero-floaters img:nth-child(4){right:40%;top:12%;left:auto;width:clamp(70px,8vw,110px);opacity:.22;transform:rotate(-16deg);animation-delay:-1.2s}
@keyframes float-jersey{
  0%,100%{translate:0 0}
  50%{translate:0 -10px}
}

/* —— Sticky control deck —— */
.collection-deck{
  position:sticky;
  top:0;
  z-index:30;
  margin:0 -4px;
  padding:14px 4px 10px;
  background:linear-gradient(180deg,rgba(247,245,238,.97) 70%,rgba(247,245,238,.88));
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s,box-shadow .2s;
}
@media (max-width:850px){
  .collection-deck{top:var(--site-header-h,70px)}
}
.collection-deck.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 10px 28px rgba(7,27,21,.06);
}
.collection-deck .archive-searchline{margin-bottom:10px}
.collection-deck .search-field{
  background:#fff;
  border-color:#ddd9ce;
  box-shadow:0 1px 0 rgba(7,27,21,.03);
  min-height:50px;
}
.collection-deck .filter-row{margin-bottom:0;gap:12px}
.collection-deck .select-wrap{
  background:#fff;
  border-color:#d8d4c8;
}
.collection-deck .select-wrap select{max-width:140px}
.collection-deck .select-wrap--sort select{max-width:150px;font-weight:700}

.collection-mobile-bar{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.collection-mobile-bar .button{min-height:42px;padding:8px 14px;font-size:13px}
.filters-count{
  display:inline-grid;
  place-items:center;
  min-width:1.4em;
  height:1.4em;
  margin-left:6px;
  padding:0 5px;
  border-radius:999px;
  background:var(--lime);
  color:var(--forest-3);
  font-size:11px;
  font-weight:800;
}

/* Decade quick pills */
.decade-pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:12px 0 4px;
}
.decade-pills button{
  border:1px solid #d5d1c5;
  background:#f7f5ee;
  color:#31443a;
  border-radius:999px;
  padding:7px 12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.decade-pills button:hover{transform:translateY(-1px);border-color:#9bb59a}
.decade-pills button.is-active{
  background:var(--forest);
  border-color:var(--forest);
  color:#fff;
}

/* Chips */
.filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 4px;
  min-height:0;
}
.filter-chips:empty{display:none;margin:0}
.filter-chips .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #d2cec2;
  background:#fff;
  color:var(--forest);
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.filter-chips .chip:hover{background:#eef6e4;border-color:#a8c98a}
.filter-chips .chip span{opacity:.55;font-size:11px}

/* —— Jersey grid: floating cutouts —— */
.jersey-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px 14px;
  padding-top:8px;
}
.jersey-card{
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  min-width:0;
  transition:transform .25s ease;
}
.jersey-card:hover{
  box-shadow:none;
  transform:translateY(-6px);
}
.jersey-card .jersey-stage{
  position:relative;
  display:block;
  aspect-ratio:4 / 5;
  border-radius:16px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(177,238,120,.18), transparent 55%),
    linear-gradient(165deg, #f4f1e8 0%, #e8ebe3 48%, #dfe8df 100%);
  border:1px solid rgba(20,50,35,.06);
  transition:border-color .2s, box-shadow .25s;
}
.jersey-card:hover .jersey-stage{
  border-color:rgba(16,62,48,.16);
  box-shadow:0 18px 40px rgba(7,27,21,.1);
}
.jersey-card:nth-child(5n+2) .jersey-stage{
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(5,41,30,.08), transparent 55%),
    linear-gradient(165deg, #f2f0e7 0%, #e4ebe6 55%, #d7e4d9 100%);
}
.jersey-card:nth-child(5n+3) .jersey-stage{
  background:
    radial-gradient(100% 80% at 70% 0%, rgba(230,170,71,.12), transparent 50%),
    linear-gradient(165deg, #f6f3ea 0%, #ebe8de 50%, #e2e8df 100%);
}
.jersey-card:nth-child(5n+4) .jersey-stage{
  background:
    radial-gradient(110% 85% at 30% 110%, rgba(16,62,48,.1), transparent 50%),
    linear-gradient(160deg, #f0eee6 0%, #e7ebe4 100%);
}

/* Soft floor shadow under cutout */
.jersey-card .jersey-stage::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:7%;
  height:14%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(7,27,21,.18), transparent 70%);
  z-index:0;
  pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.jersey-card:hover .jersey-stage::after{
  opacity:.85;
  transform:scaleX(1.05);
}

.jersey-card .jersey-image{
  position:absolute;
  inset:0;
  z-index:1;
  height:auto;
  background:transparent !important;
  display:grid;
  place-items:center;
  padding:10% 8% 14%;
  border-radius:0;
  overflow:hidden;
}
.jersey-card .jersey-image img{
  grid-area:1 / 1;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  filter:drop-shadow(0 10px 18px rgba(7,27,21,.18));
  transition:transform .35s ease, filter .35s ease, opacity .25s;
  transform-origin:center center;
}
/* Lift ligeiro — sem scale, para não “zoomar” nem derivar à direita */
.jersey-card:hover .jersey-image .img-front:not([aria-hidden="true"]){
  transform:translateY(-4px);
  filter:drop-shadow(0 16px 24px rgba(7,27,21,.22));
}
.jersey-card .jersey-image .img-back{
  opacity:0;
  pointer-events:none;
  transform:none;
}
.jersey-card.has-back:hover .jersey-image .img-front,
.jersey-card.is-flipped .jersey-image .img-front{opacity:0;transform:none}
.jersey-card.has-back:hover .jersey-image .img-back,
.jersey-card.is-flipped .jersey-image .img-back{
  opacity:1;
  transform:translateY(-4px);
  filter:drop-shadow(0 16px 24px rgba(7,27,21,.22));
}

.jersey-card .flip-control{
  left:auto;
  right:10px;
  top:10px;
  opacity:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  box-shadow:0 4px 12px rgba(7,27,21,.1);
}
.jersey-card:hover .flip-control,
.jersey-card .flip-control:focus-visible{opacity:1}
.jersey-card .shirt-new-badge{
  left:10px;
  top:10px;
  background:var(--lime);
  color:var(--forest-3);
  box-shadow:0 4px 12px rgba(7,27,21,.12);
}

.jersey-card .jersey-info{
  padding:12px 4px 2px;
  min-height:0;
  background:transparent;
}
.jersey-card .jersey-info h3{
  font-size:13px;
  font-weight:750;
  letter-spacing:-.02em;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0 0 4px;
}
.jersey-card .jersey-info h3 a:hover{color:var(--evergreen)}
.jersey-card .jersey-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 8px;
  color:#5a675f;
  font-size:11px;
  line-height:1.35;
}
.jersey-card .jersey-meta .sep{opacity:.4}

/* List view */
.jersey-grid.list-view{
  grid-template-columns:1fr;
  gap:10px;
}
.jersey-grid.list-view .jersey-card{
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  align-items:center;
  gap:16px;
  padding:8px 12px 8px 8px;
  background:#fff;
  border:1px solid #e5e1d6;
  border-radius:14px;
}
.jersey-grid.list-view .jersey-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.jersey-grid.list-view .jersey-stage{
  aspect-ratio:1;
  border-radius:12px;
  height:124px;
}
.jersey-grid.list-view .jersey-image{padding:8%}
.jersey-grid.list-view .jersey-info{padding:4px 0}
.jersey-grid.list-view .jersey-info h3{font-size:17px;-webkit-line-clamp:1}
.jersey-grid.list-view .jersey-meta{font-size:12.5px}
.jersey-grid.list-view .flip-control{opacity:1}

/* Skeletons match new stage */
.jersey-grid.skeletons .skeleton-card,
.skeleton-card{
  aspect-ratio:4/5;
  border-radius:16px;
  background:linear-gradient(90deg,#ebe8de,#f7f5ee,#ebe8de);
  background-size:200% 100%;
  animation:sk 1.2s infinite;
  border:0;
}

/* Results header */
.collection-results-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 4px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}
.collection-results-head strong{color:var(--ink);font-family:var(--serif);font-size:18px;font-weight:700}

.load-more-wrap{padding:28px 0 8px}
.load-more-wrap .button{min-width:200px}

/* Manifesto polish */
.collection-manifesto{margin-top:8px}

@media (max-width:1200px){
  .collection-hero-floaters img:nth-child(4){display:none}
}
@media (max-width:900px){
  .jersey-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .collection-deck .filter-fields .select-wrap--sort{order:1}
  .collection-hero-floaters img:nth-child(n+3){display:none}
}
@media (max-width:720px){
  .collection-mobile-bar{display:flex}
  .collection-mobile-bar .view-toggle button{
    width:44px;height:44px;min-width:44px;min-height:44px;
  }
  .collection-deck .filter-fields,
  .collection-deck .archive-tools .view-toggle{display:none}
  /* Overlay abaixo do deck: o sticky cria stacking context (z-index 30),
     por isso o painel filho nunca passava por cima do ::before. */
  .collection.filters-open::before{
    content:"";
    position:fixed;inset:0;z-index:55;
    background:rgba(0,20,14,.45);
  }
  .collection.filters-open .collection-deck{
    z-index:70;
  }
  .collection.filters-open .collection-deck .filter-fields{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    position:fixed;
    left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom,0px));
    z-index:71;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
    max-height:min(70vh,calc(100dvh - 96px));
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .collection.filters-open .collection-deck .filter-fields .select-wrap{
    width:100%;
    justify-content:space-between;
  }
  .collection.filters-open .collection-deck .filter-fields .select-wrap select{max-width:none;flex:1}
  body:has(.collection.filters-open) .mm-fab{opacity:0;visibility:hidden;pointer-events:none}
  .jersey-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px}
  .jersey-card .jersey-stage{aspect-ratio:3 / 4;border-radius:14px}
  .jersey-card .jersey-image{padding:5% 4% 8%}
  .jersey-card .jersey-stage::after{left:14%;right:14%;bottom:5%;height:12%}
  .decade-pills{
    gap:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;scrollbar-width:none;
  }
  .decade-pills::-webkit-scrollbar{display:none}
  .decade-pills button{
    flex:none;padding:10px 14px;font-size:12px;min-height:40px;
  }
  .collection-hero-floaters{opacity:.7}
}
@media (prefers-reduced-motion:reduce){
  .collection-hero-floaters img,
  .jersey-card,
  .jersey-card .jersey-image img{animation:none;transition:none}
}