/* Bridge: PHP app ↔ prototype styles.css */
:root{
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Segoe UI",Arial,sans-serif;
  --max:1600px;
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;z-index:10000;padding:10px 14px;background:var(--lime);color:var(--forest-3);border-radius:8px}
.site-main{flex:1 1 auto;min-height:58vh}
.flash-banner{max-width:var(--max);margin:0 auto;padding:12px 24px}
.flash-banner .flash{margin:0;padding:12px 16px;border-radius:10px;background:rgba(255,255,255,.08);color:var(--ink);border:1px solid rgba(255,255,255,.12)}
.flash-banner .flash-error,.flash-banner .flash-danger{border-color:rgba(220,80,80,.4);background:rgba(220,80,80,.15)}
.flash-banner .flash-success{border-color:rgba(80,180,100,.4);background:rgba(80,180,100,.12)}

/* Header search suggest */
.header-search{position:relative}
.header-search .search-suggest,
.search-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:320px;overflow:auto}
.suggest-item{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--ink);font-size:13px}
.suggest-item:hover,.suggest-item.is-active{background:#f3f1e8}
.suggest-item img{width:36px;height:36px;object-fit:cover;border-radius:6px}
.header-search input{border:0;outline:0;background:transparent;min-width:0;flex:1;color:var(--ink)}
.header-search{display:flex;align-items:center;gap:8px;min-width:220px;background:#eceae2;border:1px solid #e1dfd6;border-radius:27px;padding:0 14px;min-height:40px}
.header-search button[type=submit]{border:0;background:transparent;padding:4px;color:#526058;display:grid;place-items:center}
.header-login,.header-favorites,.favorite-control{display:none!important}

/* Jersey cards — base only; collection.css owns the floating cutout look */
a.jersey-card,.jersey-card a{color:inherit}
.jersey-card{position:relative}
.similar-grid .jersey-card .jersey-stage{
  display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;
  background:linear-gradient(165deg,#f4f1e8,#e4ebe6);position:relative;
}
.similar-grid .jersey-card .jersey-image{
  position:absolute;inset:0;display:grid;place-items:center;padding:10%;
}
.similar-grid .jersey-card .jersey-image img{width:100%;height:100%;object-fit:contain}
.jersey-card .shirt-new-badge{position:absolute;left:8px;top:8px;z-index:2;background:var(--lime);color:var(--forest-3);font-size:10px;font-weight:700;letter-spacing:.08em;padding:4px 8px;border-radius:999px}

/* Collection PHP hooks */
#infinite-sentinel,[data-sentinel]{height:1px}
.collection-loading,.load-more-wrap{text-align:center;padding:20px}
.empty-state{padding:28px;text-align:center;color:var(--muted)}
.filters-form-wrap{display:block}
.pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:24px 0}
.pagination a,.pagination span{padding:8px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.1);color:var(--ink);text-decoration:none;font-size:.9rem;background:#fff}
.pagination .is-current{background:var(--gold);color:var(--forest-3);border-color:var(--gold)}
.skeleton-card{aspect-ratio:4/5;border-radius:10px;background:linear-gradient(90deg,#eceae2,#f7f5ee,#eceae2);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.clear-filters,.text-button{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:12px;display:inline-flex;align-items:center;gap:6px;padding:0}
.filter-fields{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.archive-tools{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;font-weight:600}
.view-toggle{display:inline-flex;gap:4px}
.view-toggle button{width:34px;height:34px;border-radius:8px;border:1px solid #d2d3c9;background:#f6f5ef;display:grid;place-items:center;color:#33483d}
.view-toggle button.active{background:var(--forest);color:#fff;border-color:var(--forest)}

/* Detail page PHP */
.detail-page .shirt-new-badge{margin-left:8px;vertical-align:middle}
.detail-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:24px 0;padding:0}
.detail-specs div{background:var(--paper);border:1px solid #e9e4d8;border-radius:11px;padding:14px 16px}
.detail-specs dt{font-size:11px;letter-spacing:.14em;font-weight:700;color:#6a756e;margin:0 0 6px;text-transform:uppercase}
.detail-specs dd{margin:0;font-family:var(--serif);font-size:18px}
.detail-specs a{text-decoration:underline;text-underline-offset:3px}
.rating-stars .star{border:0;background:transparent;font-size:28px;color:#c9c4b6;padding:0 2px;line-height:1}
.rating-stars .star.on{color:var(--gold)}
.similar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none!important}
.lightbox img{max-width:min(96vw,1100px);max-height:88vh;object-fit:contain}
.lightbox img.zoomed{transform:scale(1.6);cursor:zoom-out}
.lightbox-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;font-size:24px}

/* Dark pages (game / eleven) keep readable widgets */
.dark-page{background:var(--forest-3);color:#eef3ee}
.dark-page .page-pad,.game-shell,.eleven-shell{color:#eef3ee}
.xi-page .eleven-shell,.dark-page .eleven-shell{padding:24px clamp(16px,3vw,48px)}
.game-shell{padding:0 0 48px}

/* Hubs / editorial helpers */
.home-editorial{padding-bottom:40px;background:var(--cream)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px}
.text-link [data-icon]{font-size:16px}

/* Filters toggle mobile leftover */
.filters-toggle{display:none}

/* Header “Explorar” drill (parity with production) */
.nav-explore{position:relative;display:inline-flex;align-items:center}
.nav-explore>summary{
  list-style:none;cursor:pointer;
  font-size:13px;font-weight:650;white-space:nowrap;line-height:79px;
  position:relative;color:var(--ink);display:inline-flex;align-items:center;gap:6px;
}
#site-header .nav-explore>summary{color:var(--ink)}
.nav-explore>summary::-webkit-details-marker{display:none}
.nav-explore>summary::after{
  content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .15s;
}
.nav-explore[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.nav-explore>summary::before{
  content:"";position:absolute;left:0;right:0;bottom:21px;height:2px;background:var(--evergreen);
  transform:scaleX(0);transition:transform .2s;
}
.nav-explore>summary:hover::before,
.nav-explore.is-active>summary::before,
.nav-explore[open]>summary::before{transform:scaleX(1)}
.nav-explore-panel{
  position:absolute;top:calc(100% - 8px);left:50%;transform:translateX(-50%);
  min-width:220px;z-index:80;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 40px rgba(7,27,21,.12);
  padding:8px;display:flex;flex-direction:column;gap:2px;
}
.nav-explore-panel a{
  line-height:1.2!important;padding:10px 12px!important;border-radius:10px;
  font-size:13px!important;font-weight:650;color:var(--ink)!important;
}
.nav-explore-panel a::after{display:none!important}
.nav-explore-panel a:hover{background:#f3f1e8}
@media (max-width:900px){
  .header-search{display:none}
  .similar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-explore{display:none}
}