

#product-output .s-product-output__brk{
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-5);
}
#product-output .brk__rule{ align-self:center; }

#product-output .s-product-output__head{
  margin-top:var(--sp-9);
  margin-bottom:var(--sp-10);
}
#product-output .s-product-output__h{
  max-width:var(--measure-display);
}

#product-output .s-product-output__cols{
  align-items:stretch;   
}

#product-output .s-product-output__open,
#product-output .s-product-output__close{
  margin:0;
}

#product-output .s-product-output__reg{
  --reg-key : var(--sp-10);    
  --reg-top : var(--sp-5);     
  --reg-foot: var(--sp-6);     
  grid-column:1 / span 7;
  grid-row:1;
  margin:0;
}

#product-output .s-product-output__row{
  display:grid;
  grid-template-columns:var(--reg-key) minmax(0,1fr);
  gap:var(--gutter);
  align-items:stretch;
}
#product-output .s-product-output__row + .s-product-output__row{
  border-top:var(--hair) solid var(--line);
}

#product-output .s-product-output__key{
  margin:0;
  padding-top:calc(var(--reg-top) + var(--sp-2));
  padding-bottom:var(--reg-foot);
  color:var(--fg-mut);
}

#product-output .s-product-output__val{
  margin:0;
  padding:var(--reg-top) 0 var(--reg-foot) var(--sp-6);
  border-left:var(--hair) solid var(--line);
  font-size:var(--fs-statement);
  color:var(--fg);
  
  text-wrap:pretty;
}

#product-output .s-product-output__attrib{
  display:block;
  position:relative;
  margin-top:var(--sp-5);
  padding-top:var(--sp-4);
  color:var(--fg);
  
  word-spacing:normal;
}
#product-output .s-product-output__attrib::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:var(--sp-7);
  height:var(--hair-2);
  background:var(--line-strong);
}

#product-output .s-product-output__note{
  grid-column:8 / span 5;
  grid-row:1;
  padding:var(--sp-5) 0 var(--sp-6) var(--sp-6);
  border-left:var(--hair) solid var(--line);
}

#product-output .s-product-output__say{
  color:var(--fg);
  max-width:var(--measure-prose);
}

@media (max-width: 1100px){
  #product-output .s-product-output__head{
    margin-top:var(--sp-8);
    margin-bottom:var(--sp-9);
  }

  
  #product-output .s-product-output__reg{
    --reg-key: var(--sp-9);
    grid-column:1 / -1;
    grid-row:2;
  }
  #product-output .s-product-output__note{
    grid-column:1 / -1;
    grid-row:1;
    padding:var(--sp-5) 0 var(--sp-6);
    border-left:0;
    border-bottom:var(--hair) solid var(--line);
  }
  #product-output .s-product-output__val{
    padding-left:var(--sp-5);
  }
}

@media (max-width: 760px){
  
  #product-output.ch--tall{ padding-block:var(--sp-9); }

  #product-output .s-product-output__brk{ gap:var(--sp-4); }

  #product-output .s-product-output__head{
    margin-top:var(--sp-7);
    margin-bottom:var(--sp-8);
  }

  
  #product-output .s-product-output__row{
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  #product-output .s-product-output__key{
    padding-top:var(--sp-5);
    padding-bottom:var(--sp-3);
  }
  #product-output .s-product-output__val{
    padding:0 0 var(--sp-6);
    border-left:0;
    font-size:var(--fs-sub);
  }

  #product-output .s-product-output__attrib{
    margin-top:var(--sp-5);
    padding-top:var(--sp-4);
  }

  #product-output .s-product-output__note{
    padding-top:var(--sp-5);
  }
}
