/* Buyer image/copy modules — reference: for-grip-sock-brands.html.
   Loaded only by the other five buyer pages, after their original styles.
   The reference page, shared site CSS, images, and content are unchanged. */
.buyer-layout .buyer-intro-section{padding:34px 0 20px}
.buyer-layout .buyer-detail-section{padding:0 0 28px}
.buyer-layout .buyer-row{
  display:grid;
  max-width:var(--max);
  margin:0 auto;
  align-items:stretch;
}
.buyer-layout .buyer-intro-row{
  grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);
  gap:24px;
}
.buyer-layout .buyer-detail-row{
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  gap:22px;
}
.buyer-layout .buyer-detail-row.buyer-image-left{
  grid-template-columns:minmax(420px,.95fr) minmax(0,1.05fr);
}
.buyer-layout .buyer-copy,
.buyer-layout .buyer-media{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  margin:0;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 16px 40px rgba(16,43,58,.06);
}
.buyer-layout .buyer-copy{
  position:static;
  z-index:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#fff;
}
.buyer-layout .buyer-intro-copy{padding:34px 34px 32px}
.buyer-layout .buyer-detail-copy{padding:32px}
.buyer-layout .buyer-intro-copy h2{
  font-size:clamp(34px,3.8vw,50px);
  line-height:1.04;
  letter-spacing:-1.7px;
  margin:0 0 14px;
}
.buyer-layout .buyer-detail-copy h2{
  font-size:clamp(34px,3.8vw,48px);
  line-height:1.05;
  letter-spacing:-1.5px;
  margin:0 0 14px;
}
.buyer-layout .buyer-copy>p{line-height:1.65;color:var(--muted);margin:0}
.buyer-layout .buyer-intro-copy>p{font-size:16px}
.buyer-layout .buyer-detail-copy>p{font-size:15px}
.buyer-layout .buyer-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:auto;
  min-height:0;
  background:#eef3f5;
}
/* A width-based minimum matches the reference's 7:8 opening image.
   Unlike aspect-ratio on a stretched grid item, it cannot widen the column
   when the neighboring copy grows. Both cards share the final row height. */
.buyer-layout .buyer-intro-media::before{
  content:"";
  display:block;
  padding-top:114.285714%;
}
.buyer-layout .buyer-detail-media{min-height:430px}
.buyer-layout .buyer-media img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  object-position:center;
}
@media(max-width:1100px){
  .buyer-layout .buyer-intro-row,
  .buyer-layout .buyer-detail-row,
  .buyer-layout .buyer-detail-row.buyer-image-left{grid-template-columns:minmax(0,1fr)}
  .buyer-layout .buyer-media{min-height:0}
  /* Standalone images use the same portrait crop in every buyer route. */
  .buyer-layout .buyer-media::before{content:"";display:block;padding-top:114.285714%}
}
@media(max-width:700px){
  .buyer-layout .buyer-row{gap:20px}
  .buyer-layout .buyer-copy{padding:26px 22px}
  .buyer-layout .buyer-copy h2{font-size:34px;letter-spacing:-1.1px}
  .buyer-layout .buyer-intro-section{padding:28px 0 20px}
}