/* Maghreb Jerseys — layout B + team finder. All classes prefixed .mjb- */
.mjb{max-width:1240px;margin:0 auto;padding:0 20px;font-family:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;font-size:15px;line-height:1.55;color:#171A20}
.mjb *{box-sizing:border-box}
.mjb h1,.mjb h2{font-family:"Archivo",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;margin:0}
.mjb a{text-decoration:none}

.mjb-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:center;padding:52px 0 0}
.mjb-kicker{display:flex;align-items:center;gap:10px}
.mjb-kicker i{width:34px;height:2px;background:#A87C1B;display:block;flex:none}
.mjb-kicker span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.18em;color:#A87C1B;text-transform:uppercase}
.mjb-title{font-size:clamp(34px,4.6vw,56px);line-height:1.02;letter-spacing:-.03em;margin:18px 0 0;color:#0B1B33;text-wrap:balance}
.mjb-sub{font-size:16.5px;color:#544E42;margin:18px 0 0;max-width:420px;text-wrap:pretty}
.mjb-cta{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.mjb-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:14px 26px;border-radius:3px;font-weight:700;font-size:15px;border:1px solid transparent}
.mjb-btn--primary{background:#0B1B33;color:#F7F4EE;border-color:#0B1B33}
.mjb-btn--primary:hover{background:#13294B;color:#F7F4EE}
.mjb-btn--ghost{background:transparent;color:#0B1B33;border-color:#CFC7B6;font-weight:600}
.mjb-btn--ghost:hover{border-color:#0B1B33}

.mjb-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:32px;padding-top:20px;border-top:1px solid #E4DED2}
.mjb-stats b{display:block;font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:21px;color:#0B1B33}
.mjb-stats small{font-size:12px;color:#6B6455}

.mjb-media{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mjb-media figure{margin:0;border-radius:4px;overflow:hidden}
.mjb-media img{width:100%;height:100%;object-fit:cover;display:block}
.mjb-tall{height:330px}
.mjb-stack{display:grid;gap:12px}
.mjb-stack figure{height:159px}
.mjb-ph{height:100%;display:flex;align-items:flex-end;padding:12px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.72)}
.mjb-ph--navy{background:repeating-linear-gradient(135deg,#0B1B33 0 16px,#13294B 16px 32px)}
.mjb-ph--gold{background:repeating-linear-gradient(135deg,#C9A44B 0 14px,#D8B45B 14px 28px);color:#4A3C11}
.mjb-ph--green{background:repeating-linear-gradient(135deg,#2F5D4A 0 14px,#376B55 14px 28px)}
.mjb-ph--red{background:repeating-linear-gradient(135deg,#7A2A2A 0 14px,#8E3333 14px 28px)}

.mjb-section{padding:48px 0 0}
.mjb-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.mjb-pill{border:1px solid #0B1B33;background:transparent;color:#0B1B33;padding:8px 16px;border-radius:99px;font-size:13.5px;font-weight:600;white-space:nowrap}
.mjb-pill:hover{background:#0B1B33;color:#F7F4EE}

.mjb-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.mjb-head h2{font-size:26px;text-transform:uppercase}
.mjb-more{margin-inline-start:auto;font-size:13px;font-weight:600;color:#A87C1B;white-space:nowrap}

.mjb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mjb-card__media{display:block;border-radius:4px;overflow:hidden;aspect-ratio:5/6}
.mjb-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.mjb-card__row{display:flex;justify-content:space-between;gap:10px;margin-top:10px}
.mjb-card__name{font-weight:600;font-size:14.5px;color:#171A20;display:block}
.mjb-card__meta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#8A8272}
.mjb-card__price{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:16px;color:#0B1B33;white-space:nowrap}
.mjb-card__price del{color:#A39A87;font-weight:500;font-size:13px;margin-inline-end:6px}

.mjb-reviews{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:start;padding:52px 0 56px}
.mjb-reviews p.lead{font-size:14.5px;color:#6B6455;margin-top:10px}
.mjb-reviews h2{font-size:26px;text-transform:uppercase}
.mjb-list{display:grid;gap:12px}
.mjb-review{background:#FFFDF8;border:1px solid #E4DED2;border-radius:4px;padding:18px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;margin:0}
.mjb-review blockquote{margin:0}
.mjb-review p{margin:0;font-size:14.5px;text-wrap:pretty}
.mjb-review figcaption{text-align:end}
.mjb-stars{color:#E3B23C;letter-spacing:2px;font-size:13px}
.mjb-who{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#6B6455;margin-top:3px}

@media (max-width:1024px){
  .mjb-hero{grid-template-columns:1fr;gap:28px}
  .mjb-tall{height:240px}
  .mjb-stack figure{height:114px}
  .mjb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mjb-reviews{grid-template-columns:1fr;gap:20px}
}
@media (max-width:560px){
  .mjb-media{grid-template-columns:1fr}
  .mjb-stack{grid-template-columns:1fr 1fr}
  .mjb-review{grid-template-columns:1fr}
  .mjb-review figcaption{text-align:start}
}

/* ===== Team finder ===== */
.mjb-f{padding:56px 0 0;scroll-margin-top:20px}
.mjb-f__top{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap}
.mjb-f__top>div{flex:1;min-width:280px}
.mjb-f__kick{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:#8A8272;letter-spacing:.12em;text-transform:uppercase}
.mjb-f h2{font-size:32px;text-transform:uppercase;margin-top:8px}
.mjb-f__sub{font-size:15px;color:#6B6455;margin:8px 0 0;max-width:520px;text-wrap:pretty}
.mjb-f__search{width:300px;max-width:100%;border:1px solid #DCD5C7;background:#FFFDF8;border-radius:3px;padding:13px 15px;font:inherit;font-size:14.5px;color:#171A20}
.mjb-f__search:focus{outline:2px solid #E3B23C;outline-offset:1px}
.mjb-f__pop{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:18px}
.mjb-f__pop-label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:#A39A87;text-transform:uppercase;white-space:nowrap}
.mjb-f__chips{display:flex;gap:8px;flex-wrap:wrap}
.mjb-chip{display:flex;align-items:center;gap:7px;border:1px solid #DCD5C7;background:#FFFDF8;color:#0B1B33;padding:5px 12px 5px 6px;border-radius:99px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;white-space:nowrap}
.mjb-chip:hover{border-color:#0B1B33}
.mjb-chip i{width:20px;height:20px;border-radius:50%;display:block;flex:none;background:#E4DED2}

.mjb-f__panel{background:#0B1B33;border-radius:6px;padding:18px;margin-top:16px}
.mjb-f__bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.mjb-scope{display:flex;gap:6px}
.mjb-scope button{border:1px solid #24375A;background:transparent;color:#AEBDD4;padding:7px 16px;border-radius:99px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;white-space:nowrap}
.mjb-scope button.is-on{background:#E3B23C;border-color:#E3B23C;color:#0B1B33}
.mjb-f__sep{width:1px;height:22px;background:#24375A;display:block}
.mjb-crumbs{display:flex;gap:6px;flex-wrap:wrap}
.mjb-crumbs button{border:1px solid #24375A;background:#122C51;color:#E3B23C;padding:6px 12px;border-radius:3px;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;white-space:nowrap}
.mjb-f__reset{margin-inline-start:auto;border:0;background:none;color:#8DA0C0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;white-space:nowrap}
.mjb-f__reset:hover{color:#F7F4EE}

.mjb-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mjb-col{background:#0F2444;border:1px solid #1E3763;border-radius:4px;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.mjb-col__head{display:flex;gap:8px;align-items:center;padding:11px 13px;border-bottom:1px solid #1E3763}
.mjb-col__head span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#E3B23C}
.mjb-col__head b{font-size:12.5px;font-weight:700;color:#F7F4EE;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.mjb-col__list{max-height:330px;overflow-y:auto;padding:6px;display:grid;gap:2px;align-content:start}
.mjb-col__empty{padding:22px 12px;font-size:13px;color:#5D7099}
.mjb-item{display:flex;align-items:center;gap:9px;width:100%;text-align:start;border:0;border-inline-start:3px solid transparent;background:transparent;color:#AEBDD4;padding:8px 10px;border-radius:3px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:500}
.mjb-item:hover{background:#16305A;color:#F7F4EE}
.mjb-item.is-on{background:#16305A;color:#F7F4EE;border-inline-start-color:#E3B23C}
.mjb-item i{width:22px;height:22px;border-radius:3px;background:#16305A;display:flex;align-items:center;justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:500;font-style:normal;color:#7E93B8;letter-spacing:.04em;flex:none}
.mjb-item span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mjb-item small{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#5D7099}

.mjb-res{display:flex;align-items:baseline;gap:14px;margin:26px 0 14px;flex-wrap:wrap}
.mjb-res h3{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;text-transform:uppercase;margin:0}
.mjb-res__path{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#A87C1B}
.mjb-res select{margin-inline-start:auto;border:1px solid #DCD5C7;background:#FFFDF8;padding:7px 10px;border-radius:3px;font:inherit;font-size:13px}
.mjb-shot{display:block;position:relative;border-radius:4px;overflow:hidden;aspect-ratio:5/6;background:#13294B}
.mjb-shot em{position:absolute;top:9px;inset-inline-start:9px;background:#E3B23C;color:#0B1B33;font-size:10px;font-weight:700;font-style:normal;letter-spacing:.1em;padding:3px 7px;border-radius:2px}
.mjb-empty{grid-column:1/-1;margin:0;padding:28px;text-align:center;background:#FFFDF8;border:1px dashed #DCD5C7;border-radius:4px;color:#6B6455}
.mjb-more-btn{width:100%;margin-top:16px;border:1px solid #0B1B33;background:transparent;color:#0B1B33;padding:14px;border-radius:3px;font:inherit;font-weight:700;font-size:14.5px;cursor:pointer}
.mjb-more-btn:hover{background:#0B1B33;color:#F7F4EE}
.mjb-more-btn[hidden]{display:none}

@media (max-width:860px){
  .mjb-cols{grid-template-columns:1fr}
  .mjb-col__list{max-height:220px}
  .mjb-f__search{width:100%}
}
