/* Hair collection page styles, from the approved Hair collection prototype. */
.product .img>a{display:block;width:100%;height:100%}
.more4 .product .img{aspect-ratio:4/5;background:#f2f2f2;overflow:hidden}
.more4 .product .img img{width:100%;height:100%;object-fit:cover}
.more4 .product{display:flex;flex-direction:column;margin:0}
.more4 .product>p:not(.price-line){flex:1}
.more4 .product>.btn{align-self:flex-start;margin-top:8px}
/* Groups stretch to the same height so all four buttons share one line. */
.more4 .grp{display:flex;flex-direction:column}
.more4 .grp .two{flex:1}
.more4 .product .img.whole{background:#eeedeb}
.more4 .product .img.whole img{object-fit:contain;padding:8%}
.chapter-photo.short{min-height:max(min(62vh,560px),min(48vw,80svh))}
.chapter-photo.short img{object-position:50% 6%}
@media (max-width:900px){.chapter-photo.short img{object-position:34% 50%}}
.chapter-photo.short .aside{max-width:30ch}
.coll{padding-block:clamp(56px,8vw,112px)}
.coll .head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-bottom:clamp(28px,4vw,48px);align-items:end}
.coll .head h2{grid-column:1 / span 7;font-size:var(--h-sec);line-height:1.05}
.coll .head p{grid-column:8 / span 5;margin:0;color:var(--grey);font-size:16px}
.coll .row3{grid-column:auto}
.coll + .coll{padding-top:0}
.starter{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center;background:var(--bone);padding:clamp(24px,4vw,56px)}
.starter .pic{grid-column:1 / span 6;margin:0;aspect-ratio:5/4;background:#fff;overflow:hidden}
.starter .pic img{width:100%;height:100%;object-fit:cover}
.starter .text{grid-column:8 / span 5}
.starter h2{font-size:var(--h-sec);line-height:1.05;margin-bottom:16px}
.starter .price{font-size:17px;color:var(--ink);margin-bottom:24px}
.starter .actions{gap:12px}
.starter .starter-note{font-size:14px;color:var(--grey);margin:16px 0 0}
.more4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.more4 .grp>h2{font-size:clamp(28px,2.6vw,40px);line-height:1.1;margin-bottom:8px}
.more4 .grp>p{color:var(--grey);font-size:15px;margin-bottom:24px;min-height:3.2em}
.more4 .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.more4 .product .price-line{color:var(--ink);font-size:16px;font-weight:600;margin:2px 0 10px}
@media (max-width:900px){.more4{grid-template-columns:1fr;gap:56px}.more4 .grp>p{min-height:0}}
@media (max-width:900px){.coll .head h2,.coll .head p,.starter .pic,.starter .text{grid-column:1 / -1}}
.starter .pic>a{display:block;width:100%;height:100%}
/* Phones: Dry Shampoo, GROW, the jar and the bag use the same compact rows as the products above. */
@media (max-width:640px){
 .more4{gap:40px}
 .more4 .two{grid-template-columns:1fr;gap:0}
 .more4 .product{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:18px;row-gap:4px;align-items:start;padding-block:20px;border-top:1px solid #eee4da}
 .more4 .product:first-child{border-top:0;padding-top:4px}
 .more4 .product .img{grid-row:1 / span 6;width:112px;aspect-ratio:1}
 .more4 .product h3{font-size:26px;line-height:1.1;margin:0}
 .more4 .product>p{font-size:15px;line-height:1.5;margin:0}
 .more4 .product .price-line{margin:0}
 .more4 .product>.btn{min-height:0;padding:0;background:none;justify-content:flex-start;justify-self:start;margin-top:6px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
}
/* The Starter Bundle's jar styles: the label on its own line, then the styles as equal buttons in one row,
   stacked full width on a phone, so none is left hanging on a line of its own. */
.starter .lid-add{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:440px}
.starter .lid-add .lead{grid-column:1 / -1;margin:6px 0 0}
.starter .lid-add .btn{padding-inline:10px;white-space:nowrap}
@media (max-width:560px){.starter .lid-add{grid-template-columns:1fr;max-width:none}}