.hp-packs{padding-top:52px;padding-bottom:72px}.hp-packs-heading{max-width:960px;margin:0 auto 48px;text-align:center}.hp-packs h1{font-size:clamp(38px,5vw,64px);line-height:1.08;margin:12px 0 22px}.hp-packs p{line-height:1.65}.hp-packs-detail{color:#726976;font-size:15px}.hp-pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}.hp-pack-card{color:inherit;text-decoration:none;display:block}.hp-pack-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;overflow:hidden;background:#ede6df}.hp-pack-pair img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}.hp-pack-card h2{font-size:23px;margin:15px 0 6px}.hp-pack-card p{margin:0 0 8px;font-size:15px}.hp-pack-card>span{font-size:14px;color:#726976}.hp-pack-back{display:inline-block;margin-bottom:24px;color:inherit}.hp-pack-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}.hp-pack-photo img{display:block;width:100%;height:auto;max-height:720px;object-fit:cover}.hp-pack-category{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#726976}.hp-pack-styling{display:flex;gap:24px;margin:24px 0}.hp-pack-styling a{color:inherit;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}.hp-pack-styling [aria-current]{border-color:#462447}.hp-pack-copy .primary{display:inline-flex;margin:12px 0}.hp-pack-looks,.hp-pack-how{margin-top:64px}.hp-pack-looks h2,.hp-pack-how h2{font-size:32px}.hp-pack-looks ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;padding-left:20px}.hp-pack-how{max-width:720px}.hp-pack-how li{padding:5px 0}.hp-pack-how p{color:#726976;font-size:15px}@media(max-width:800px){.hp-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hp-pack-hero{gap:28px}}@media(max-width:540px){.hp-packs{padding-top:30px}.hp-pack-grid,.hp-pack-hero{grid-template-columns:1fr}.hp-pack-grid{gap:32px}.hp-pack-photo{max-width:440px}.hp-pack-looks ul{grid-template-columns:1fr}.hp-pack-hero{gap:22px}.hp-pack-copy h1{font-size:40px}}

/* Styling choices keep one selection line; hover only changes the text color. */
.marketing .hp-pack-styling a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  border-bottom-width: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.marketing .hp-pack-styling a[aria-current] {
  color: var(--purple);
  border-bottom-color: currentColor;
}
.marketing .hp-pack-styling a:hover {
  color: var(--purple);
  text-decoration: none;
}
/* Cards behave as one target without underlining every line of copy. */
.marketing .hp-pack-card:hover { text-decoration: none; }
.hp-pack-card h2 { transition: color 160ms ease; }
.hp-pack-card:hover h2 { color: var(--purple); }
@media (prefers-reduced-motion: reduce) {
  .marketing .hp-pack-styling a, .hp-pack-card h2 { transition: none; }
}