/* 06 KIT: the call and the tee as twins -- one card each, the same grid: the name in the poster's metal letters
   (style.css .pm-h/.pm-l) with its price on the same line, one line under it, then the photo square beside what you choose,
   the main button at the photo's foot. The cart door stands over the tee. */
.st6{--pic:256px;--fs:44px}
.s6{display:grid;gap:12px;align-content:start}

.s6-hd{display:flex;justify-content:flex-end;min-height:48px}
.s6-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

.s6-k{display:grid;grid-template-columns:min(var(--pic),100% - 276px) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;column-gap:20px;
  grid-template-areas:"top top" "sub sub" "pic a" "pic b" "pic go";min-width:0;padding:20px 20px 20px;background:var(--panel);border:1px solid var(--line)}
.s6-top{grid-area:top;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.s6-t{min-width:0}
.s6-p{flex:none;font:300 32px/1 var(--f)}
.s6-sub{grid-area:sub;margin:14px 0 18px;font:600 17px/1.45 var(--f);color:var(--dim)}
.s6-pic{grid-area:pic;position:relative;aspect-ratio:1;background:var(--card2);overflow:hidden}
.s6-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s6-call .s6-pic img{object-position:62% 40%}
.s6-a{grid-area:a;display:flex;flex-direction:column;gap:6px;min-width:0}
.s6-b{grid-area:b;display:flex;flex-direction:column;gap:6px;min-width:0;margin-top:12px}
.s6-go{grid-area:go;display:grid;margin-top:12px}
.s6 .szg{gap:4px}
.s6 .s6-cg{grid-template-columns:repeat(3,minmax(48px,1fr))}
.s6 .add{padding:0 12px}
.s6-call .how{gap:12px}
/* after an add, the way to the cart sits under the tee's order row (a desktop keeps the cart door in view) */
.s6-vc{grid-column:1/-1;width:100%;margin-top:12px}
@media (min-width:1025px){.s6-vc{display:none}}

/* the load: the cart door, then the call, then the tee */
.s6-hd,.s6-k{animation:bn-in .9s cubic-bezier(.2,.7,.2,1) both}
.s6-call{animation-delay:.06s}
.s6-tee{animation-delay:.14s}

@media (min-width:1025px) and (max-height:820px){
  .st6{padding-top:12px}
}
/* a tablet: the twins stand one over the other, each keeping its grid */
@media (max-width:1024px){
  .s6-pair{grid-template-columns:minmax(0,1fr)}
}
/* a phone: the photo beside the first choice, the rest across the card */
@media (max-width:767px){
  .st6{--pic:128px;--fs:29px}
  .s6{gap:10px}
  .s6-pair{gap:10px}
  .s6-k{grid-template-columns:min(var(--pic),100% - 164px) minmax(0,1fr);grid-template-rows:auto auto auto auto auto;column-gap:12px;grid-template-areas:"top top" "sub sub" "pic a" "b b" "go go";padding:14px 16px}
  .s6-p{font-size:26px}
  .s6-sub{margin:6px 0 10px;font-size:15px}
  .s6-b,.s6-go{margin-top:10px}
  .s6-call .how{gap:8px;justify-content:center}
  .s6-call .how li{gap:8px;font-size:14px;line-height:1.25}
  .s6-call .how b{width:24px;height:24px;font-size:13px}
  .s6-a{justify-content:flex-end}
}
/* the narrowest phones: the card's inline padding meets its block padding */
@media (max-width:359px){
  .s6-k{padding-inline:14px}
}