/* ════════════════════════════════════════════════════════════════════════
   SHOP — "Wear The Lane" (Kit Launch 2026/27)
   Photography leads: the home shirt stands beside the title on the yellow
   poster, the two shirts we have pictures of are shown big, everything else
   is a ruled list. No product cards, no tags, no illustrated silhouettes.
   Photos are 800px wide; --shot-cap keeps them at native resolution.
   ════════════════════════════════════════════════════════════════════════ */
:root{--shot-cap:560px}
@media (min-resolution:1.5dppx){:root{--shot-cap:400px}}
@media (min-resolution:2.25dppx){:root{--shot-cap:300px}}
@media (min-resolution:2.8dppx){:root{--shot-cap:262px}}

/* Title card — yellow field, the shirt on the right edge */
.shop-ph{min-height:clamp(540px,78svh,840px)}
.shop-ph__shot{position:absolute;z-index:-1;top:0;bottom:0;right:0;width:min(52vw,var(--shot-cap))}
.shop-ph__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.shop-ph__shot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#FFD100 0%,rgba(255,209,0,0) 34%)}
@media (max-width:899px){
  .shop-ph{display:flex;flex-direction:column;min-height:0}
  .shop-ph__inner{order:1;padding-bottom:8px}
  .shop-ph__shot{position:relative;order:2;z-index:0;align-self:flex-end;width:min(66vw,var(--shot-cap));height:auto;aspect-ratio:4/4.4;margin-top:-24px}
  .shop-ph__shot::after{background:linear-gradient(90deg,#FFD100 0%,rgba(255,209,0,0) 40%),linear-gradient(180deg,#FFD100 0%,rgba(255,209,0,0) 28%)}
}
.shop-ph__inner{position:relative}
.shop-ph .kl-ph__line{max-width:30ch}

/* The kit — big photographs, type beside them */
.shop-kit{border-top:0}
.shop-kit__h{margin-bottom:clamp(28px,4vw,48px)}
.shop-hero-item{display:grid;gap:22px;padding:0 0 clamp(40px,6vw,72px);align-items:end}
.shop-hero-item + .shop-hero-item{border-top:1px solid var(--ed-line-2);padding-top:clamp(40px,6vw,72px)}
.shop-hero-item__img{display:block;width:min(100%,var(--shot-cap));height:auto;aspect-ratio:800/1071;object-fit:cover;border-radius:var(--r-md);background:#141414}
@media (min-width:760px){
  .shop-hero-item{grid-template-columns:min(46%,var(--shot-cap)) minmax(0,1fr);gap:clamp(28px,5vw,72px)}
  .shop-hero-item__img{width:100%}
  .shop-hero-item--flip{grid-template-columns:minmax(0,1fr) min(46%,var(--shot-cap))}
  .shop-hero-item--flip .shop-hero-item__img{order:2}
}
.shop-hero-item .shop-item__name{font-size:clamp(3rem,7vw,6.5rem)}
.shop-hero-item .shop-item__desc{font-size:clamp(1rem,1.3vw,1.15rem);margin-bottom:24px}

/* Shared item type */
.shop-item__name{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,3.4vw,3rem);line-height:.88;text-transform:uppercase;color:var(--white);margin:0}
.shop-item__col{font-family:var(--font-body);font-weight:800;font-size:14px;color:var(--yellow);margin:10px 0 0}
.shop-item__desc{font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--ed-text-2);margin:10px 0 0;max-width:52ch}

/* Everything else — a ruled list */
.shop-list{list-style:none;margin:clamp(24px,4vw,44px) 0 0;padding:0;border-top:2px solid var(--white)}
.shop-row{display:grid;gap:0;padding:22px 0 18px;border-bottom:1px solid var(--ed-line-2)}
.shop-row__go{margin-top:6px}
@media (min-width:1000px){
  .shop-row{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;grid-template-areas:"name desc go" "col desc go";gap:8px 32px;align-items:start;padding:28px 0}
  .shop-row .shop-item__name{grid-area:name}
  .shop-row .shop-item__col{grid-area:col;margin:0}
  .shop-row .shop-item__desc{grid-area:desc;margin:0}
  .shop-row__go{grid-area:go;margin:0;justify-self:end}
}

/* How to order + sizing */
.shop-order__grid{display:grid;gap:48px}
@media (min-width:1000px){.shop-order__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}}
.shop-how__p{color:var(--ed-text-2);margin-top:20px}
.shop-mail{display:inline-flex;align-items:center;min-height:48px;font-family:var(--font-display);font-size:clamp(1.6rem,6.4vw,3rem);line-height:1;color:var(--yellow);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;overflow-wrap:anywhere}
.shop-mail:hover{color:var(--white)}
.shop-how__inc{font-family:var(--font-body);font-weight:700;font-size:14px;color:#AAAAAA;margin:10px 0 0}
.shop-size__h{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,3.4vw,3rem);line-height:.9;text-transform:uppercase;color:var(--white);margin:0 0 18px}
.shop-size__scroll{overflow-x:auto}
.size-table{width:100%;border-collapse:collapse;font-family:var(--font-body);font-variant-numeric:tabular-nums}
.size-table th{font-weight:800;font-size:13px;color:#AAAAAA;text-align:left;padding:0 12px 10px 0;border-bottom:2px solid var(--white);white-space:nowrap}
.size-table td{font-size:15px;color:var(--ed-text-2);padding:14px 12px 14px 0;border-bottom:1px solid var(--ed-line-2)}
.size-table td:first-child{font-family:var(--font-display);font-size:1.7rem;line-height:1;color:var(--white)}
.shop-size__note{font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--ed-text-2);margin:18px 0 0;max-width:60ch}
.shop-size__note a{color:var(--white);text-decoration-color:var(--yellow)}

/* Sign-off */
.shop-end__grid{display:grid;gap:24px;align-items:end}
@media (min-width:900px){.shop-end__grid{grid-template-columns:minmax(0,1fr) auto}}
.shop-end__p{font-family:var(--font-body);font-weight:600;font-size:clamp(1rem,1.3vw,1.15rem);color:#080808;margin:14px 0 0}
.shop-end__btn{white-space:normal;font-family:var(--font-display);font-weight:400;letter-spacing:.04em;max-width:100%}